江苏龙网

  1. 主页 > 生活百科 > >

解锁 VS Code 更多可能性，轻松入门 WebView( 二 )

VS Code

效果如下：

解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
这里多了一个 js 的文件其实没有什么意义，因为如果没有这个文件占编辑器的第一个 ViewColumn 的话，其实效果和上面的配置是一样的，有了这个文件之后，我们的 WebView 才会在第二栏打开 。这些单词是不是非常简单易懂？
2、初始化内容现在我们就要切入最重要的部分啦，如何丰富 WebView 的内容呢？其实也很简单啦，把它看做一个 iframe 就好啦，那无非就是 HTML 的那些东西呗？so easy！
首先我们要有一个包含整个 HTML 内容的独立文件，为了好区分，我把它放在了这里：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
配置了一个非常简单的网页内容，里面只有一个图片：
module.exports = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello GitHub</title></head><body><img src=https://www.isolves.com/it/cxkf/bk/2021-09-01/"https://cdn.jsdelivr.net/gh/521xueweihan/img_logo@main/logo/readme.gif" width="300" />`在 extension.js 中引入文件并配置到我们的 WebView：
const hgWebview = require('./webview/hello-github');...const webviewCommand = vscode.commands.registerCommand('webview.start', () => {const panel = vscode.window.createWebviewPanel('hgWebview','HelloGitHub webview',vscode.ViewColumn.One,{});panel.webview.html = hgWebview; // 对没错就是这里配置，非常简单});...看一下效果：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
这里要提醒大家的是，你配置的应该始终是一个完整的 HTML 文档 。HTML 片段或格式错误的 HTML 可能会导致运行不成功，所以在进行复杂操作的时候一定要小心调试，多看控制栏哦 。
3、更新内容是的，我们现在要从编辑器对这个 WebView 做更新操作了！比如我们给这个 WebView 加一行文字，然后在编辑器里面加一个定时器，动态的去修改它 。首先，修改我们的 html 文件，它不在是一个静态的文本了，他要动起来就得接收一个变量，所以改成函数咯：
module.exports = (txt) => {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello GitHub</title></head><body><img src=https://www.isolves.com/it/cxkf/bk/2021-09-01/"https://cdn.jsdelivr.net/gh/521xueweihan/img_logo@main/logo/readme.gif" width="300" />
${txt} // 注意这里是接收变量的写法
`}其次呢，我们要跟这个函数有互动，并将要展示的值传进去，并且这个值还是定时 1s 要进行修改的，所以就变成这样啦：
const hgWebviewFun = require('./webview/hello-github');// 设置我们的文案const webviewTxt = {'descripton': 'HelloGitHub 是一个热爱开源项目的开源组织 。','slogon': '我们虽然没有钱，但是我们有梦想！'};... const webviewCommand = vscode.commands.registerCommand('webview.start', () => {const panel = vscode.window.createWebviewPanel('hgWebview','HelloGitHub webview',vscode.ViewColumn.One,{});let iteration = 0;const updateWebview = () => {// 做一个简单的判断用于取值const key = iteration++ % 2 ? 'descripton' : 'slogon';panel.title = webviewTxt[key];panel.webview.html = hgWebviewFun(webviewTxt[key]);};// 设置初始化的内容updateWebview();// 设置一个简单的定时器，让他一秒内执行一次setInterval(updateWebview, 1000); });...看一下我们的效果，是不是就变成一个动感十足的网页啦：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
但是效果是实现了，你有没有发现我们实现的方法非常的“暴力”，是直接替换了整个 html 的内容，类似于重新加载 iframe 。所以要是换到复杂的页面，性能肯定是个非常严重的问题，就会导致非常多令人头大的性能问题 。而且当用户关闭 WebView 面板时，WebView 本身是会被销毁的 。如果尝试使用销毁的 WebView 会引发异常，比如我们上面的 setInterval 会继续触发并更新 panel.webview.html 。
所以我们要避免这种情况出现：
const webviewCommand = vscode.commands.registerCommand('webview.start', () => {const panel = vscode.window.createWebviewPanel('hgWebview','HelloGitHub webview',vscode.ViewColumn.One,{});let iteration = 0;const updateWebview = () => {const key = iteration++ % 2 ? 'descripton' : 'slogon';panel.title = webviewTxt[key];panel.webview.html = hgWebviewFun(webviewTxt[key]);};updateWebview();const interval = setInterval(updateWebview, 1000);panel.onDidDispose(() => {// 当关闭 webview 的时候去掉对 webview 有后续更新的操作clearInterval(interval);},null,context.subscriptions);});


推荐阅读


上一篇：windows服务器安全配置篇

下一篇：npm安装cnpm后使用报错解决