VSCode 插件开发实例（WebView）：微信读书 ^-^边撸代码边看小说^-^
生活随笔
收集整理的這篇文章主要介紹了
VSCode 插件开发实例（WebView）：微信读书 ^-^边撸代码边看小说^-^
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最終效果
?
?
主要代碼
package.json
{"name": "WeReadForVSCodeJackieZheng","repository": {"type": "git","url": "https://github.com/JackieZheng/WeReadForVSCode.git"},"displayName": "WeReadForVSCode","description": "WeRead for VSCode 微信讀書 VSCode 插件","version": "0.1.0","author": {"name": "JackieZheng"},"publisher": "JackieZheng","engines": {"vscode": "^1.48.0"},"categories": ["Other", "Keymaps", "Language Packs", "Extension Packs"],"keywords": ["vscode", "plugin", "webView", "weread", "view in browser"],"icon": "Images/icon.png","activationEvents": ["onCommand:WeReadForVSCodeJackieZheng.Start"],"main": "./extension.js","contributes": {"commands": [{"command": "WeReadForVSCodeJackieZheng.Start","title": "Start","category": "WeRead","icon": {"light": "Images/icon.svg","dark": "Images/icon.svg"}}],"keybindings": [{"command": "WeReadForVSCodeJackieZheng.Start","key": "ctrl+f3","mac": "cmd+f3"}]},"license": "SEE LICENSE IN LICENSE.md","bugs": {"url": "https://github.com/JackieZheng/WeReadForVSCode/issues","email": "zhengxinzhe@jackyzheng.uu.me"},"homepage": "https://github.com/JackieZheng/WeReadForVSCode/blob/master/README.md","scripts": {"lint": "eslint .","pretest": "npm run lint","test": "node ./test/runTest.js"},"devDependencies": {"@types/vscode": "^1.48.0","@types/glob": "^7.1.3","@types/mocha": "^8.0.0","@types/node": "^14.0.27","eslint": "^7.6.0","glob": "^7.1.6","mocha": "^8.0.1","typescript": "^3.8.3","vscode-test": "^1.4.0"} }?extension.js
// @ts-nocheck const vscode = require('vscode'); const {url} = require('inspector');// this method is called when your extension is activated // your extension is activated the very first time the command is executedfunction activate(context) {// The command has been defined in the package.json file// Now provide the implementation of the command with registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('WeReadForVSCodeJackieZheng.Start', function () {// The code you place here will be executed every time your command is executed// 1.創建并顯示Webviewconst panel = vscode.window.createWebviewPanel(// 該webview的標識，任意字符串'WeRead',// webview面板的標題，會展示給用戶'微信讀書',// webview面板所在的分欄vscode.ViewColumn.One,// 其它webview選項{enableScripts: true, // 啟用JS，默認禁用retainContextWhenHidden: true, // webview被隱藏時保持狀態，避免被重置});//設置標題前圖標panel.iconPath = {dark: vscode.Uri.file(context.extensionPath + '/Images/iconDark.png'),light: vscode.Uri.file(context.extensionPath + '/Images/iconBlack.png')};panel.webview.html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="portrait" name="x5-orientation"><meta content="true" name="x5-fullscreen"><meta content="portrait" name="screen-orientation"><meta content="yes" name="full-screen"><meta content="webkit" name="renderer"><meta content="IE=Edge" http-equiv="X-UA-Compatible"><title>微信讀書</title><style>html,body,iframe{width:100%;height:100%;border:0;overflow: hidden;}</style></head><body><iframe src="https://weread.qq.com/"/></body></html>`;});context.subscriptions.push(disposable); } exports.activate = activate;// this method is called when your extension is deactivated function deactivate() {}module.exports = {activate,deactivate }?
其它相關?
安裝腳手架：
npm install -g yo generator-code初始化項目：
yo code?
安裝打包工具：
npm i vsce -g打包成vsix文件：
vsce package?
打包后插件及完整源碼?
https://marketplace.visualstudio.com/items?itemName=JackieZheng.WeReadForVSCodeJackieZheng
https://github.com/JackieZheng/WeReadForVSCode
?
總結
以上是生活随笔為你收集整理的VSCode 插件开发实例（WebView）：微信读书 ^-^边撸代码边看小说^-^的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐一简单易用的脑图制作工具
- 下一篇： 封装一个Array 数据 绑定 html