vscode编辑html框框,vscode插件开发记录---模式对话框

webview-panel.ts：

修改一下静态方法createOrShow,添加一些参数

message: any,//用于消息显示类型的对话框

position: vscode.WebviewModalPosition,//对话框显示的位置

config:any,//用于传入对话框输入项的默认值

callback:any//function(pConfig){} 对框框点击确定后的回调

对话框初始化参数通过message['xx'] = xxx;message['cmd'] = "initParam";WebviewPanel.currentPanel.postMessage(message);形式传给webview，对应的webview页面如果采用vuejs开发则，组件created中window.addEventListener('message', this.onMessage),然后根据message.cmd执行初始化；反向的消息通讯参考callVscode,

webview : vscode.postMessage({ key: "close" }) ==》 webviewpanel.ts: message.key === "close" this.dispose();

webview : callVscode({ cmd: 'saveSetting', config: this.config }, () => { this.alert('保存成功！');});==》webviewpanel.ts: this._callback(message);this.dispose();

值得注意的是webview中的资源引入需要webview-panel.ts中添加支持(参考第一个链接)

private _getWebViewContent(templatePath: string): string {

const resourcePath: string = path.join(this._basePath, templatePath);

//const resourcePath = util.getExtensionFileAbsolutePath(context, templatePath);

const dirPath = path.dirname(resourcePath);

let html = fs.readFileSync(resourcePath, 'utf-8');

// vscode不支持直接加载本地资源，需要替换成其专有路径格式，这里只是简单的将样式和JS的路径替换

        html = html.replace(/( {

return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString() + '"';

});

return html;

}

表单的样式采用引入的bootstrap支持,其他的只是一些细节调整;

/----------------------------------------------------------------------------------------------------------------------------------------/

依照上面这种思路:webview页面中vscode.postMessage,panel.webview.onDidReceiveMessage中处理消息,我们还可以做一些点击页面元素关联跳转文件行或者一些其他的native功能;