做网站媒体,东莞阳光网英语口语大赛官网,商场设计说明,如何设计营销 网站建设不知道大家在写代码的时候#xff0c;摸不摸鱼#xff0c;是不是时不时得打开一下微博#xff0c;看看今天发生了什么大事#xff0c;又有谁塌房#xff0c;而你没有及时赶上。
为此#xff0c;我决定开发一个vscode插件#xff0c;来查看微博热搜
插件名称#xff1…不知道大家在写代码的时候摸不摸鱼是不是时不时得打开一下微博看看今天发生了什么大事又有谁塌房而你没有及时赶上。
为此我决定开发一个vscode插件来查看微博热搜
插件名称Fish Tools vscode扩展可搜索安装
1、热搜
首先实现在侧边栏中展示前20个热搜没必要太多 1、package.json 增加配置
views: {fish-activityBar: [{id: fishView,name: fish weibo}]},viewsContainers: {activitybar: [{id: fish-activityBar,title: Fish Weibo,icon: resources/dark/weibo.svg}]},如此侧边栏就会展示微博按钮
按钮有了内容可以通过树视图展示vscode.window.createTreeView 可以创建树视图 const customView vscode.window.createTreeView(fishView, {treeDataProvider: customTreeDataProvider,});class CustomTreeDataProvider implements vscode.TreeDataProviderCustomItem这里官方文档中有树视图的例子
热搜内容可以在CustomTreeDataProvider类的getChildren方法中通过调微博的接口获取
const data await getHotSearch();
const top20Hot (data?.data?.realtime || []).slice(0, 20);
const treeData top10Hot.map((item: any) {return { label: item?.note, id: item?.mid };
});到这里完成情况如图所示
只有热搜当然还是不够的因为我们想了解具体内容的时候还是需要打开浏览器所以这里给每条热搜增加点击功能
2、热搜内容
getTreeItem(element: CustomItem): vscode.TreeItem {const treeItem new vscode.TreeItem(element?.label);// 配置点击行为treeItem.command {command: treeView.openContent,title: Open Content,arguments: [element],};return treeItem;}这里增加了command需要注册该命令并且点击之后打开一个webview(简单版的也可以直接打开一个文档展示内容即可)
vscode.commands.registerCommand(treeView.openContent,(treeItem: vscode.TreeItem) {const panel vscode.window.createWebviewPanel(webviewId,webviewTitle || 详情,vscode.ViewColumn.One,{enableScripts: true,});// webview内容const scriptPath vscode.Uri.file(path.join(extensionPath, jsPath));const scriptUri panel.webview.asWebviewUri(scriptPath);panel.webview.html !DOCTYPE htmlhtml langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title详情/title/headbodydiv idloading页面初始化中.../divdiv idroot/divscript src${scriptUri}/script/body/html}
)webview内容实现方式可以多种这里scriptUri 直接写路径是不生效的详情可以看官方文档。
3、消息传递
这里实现了热搜点击事件以及打开了webview窗口那么数据如何在webview传递这里因为直接调的微博的接口所以在webview中是调不通的所以调接口查数据的过程在vscode扩展这边实现
这里第一个问题是热搜的详细内容是需要登录的所以这里需要一个cookiecookie的获取也比较简单随便找一个接口就能查询到
第二个问题是详细内容并不是通过调xhr接口返回的需要自行去解析dom结构来获取自己需要的内容。
1、消息的传递vscode扩展传递到webview可以通过postMessage
panel.webview.postMessage({command,text
});2、webview中可以通过 window.addEventListener监听消息
window.addEventListener(message, (event) {if (message.command getMessage) {setContent(message.text);}
}3、webview传递到vscode中通过postMessage方法
const vscode acquireVsCodeApi();
vscode.postMessage({command: pageUp,text: { page: page - 1 },
});4、vscode中通过onDidReceiveMessage监听
panel.webview.onDidReceiveMessage((message) {if (message.command pageUp) {getHotDetail();}
});这里在给webview.html赋值之后可以调接口拿到微博内容通过上述方式传到webview中webview中只需要展示即可。其他的上一页下一页刷新也可以通过相同方式实现。
最后完成情况如下
4、配置
上述只简单概述插件功能配置方面这里增加了cookie的配置以及热搜的刷新间隔。
后续可以考虑评论、点赞等功能实现。
