背景
有没有觉得在微信开发工具里面添加一些插件可以很方便。因为微信IDE的编辑本身是依赖vscode开发,所以编写vscode插件自然可以在微信IDE使用。这样做好处就是可以满足到自己一些开发使用习惯。
1.获取插件的目录位置
那么如何获取插件里面的目录,并且打开它。代码似乎不复杂,只不过在找资料的时候,发现找了很久才知道这个方法context.extensionPath。
我们目的是拿到这个目录,并且实现打开它。首先需要知道对应文件夹的位置。利用上下文获取。看如下代码
async function openFile(context){
const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'code.md'));
const doc1 = await vscode.workspace.openTextDocument(fileUri );
await vscode.window.showTextDocument( doc1, vscode.ViewColumn.Two,true);
}
通过这个方式组装获取对应插件扩展位置context.extensionPath。在activate 激活后,传递了context 就可以通过它拿到对应位置了。
const vscode = require('vscode');
const path = require('path');
function activate(context) {
let disposable = vscode.commands.registerCommand('extension.opendfile', function () {
openFile(context);//传递上下文
});
context.subscriptions.push(disposable);
}
拿到插件文件夹目录,组装一个Uri对象提供文档方法openTextDocument打开。最后展示对应IDE里面。
const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'code.md'));
这个小小的功能,可以可以满足到一些日常小抄的代码片段的过程。只要满足日常使用,在编码过程就可以随时打开对应笔记使用。并且记录下,形成沉淀了。
2 IDE右键打开一个网页
上述方法很容易。同理我们如果打开一个网页,那样如何弄?
async function openFile(context){
const panel = vscode.window.createWebviewPanel(
'Test',
'Test Code',
vscode.ViewColumn.One,
);
const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'index.html'));
const doc1 = await vscode.workspace.openTextDocument(fileUri );
panel.webview.html = doc1.getText();//读取对应html文件
}
用这个方法,微信IDE上就可以打开对应插件index.html 网页了。里面网页可以作为IDE 一部分使用。
利用上述功能在微信IDE就可以愉快玩耍了。添加一些小插件帮助我们编码了。
文章评论