vsCode插件开发_07webView

于 2024-06-03 17:00:01 发布
阅读量587 收藏 15
点赞数 23
分类专栏： vsCode插件开发 文章标签： vscode ide 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/everglow__/article/details/139416290
版权

书接上回进行vsCode插件开发，本篇主要记录的是：

        webView的相关开发，包括前端webView与vscode插件后端的Api接口互相调用

——————————————————————————————————————————————————华丽的分割线

工程是新建了一个demo07-webview，但还是将demo06的内容添加了进来

下面我们进入正题：

        webView的相关设置还是有点复杂的，本文记录的是使用JavaScript作为开发语言的方式，使用ts的朋友可以作为参考，要使用的话，肯定还是需要改动一下的。

step1： 在package.json中添加：

        这两个配置属性是之前demo中使用到过的，本文因读取这些配置数据，固也需要依赖，直接添加就好。

step2 在extension.js中导入indexWebViewJs.js，在目录src下新建了indexWebViewJs.js，用于处理webView的加载、配置、响应、api接口的调用（具体在indexWebViewJs.js文件中）

下面附上indexWebViewJs.js的代码：

此处主要是进行网页的初始化，以及加载本地的html文件、监听处理html发来的消息

此处展示了indexWebViewJs.js文件中3个封装的方法：

1 getWebViewContent 处理相对路径

2 messageHandler 处理函数回调（...解释性语言用起来确实比c++方便多了）

3 invokeCallback 执行回调，发送数据到html中

代码中都有注释，......看懂应该不成问题吧

下面附上indexWebView.html的代码

注意此处，引用了vue.js和indexWebView.js，这两个是用来处理前后端交互的

大前端们看到勿喷，写的比较low

下面附上indexWebView.js的代码

主要是调用了getConfig和setConfig函数（此处需要一些前端知识）

callVscode是自己封装的函数，用来在网页端向vscode插件端发送处理数据

window.addEventListener这里是监听响应vscode插件端向网页端发送处理数据的地方

最后附上一个效果图

在启动vscode插件的时候，启动了一个网页

第一行，获取了插件配置中 属性：vscodePluginDemo.userName对应的名字，然后进行了显示

第二行，定义了一个计数器，点击第三行的按钮，触发后台的处理函数，进行简单的累加

最后一行，一个选择框是用于显示 属性：vscodePluginDemo.showTip 是否显示欢迎页

这两个属性在设置下的属性中均可以设置和查看

至此本文记录的所有内容，功能已完全实现，后续会将所有程序一并打包发布

——————————————————————————————————————————————————华丽的分割线

另：本文记录的内容也是参考网上一些朋友的代码，然后自己理解、改装后实现

VSCode插件开发全攻略（七）WebView-阿里云开发者社区 (aliyun.com)

初探 VS Code + Webview-CSDN博客

vsCode插件官方开发文档

Extension API | Visual Studio Code Extension API

进击的CppCodeCreater
关注
  • 23
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【VS Code插件开发】Webview面板（三）
编码世界
08-21 1万+
Webview API 允许扩展在 VS Code 中创建完全可自定义的视图。例如，内置的 Markdown 扩展使用 webview 来渲染 Markdown 预览。Webview 还可以用于构建超出 VS Code 原生 API 支持范围的复杂用户界面。
探索微软的VSCode WebView UI Toolkit：构建现代化Web视图UI的新工具
gitblog_00031的博客
03-24 595
探索微软的VSCode WebView UI Toolkit：构建现代化Web视图UI的新工具 项目地址:https://gitcode.com/microsoft/vscode-webview-ui-toolkit 项目简介 微软的VSCode WebView UI Toolkit是一个开源项目，它提供了一套用于在Visual Studio Code (VSCode)扩展中构建现代、响应式...
vscode插件开发（四）Webview（1）
江达小记
11-22 3222
vscode的webview插件的自由度很高，可以满足开发者的各种定制化的要求。本篇介绍一个基于vue3的vscode webview插件模板。
初探 VS Code + Webview
奇舞周刊
04-26 1673
本文作者为 360 奇舞团前端开发工程师介绍VSCode 是一个非常强大的代码编辑器，而它的插件也非常丰富。在开发中，我们经常需要自己编写一些插件来提高开发效率。本文将介绍如何开发一个 VSCode 插件，并在其中使用 Webview 技术。首先介绍一下什么是Webview。什么是 Webview？Webview 是一种可以在 VS Code 中嵌入 Web 内容的技术。通过 Webview，开发...
vscode插件开发 webview使用外部项目
weixin_43453629的博客
07-07 1218
可以直接在vscode插件代码中引入本地html文件 function getViewContent(context, templatePath) { const resourcePath = path.join(context.extensionPath, templatePath); const dirPath = path.dirname(resourcePath); let html = fs.readFileSync(resourcePath, 'utf-8'); // vsc.
初识vscode插件开发(四)-webview api
popstarqq的博客
04-06 5516
通俗点说：webview即web视图，使用webview api 你可以在vscode中打开一个完成的视图，该视图就跟嵌入页面一样，几乎用html语法就可以渲染；而且还可以调用一些vscode的原生api做一些复杂的交互； 我也是半知半解，让我们先实现一个效果；就可以自己去总结这是个什么东西了 1 在extension.ts文件中，添加一个命令 context.subscriptions.push( vscode.commands.registerCommand('GeoJsonVi.
VSCode插件开发全攻略（七）WebView
weixin_33810006的博客
10-18 1277
更多文章请戳VSCode插件开发全攻略系列目录导航。 什么是Webview 大家都知道，整个VSCode编辑器就是一张大的网页，其实，我们还可以在Visual Studio Code中创建完全自定义的、可以间接和nodejs通信的特殊网页（通过一个acquireVsCodeApi特殊方法），这个网页就叫WebView。内置的Markdown的预览就是使用...
vscode插件开发实践与demo源码
weixin_33795093的博客
02-13 355
vscode插件开发实践与demo源码 写在前面 工欲善其事必先利其器。vscode作为优秀的开发工具，给我的日常开发工作提供了极大的便利。其拓展机制更是如此。 但是，最近在做年度专业线任务时，有需要用到漂亮的行尾注释对齐，搜索后发现vscode官方插件市场没有我想要的。 于是便想着自己来开发这么个东西，一方面方便后边自己使用，一方面也能...
vscode 插件开发 + vue的操作方法
10-15
下面我们将详细探讨如何在VSCode插件开发中结合Vue进行操作。 首先，我们需要一个已经开发好的Vue项目。确保你的Vue项目配置正确，能够正常打包生成可运行的静态资源。在`vue.config.js`中，你需要特别关注`public...
VsCode之使用WebView通信详解
10-16
在VsCode插件开发中，WebView通信是一个非常重要的概念。WebView是一种使用HTML、CSS和JavaScript构建的可视化组件，可以在VsCode中创建完全自定义的视图。下面是关于WebView通信的知识点： 1. WebView的概念：...
vscode-page：用于vscode Webview的轻量级页面微框架
02-16
vscode页 vscode-page是用于vscode Webview的轻量级页面微框架，它可以加快对Code Extension Webview的开发。 特征 通过抽象化html页面和WebviewPanel之间的通信，开发人员可以专注于业务逻辑。 内置的模板引擎，带有 。 消息映射，一种组织页面逻辑和视图的简单方法。 baseUrl支持，可以在html页面中使用相对路径。 正在安装 npm install vscode-page 用法 vscode-page通过以下步骤简化了Webview的开发： 在html页面和vscode.WebviewPanel之间定义消息。 在该页面内开发html页面和js函数。 定义MessageMappings。 注册一个命令以使用步骤3中定义的MessageMappings创建（或显示）WebviewPanel。 整个架构如下所示：
vscode工具插件
09-30
个人使用的便捷插件，公司内网方便，内网开发工具可以下载使用，主要应用vscode 插件部分。只选取部分插件，保证基本的开发
vsCode插件开发demo合集 文章详情: http://t.csdnimg.cn/W0mF8
最新发布
06-03
vsCode插件开发 01环境搭建+helloWorld 本文主要记录：基础环境搭建+helloworld程序运行 vsCode插件开发 02标题栏菜单+右键菜单(替换选中文字) ...vsCode插件开发 07webView 本文主要记录:webView的开发内容
VSCode Webview 插件开发的模板的踩坑记录
CRPER
04-15 1354
上周写了个 vscode 的小插件后，突然想整个 webview 的插件。于是乎开始搜罗相关的资料，开搞！这里记录下几个踩过的坑。
vscode插件webview和插件通信
时间定格点的博客
12-10 1023
注意，WebView 中的 JavaScript 代码需要在 HTML 文件中引入，需要在 WebView 中使用 webview.asWebviewUri 方法将文件路径转换为 vscode-resource: 协议的 URI，以确保安全。在 WebView 中，当收到插件发送的消息时，会触发 message 事件，事件对象中包含了消息的具体内容，可以通过 event.data 获取。在插件中，当收到 WebView 发送的消息时，可以调用需要的方法，处理消息内容。
vscode的webview页面
qq_23350817的博客
12-27 1780
数组的错误写法： 正确是这么写： webview的结果 包含数组类型的字符串不要都使用双引号，可以单引号和双引号配合使用！！！
vscode的webview性能优化总结
qq_23350817的博客
10-25 1469
1、首次加载需耗时，但是在此加载的应该是缓存的页面，再调用的时候直接显示出来，不要重新渲染： if (MyDemo.myPanel != undefined) { try { this.getHtmlForWebview(); MyDemo.myPanel.reveal(vscode.ViewColumn.Ac...
使用WebView调用在线网址--解决显示不出来（VSCode编写网页+Android Studio获取）
qq_50272406的博客
03-14 4599
VSCode部分（测试样例）： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
vscode 插件开发中 在webview使用child_process.fork()创建多进程不生效
05-29
在 VS Code 插件开发中，如果需要在 Webview 中使用 `child_process.fork()` 方法创建多进程，需要进行如下操作： 1. 在插件的 `package.json` 文件中配置 `"browser"` 字段，将需要使用的模块路径映射到实际的模块路径上。例如： ```json { "name": "my-extension", "version": "1.0.0", "main": "extension.js", "browser": { "child_process": "./node_modules/electron/dist/electron.js" } } ``` 在这个例子中，我们将 `child_process` 模块的路径映射到了 Electron 的路径上。 2. 在 Webview 中使用 `require()` 方法加载模块时，需要使用 `nodeIntegration: true` 选项来启用 Node.js 的集成。例如： ```javascript const vscode = acquireVsCodeApi(); const { fork } = require('child_process').remote; const child = fork('fileProcessor.js'); child.on('message', (result) => { console.log(`Processed file: ${result}`); }); child.send('file.txt'); ``` 在这个例子中，我们使用 `require()` 方法加载 `child_process` 模块，并通过 `remote` 对象使用 `fork()` 方法创建子进程。然后，我们通过 `send()` 方法向子进程发送文件名参数，并通过 `message` 事件监听子进程的输出结果。 需要注意的是，在使用 Webview 中的多进程时，需要考虑安全问题。Webview 中的代码可以访问用户计算机上的文件系统和网络资源，并可能执行恶意代码。因此，需要对 Webview 中的代码进行严格的输入验证和代码审查，以确保插件的安全性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值