电商网站建设相关书籍推荐互联网创业项目什么赚钱

当前位置： 首页 > news >正文

电商网站建设相关书籍推荐,互联网创业项目什么赚钱,开发工具控件属性怎么打开,wordpress设置缓存#x1f431; 个人主页#xff1a;不叫猫先生#xff0c;公众号#xff1a;前端舵手 #x1f64b;♂️ 作者简介#xff1a;前端领域优质作者、阿里云专家博主#xff0c;共同学习共同进步#xff0c;一起加油呀#xff01; #x1f4e2; 资料领取#xff1a;前端… 个人主页不叫猫先生公众号前端舵手 ♂️ 作者简介前端领域优质作者、阿里云专家博主共同学习共同进步一起加油呀 资料领取前端进阶资料可以找我免费领取 摸鱼学习交流我们的宗旨是在「工作中摸鱼摸鱼中进步」期待大佬一起来摸鱼(文末有我wx或者私信) 目录 一、前言二、registerWebviewViewProvider三、自定义视图添加到活动栏四、案例1、新建SidebarProvider.ts文件2、extension.ts中引入 一、前言 在 VS Code 开发工具中可以在侧边栏中创建一个持久化的自定义视图。这个视图可以随着 VS Code 的不同窗口、标签页之间的切换而保持存在。 侧边栏官方文档讲解 二、registerWebviewViewProvider 在插件的激活阶段使用 vscode.window.registerWebviewViewProvider 方法来注册自定义视图的提供者。这个方法接受三个参数如下 唯一的视图 ID用于自定义视图的 HTML 内容、事件处理等可选的配置选项 当你注册一个 Webview 视图提供者时需要提供一个回调函数来处理视图的创建和配置。这个回调函数就是 resolveWebviewView。 vscode.window.registerWebviewViewProvider(yourViewId, {resolveWebviewView: (webviewView, context) {// 在这里设置自定义视图的 HTML 内容、事件处理等webviewView.webview.html h1Hello from Webview!/h1;} }, {webviewOptions: {retainContextWhenHidden: true} });retainContextWhenHidden 是布尔类型用于控制当 Webview 隐藏不可见时是否保留其上下文。当设置为 true 时在用户切换到其他面板或关闭 Webview 时Webview 的状态和内容将保持不变。这可以在某些情况下提供更好的用户体验因为用户在返回到 Webview 时可以继续之前的操作而不必从头开始。 三、自定义视图添加到活动栏 viewsContainers 用于定义自定义视图容器。 activitybar 位于编辑器侧边的垂直工具栏。活动栏提供了快速访问各种功能、面板和操作的图标按钮使用户能够轻松地切换和执行不同的任务。其中参数如下 id标识符title标题icon图标 views 配置用于定义自定义视图Views以及这些视图的属性和行为。这些视图可以包括内嵌的 Webview以便在插件中显示自定义的 Web 内容、UI 界面等。其中参数解释如下 id视图的唯一标识符用于在扩展中引用这个视图。name视图的名称将在用户界面中显示。用户将通过这个名称来识别视图。type视图的类型。在这里设置为 “webview”表示在视图中使用 Webview 来显示自定义的 Web 内容。 通过使用 viewsContainers和 views 配置可以创建自己的自定义视图和容器将其添加到活动栏中并与 Webview 结合以显示自定义的界面和内容。 viewsContainers: {activitybar: [{id: wxRead-container,title: wxRead,icon: media/logo.png}] },views: {wxRead-container: [{id: wxRead-view,type: webview,name: wxRead}]}结果展示如下
四、案例 我们自定义视图的时简单的可以直接在registerWebviewViewProvider的第二个参数进行设置不过我们处理复杂的逻辑的时候一般会封装一个视图然后引入到extension.ts中使用。 1、新建SidebarProvider.ts文件 在构造函数中传入扩展的根路径 _extensionUri 和扩展的上下文 context。通过 _context.globalState.get(Token) 获取之前存储的 token。 在 resolveWebviewView 方法中配置 Webview 的选项使其支持运行脚本和加载本地资源。 使用 webviewView.webview.onDidReceiveMessage 监听 Webview 内的消息并根据不同的 data.command 执行不同的操作。在这个示例中包括处理登录和登出请求。 loginRequest 方法用于发送登录请求通过 axios 发送 POST 请求到服务器处理服务器返回的数据。 _getHtmlForWebview 方法用于生成 Webview 的 HTML 内容。它通过 asWebviewUri 方法获取资源文件的 URI设置 Content Security PolicyCSP并嵌入需要加载的脚本和样式。 其中某些参数的解释 enableScripts: true 这个选项设置为 true允许在 Webview 中运行 JavaScript 脚本。如果你的 Webview 需要执行一些交互式操作或展示动态内容你需要将这个选项设置为 true。 localResourceRoots: [this._extensionUri] localResourceRoots 是一个数组指定了可以从本地加载的资源的根路径。在这个代码中this._extensionUri 是扩展的根路径 URI这表示 Webview 可以从扩展的根路径加载本地资源。
_getHtmlForWebview方法中: styleResetUri、styleVSCodeUri、scriptUri 和 styleMainUri这些是通过webview.asWebviewUri方法获取的资源文件的 URI。这些 URI 是扩展中的 CSS 样式表和 JavaScript 脚本的位置。 nonce这是一个用于 CSP 的 nonce 值用于限制只有特定 nonce 值的脚本能够被执行。 meta http-equivContent-Security-Policy这是 Content Security PolicyCSP的设置用于指定允许加载的资源和脚本。它限制了从 https 或扩展目录加载的图像只允许特定 nonce 值的脚本被执行。 最后返回的 HTML 包括引用了所需资源的 link 标签和 script 标签。其中script 标签引用了你的编译后的 JavaScript 脚本nonce 值用于安全性以确保只有符合 nonce 条件的脚本被执行。 import * as vscode from vscode; import { getNonce } from ./getNonce; import axios from axios import { error } from console; export class SidebarProvider implements vscode.WebviewViewProvider {_view?: vscode.WebviewView;//存储 Webview 视图private _context: vscode.ExtensionContext; // 存储扩展上下文对象private _token: string | undefined;// 存储tokenconstructor(private readonly _extensionUri: vscode.Uri, context: vscode.ExtensionContext) {this._context context;this._token this._context.globalState.get(Token);}public resolveWebviewView(webviewView: vscode.WebviewView) {this._view webviewView;webviewView.webview.options {enableScripts: true,localResourceRoots: [this._extensionUri],};webviewView.webview.onDidReceiveMessage(async (data) {console.log(data, data.command, command1111111111)switch (data.command) {case login: {let obj;if (data data.loginname) {obj { username: data.loginname, password: data.password }} else {obj { username: this._userInfo?.loginname, password: this._userInfo?.password }}console.log(this._userInfo, this._userInfo)this.loginRequest(obj, webviewView);break;}case logout: {axios.post( /logout,{ username: this._userInfo?.username, password: this._userInfo?.password },{headers: {Authorization: Bearer \({this._token}, // 假设 token 的类型是 Bearer token},}).then((res) {console.log(res, res)if (res.data.code 200) {this._isLoggedIn false;webviewView.webview.html this._getHtmlForWebview(webviewView.webview)//用于生成 Webview 的 HTML 内容this._context.globalState.update(Token, );this._token ;vscode.commands.executeCommand(extension.logoutSuccess);}if (res.data.msg) vscode.window.showInformationMessage(res.data.msg);}).catch(error {vscode.window.showErrorMessage(服务器连接错误);})break;}}});}public loginRequest(data: any, webviewView: vscode.WebviewView) {axios.post(/login, data).then(res {if (res.data.code 200) {webviewView.webview.html this._getHtmlHome(webviewView.webview);//用于生成 Webview 的 HTML 内容webviewView.webview.postMessage({command: loginResponse,success: true,message: { ...res.data, imageUri, password,loginname: data.username }});this._token res.data.token;vscode.commands.executeCommand(extension.loginSuccess, res.data);vscode.window.showInformationMessage(res.data.msg);} else {vscode.window.showErrorMessage(res.data.msg);}}).catch(error {vscode.window.showErrorMessage(服务器连接错误);})}public revive(panel: vscode.WebviewView) {this._view panel;//将传入的 Webview 视图存储到 _view 成员变量中用于后续操作}// 在其他地方调用此方法来设置缓存的数据public setData(data: any) {}// 在其他地方调用此方法来获取缓存的数据public getData() {}//用于生成 Webview 的 HTML 内容private _getHtmlForWebview(webview: vscode.Webview) {//asWebviewUri获取资源文件的 URIconst styleResetUri webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, media, reset.css));const styleVSCodeUri webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, media, vscode.css));const scriptUri webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, out, compiled/HelloWorld.js));const styleMainUri webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, out, compiled/HelloWorld.css));// Use a nonce to only allow a specific script to be run.const nonce getNonce();let a 0;a;return !DOCTYPE htmlhtml langenheadmeta charsetUTF-8!--Use a content security policy to only allow loading images from https or from our extension directory,and only allow scripts that have a specific nonce.--meta http-equivContent-Security-Policy content img-src https: data:; style-src unsafe-inline \){webview.cspSource}; script-src nonce-\({nonce};meta nameviewport contentwidthdevice-width, initial-scale1.0link href\){styleResetUri} relstylesheetlink href\({styleVSCodeUri} relstylesheetlink href\){styleMainUri} relstylesheet/headbodyscript nonce\({nonce} src\){scriptUri}/script/body /html;} } 2、extension.ts中引入 import SidebarProvider from ./SidebarProvider这里导入自定义 SidebarProvider 类,用于管理 Webview 视图的创建和交互。 创建 readerViewProvider 实例通过 new SidebarProvider(context.extensionUri, context) 创建了一个 SidebarProvider 实例将扩展的根路径和上下文对象传递给它。 使用 vscode.window.registerWebviewViewProvider 注册 Webview 视图提供者这行代码注册了你的 readerViewProvider 实例作为 wxRead-view 标识符的 Webview 视图提供者。同时通过传递一个配置对象你设置了 Webview 的选项其中 retainContextWhenHidden 设置为 true以便在 Webview 隐藏时保留其上下文。 其中部分参数解释如下 context 用于传递上下文信息和提供功能的对象。 context.extensionUri用于获取当前扩展的根路径的 Uniform Resource Identifier (URI)。这个 URI 表示扩展在文件系统中的位置可以用于引用扩展中的资源文件、图标、样式表等。具体如下 import SidebarProvider from ./SidebarProvider;const readerViewProvider new SidebarProvider(context.extensionUri, context)vscode.window.registerWebviewViewProvider(wxRead-view, readerViewProvider, {webviewOptions: {retainContextWhenHidden: true,},});