長春小學(xué)網(wǎng)站建設(shè)產(chǎn)品推廣計劃書怎么寫
不知道大家在寫代碼的時候，摸不摸魚，是不是時不時得打開一下微博，看看今天發(fā)生了什么大事，又有誰塌房，而你沒有及時趕上。
為此，我決定開發(fā)一個vscode插件，來查看微博熱搜
插件名稱：Fish Tools
vscode擴(kuò)展可搜索安裝
1、熱搜
首先實現(xiàn)在側(cè)邊欄中展示前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"}]},
如此，側(cè)邊欄就會展示微博按鈕
按鈕有了，內(nèi)容可以通過樹視圖展示，vscode.window.createTreeView 可以創(chuàng)建樹視圖
const customView = vscode.window.createTreeView("fishView", {treeDataProvider: customTreeDataProvider,});
class CustomTreeDataProvider implements vscode.TreeDataProvider<CustomItem>
這里官方文檔中有樹視圖的例子
熱搜內(nèi)容，可以在CustomTreeDataProvider類的getChildren方法中，通過調(diào)微博的接口獲取
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 };
});
到這里，完成情況如圖所示，
只有熱搜當(dāng)然還是不夠的，因為我們想了解具體內(nèi)容的時候，還是需要打開瀏覽器，所以這里給每條熱搜增加點擊功能
2、熱搜內(nèi)容
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，(簡單版的也可以直接打開一個文檔，展示內(nèi)容即可)
vscode.commands.registerCommand("treeView.openContent",(treeItem: vscode.TreeItem) => {const panel = vscode.window.createWebviewPanel(webviewId,webviewTitle || "詳情",vscode.ViewColumn.One,{enableScripts: true,});// webview內(nèi)容const scriptPath = vscode.Uri.file(path.join(extensionPath, jsPath));const scriptUri = panel.webview.asWebviewUri(scriptPath);panel.webview.html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>詳情</title></head><body><div id="loading">頁面初始化中...</div><div id="root"></div><script src=${scriptUri}></script></body></html>`}
)
webview內(nèi)容，實現(xiàn)方式可以多種，這里scriptUri 直接寫路徑，是不生效的，詳情可以看官方文檔。
3、消息傳遞
這里實現(xiàn)了，熱搜，點擊事件以及打開了webview窗口，那么數(shù)據(jù)如何在webview傳遞，這里因為直接調(diào)的微博的接口，所以在webview中，是調(diào)不通的，所以調(diào)接口查數(shù)據(jù)的過程在vscode擴(kuò)展這邊實現(xiàn)
這里第一個問題是熱搜的詳細(xì)內(nèi)容，是需要登錄的，所以這里需要一個cookie，cookie的獲取，也比較簡單，隨便找一個接口，就能查詢到
第二個問題是詳細(xì)內(nèi)容，并不是通過調(diào)xhr接口返回的，需要自行去解析dom結(jié)構(gòu)，來獲取自己需要的內(nèi)容。
1、消息的傳遞，vscode擴(kuò)展傳遞到webview，可以通過postMessage
panel.webview.postMessage({command,text
});
2、webview中可以通過 window.addEventListener監(jiān)聽消息
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監(jiān)聽
panel.webview.onDidReceiveMessage((message) => {if (message.command === "pageUp") {getHotDetail();}
});
這里在給webview.html賦值之后，可以調(diào)接口拿到微博內(nèi)容，通過上述方式傳到webview中，webview中只需要展示即可。其他的上一頁，下一頁，刷新，也可以通過相同方式實現(xiàn)。
最后完成情況如下
4、配置
上述只簡單概述插件功能，配置方面，這里增加了cookie的配置，以及熱搜的刷新間隔。
后續(xù)可以考慮評論、點贊等功能實現(xiàn)。