vscode中怎么進行微信小程序的發布？下面本篇文章給大家分享一下方法，希望對大家有所幫助！
開發當中我們會經常碰到很多覺得麻煩的事情，一些流程又臭又長，像老太太裹腳布一樣的步驟。比如我們親愛的小程序，那流程那步驟讓我的 Mac 13 寸丐中丐版很是蛋疼。每次都得打開 N 多東西才能發布到預覽。藍瘦，真是個磨人的小妖精。
分析和拆解
關于 vscode 插件開發基礎教程請移步官方文檔，這里就不過多贅述了，這邊我們只把重心放到去實現小程序自動構建發布關鍵點的實現上。
由于我們使用的是 uni-app 作為多端統一的方向，所以在每次開發或者提測小程序需要發到預覽版上的時候都需要經歷如下步驟：
ok，既然都已經大致理清楚流程了，那么擁有程序員嚴謹態度的我們，分析分析整個過程中需要用到的哪些能力？接下來我們只對每個環節關鍵的部分做一些分析和拆解，不做全盤 Vscode 插件代碼的結構和代碼分析。
- 前置工作
- 選擇構建分支，版本并填寫描述
- Vscode 插件 window 能力 – 輸入描述，下拉框選擇
- Git 能力 – 拉取分支
- 臨時保存當前分支修改
- Git 能力 – 保存當前分支
- 切換到目標分支
- Git 能力- 切換分支
- 選擇構建分支，版本并填寫描述
- 本地構建
- 自動生成版本號
- 微信開發平臺 api 能力- 獲取當前 AppID 最近模板列表
- 注入目標小程序 AppID
- Shell 調用能力- 修改文件內容注入 AppID
- 運行 uni-app 構建命令
- Shell 調用能力 – 執行構建命令
- 撤銷發布臨時修改文件
- Git 調用能力- 使用 Git 來撤銷修改文件
- 自動生成版本號
- 部署小程序
- 上傳云端草稿箱
- 微信開發工具調用能力
- 移動到模板庫
- 微信開發平臺 api 能力
- 部署預覽版
- Dubbo 能力 – 由于后端已經存在微信開發平臺 accessToken 能力，直接調用獲取
- 上傳云端草稿箱
Vscode 插件的 window 能力是默認就帶的不需要實現，所以就 Shell 調用，Git 調用，Dubbo調用，微信開發平臺 api 調用，微信開發工具調用需要實現。
再歸歸類，其實 Git 調用，和微信開發工具調用都是命令行調用也就是 Shell 調用，微信開發平臺 api 調用其實本質就是 http 請求，但是里面最最重要的 accessKey 呢是直接調用政采云后端 Dubbo 接口獲取，所以才需要 Dubbo。下面看看大致怎么去做呢？
Shell 的調用
聽到 Shell 菊花一緊，不熟悉的人覺得天哪很復雜的樣子，其實就是使用 child_process 去開一個子進程，然后你就快樂的玩耍吧。所以我們在項目中封裝了一個 shell.ts 來做所有 Shell ?腳本的執行動作。 請移步官方文檔
//?shell.ts?部分核心代碼 import?{?execFile,?ExecFileOptions?}?from?"child_process"; export?namespace?Shell?{ ??//?在?shell?中直接調用?git?的執行文件執行原始命令 ??export?async?function?exec<tout>( ????args:?any[], ????options:?ExecFileOptions?=?{} ??):?Promise<tout>?{ ????const?{?stdin,?stdinEncoding,?execFileNameOrPath,?...opts?}:?any?=?{ ??????maxBuffer:?100?*?1024?*?1024, ??????...options, ????}; ????return?new?Promise<tout>((resolve,?reject)?=>?{ ??????if?(!execFileNameOrPath)?{?reject('error');?} ??????try?{ ????????const?proc?=?execFile( ??????????execFileNameOrPath, ??????????args, ??????????opts, ??????????(error:?any?|?null,?stdout,?stderr)?=>?{ ????????????if?(error?!=?null)?{ ??????????????reject(error); ??????????????return; ????????????} ????????????resolve( ??????????????stdout?as?TOut ????????????); ??????????} ????????); ????????if?(stdin?!==?null)?{ ??????????proc.stdin?.end(stdin,?stdinEncoding????"utf8"); ????????} ??????} ??????catch?(e)?{ ????????return ??????} ????}); ??} }</tout></tout></tout>
然后就可以通過 Shell.exec 方法傳入參數就能直接調用了
Git 的調用
有了上一個 Shell 作為基礎我們就可以開干 Git 的調用了，在 Shell 中第一個參數是命令的執行文件，所以我們需要得到當前的 Git 的執行文件的地址作為第一個參數，后面其實就是正常的 Git 命令的拼接就夠了。那么怎么知道當前 Git ?的執行文件路徑呢？
通過 Vscode 插件中集成的 Git 能力去得到 extensions.getExtension(“vscode.git”)，如下方式
//?獲取?Vscode?內置的?Git?Api ??static?async?getBuiltInGitApi():?Promise<builtingitapi>?{ ????try?{ ??????const?extension?=?extensions.getExtension("vscode.git")?as?Extension; ??????if?(extension?!==?null)?{ ????????const?gitExtension?=?extension.isActive ????????????extension.exports ??????????:?await?extension.activate(); ????????return?gitExtension.getAPI(1); ??????} ????}?catch?{} ????return?undefined; ??}</builtingitapi>
在返回的對象中 gitApi.git.path ? 就是 Git 的執行文件路徑。為了更加方便的調用，我們也封裝了一個 git.ts 作為 Git 最最核心最最基礎的調用
//git.ts?的部分核心代碼 export?namespace?Git?{ ??export?namespace?Core?{ ????//?在?shell?中直接調用??git?的執行文件執行原始命令 ????export?async?function?exec<tout>( ??????args:?any[], ??????options:?GitExecOptions?=?{} ????):?Promise<tout>?{ ??????options.execFileNameOrPath?=?gitInfo.execPath?||?""; ??????args.splice(0,?0,?"-c",?"core.quotepath=false",?"-c",?"color.ui=false"); ??????if?(process.platform?===?"win32")?{ ????????args.splice(0,?0,?"-c",?"core.longpaths=true"); ??????} ??????return?Shell.exec(args,?options); ????} }</tout></tout>
在外部我們直接用 Git.Core.exec 方法直接執行對應的 Git 命令
微信開發工具調用
首選我們要先檢查開發者工具設置：需要在開發者工具的設置 -> 安全設置中開啟服務端口。這樣我們才能直接喚起開發者然后做些我們要做的事情。
再者我們需要知道微信開發者工具的執行文件地址。 請移步官方文檔
macOS: /Contents/MacOS/cli
windows: /cli.bat
正常來說 Mac 地址 /Applications/wechatwebdevtools.app/Contents/MacOS/cli
最后通過我們以前提供的 Shell 命令能力去執行就搞定了。是不是很簡單。我們也封裝了miniProgram.ts 來做這個事情
//miniProgram.ts?核心代碼 import?{?ExecFileOptions?}?from?"child_process"; import?*?as?vscode?from?"vscode"; import?{?Shell?}?from?'../shell'; interface?MiniProgramExecOptions?extends?ExecFileOptions?{ ??branchName:?string; ??execFileNameOrPath:?string; ??projectPath:?string, ??userVersion:?string, ??userDesc:?string } export?namespace?MiniProgram?{ ??export?namespace?Core?{ ????//?在?shell?中直接調用?git?的執行文件執行原始命令 ????export?async?function?exec<tout>( ??????args:?any[], ??????options:?MiniProgramExecOptions ????):?Promise<tout>?{ ??????vscode; ??????options.execFileNameOrPath?=?"/Applications/wechatwebdevtools.app/Contents/MacOS/cli"; ??????return?Shell.exec(args,?options); ????} ??} }</tout></tout>
Duddo 的調用
不明覺厲，都直接調 Dubbo 了吊的不行，其實很簡單，有一個 nodeJs 的庫 node-zookeeper-dubbo 再配合 js-to-java 這兩個庫就能搞定，只不過一些配置比較麻煩，我就把代碼大致的貼出來
const?nzd?=?require("node-zookeeper-dubbo"); const?j2j?=?require("js-to-java"); export?interface?DubboInstance?{ ??mp:?{ ????getComponentToken:?Function; ??}; } export?class?DubboService?{ ??private?_dubbo:?DubboInstance; ??public?get?dubbo():?DubboInstance?{ ????return?this._dubbo; ??} ??constructor()?{ ????const?options?=?{ ??????application:?"你的項目名稱",?//項目名稱 ??????register:?"你的服務器地址",?//?zookeeper?服務器地址，多個服務器之間使用逗號分割?? ??????dubboVer:?"你的版本",?//dubbo?的版本，詢問后端得知是2.3.5 ??????root:?'你的根節點',?//注冊到?zookeeper?上的根節點名稱 ??????dependencies:?{ ????????//依賴的?dubbo?服務集,也就是你要調用的服務的配置集合 ????????mp:?{ ??????????//服務的標識，自定義的，按自己喜好 ??????????interface:?"你的后端?dubbo?服務地址",?//后端?dubbo?服務地址 ??????????version:?"你的服務版本號",?//服務版本號 ??????????timeout:?"30000",?//超時時間 ??????????group:?'你的分組',?//分組的功能也沒有使用 ??????????methodSignature:?{ ????????????//服務里暴露的方法的簽名，可以省略 ????????????getComponentToken:?()?=>?()?=>?[], ??????????}, ????????}, ??????}, ??????java:?j2j,?//使用?js-to-java?庫來簡化傳遞給?java??后端的值的寫法 ????}; ????this._dubbo?=?new?nzd(options); ??} }
至此一些基本能力已經封裝的差不多了
Shell：Shell.exec 方法
Git：Git.Core.exec 方法
微信開發工具： MiniProgram.Core.exec 方法
Dubbo: DobboService.dubbo.mp 方法
搞起
前置工作
因為我們要構建一個預發版，所以很有可能我們需要構建的分支不是我們當前工作的分支，所以這步驟的話更多的是要做好一些構建前的一些準備工作，總不能因為人家測試要一個預覽測試版然后一不小心把我們自己本地的辛辛苦苦開發的東西弄沒了吧，那真的是 f**k 了。
根據流程我們先來分解下大致的技術動作
- 臨時保存當前分支修改
- 獲取當前分支。
- 如果是在當前分支啥都不管，否則 stash 下
- 切換到需要發布分支
- 切換下分支
再精簡下： 獲取當前分支 —> 保存修改 –> 切換分支。 都是 Git 的一些動作。那么在 nodeJs 中怎么開始自己的 Git 表演呢？一個關鍵點：Shell 腳本和命令的調用，所以這里的本質是調用 Shell。我們在上個章節中已經實現的 Shell 和 Git 的基本能力了，我們直接調用就行了。
使用 symbolic-ref ?獲取當前分支
其實 Git 的命令分為兩種
- 高層命令（porcelain commands）
- 底層命令（plumbing commands）
常用的命令大家都很熟悉了，什么 branch 啊， init 啊，add 啊，commit 啊等等。底層命令又是什么鬼，其實所有的高層命令的本質都是會調用底層命令，可以類比為語言層面 Java，C#，Js 這些高級語言他的底層是使用 C 或者 C++ 是一個概念。 請移步官方文檔
symbolic-ref 命令能干嘛呢？
給定一個參數，讀取哪個分支頭部給定的符號 ref 引用并輸出其相對于 .git/ 目錄的路徑。通常，HEAD 以 ?參數的形式提供您的工作樹所在的分支。
有了上面 git.ts 支持基本能力那么現在我們就很簡單多了，Git.Core.exec
在 git.ts 中增加基本命令方法
//?git.ts?部分代碼 export?function?symbolicRef(options:?GitExecOptions?=?{})?{ ?????return?Core.exec<string>(["symbolic-ref",?"--short",?"HEAD"],?options); }</string>
在 gitService 中實現 getCurrentBranch 方法
//?gitService.ts?部分代碼 public?async?getCurrentBranch(filePath:?string):?Promise<string>?{ ????const?branchName?=?await?Git.Cmd.symbolicRef({?cwd:?filePath?}); ????return?branchName.replace(/n/g,?""); }</string>
保存修改和切換分支
當我們獲取到當前分支之后，和我們目標分支進行比對如果一致的話直接跳過該步驟，否則就需要對當前分支保存并且切換了。
為了方便對于保存和切換我們直接用了Git 的 stash 和 checkout 命令，并且封裝了兩個方法。
//?git.ts?部分代碼 export?function?checkout(options:?GitExecOptions?=?{})?{ ??????const?params?=?[ ????????"checkout" ??????]; ??????if?(options.branchName)?{ ????????params.push(options.branchName); ??????}else?if(options.fileName){ ????????params.push('--',options.fileName); ??????} ??????return?Core.exec<string>(params,?options); ????} ???? ????export?function?stash(options:?GitExecOptions?=?{})?{ ??????const?params?=?[ ????????"stash" ??????]; ??????if?(options.stashPop)?{ ????????params.push('pop'); ??????} ??????return?Core.exec<string>(params,?options); ????}</string></string>
本地構建
繼續分析下本地構建的基本流程
大致分以下幾步
- 自動生成版本號
- 得到當前 AppID 在微信模板庫中版本號情況
- 注入需要發布的小程序 AppID
- 需要修改 src/manifest.json 文件中 AppID，方便開發工具上傳使用
- 運行 uni-app 構建命令
- run uniapp 命令
- 撤銷發布時候的臨時文件修改
- 撤銷文件修改
能力上來說有那么幾個
-
微信 api 調用
-
文件讀取和修改能力
-
Shell 命令執行能力
-
撤銷文件修改能力
首先怎么調用微信的 api，由于那時候我們親愛的后端同學啃次啃次的已經吧微信 token 鑒權的能力已經做掉了，所以我們直接接后端的微信鑒權能力就可以了。但是怎么接又是個問題，雖然人家已經有個 restful 接口可以用，但是接口都要登錄的啊，讓人家為了我這個小小的需求弄個匿名的不大現實也不安全，想來想去那就不要用 restful 了，直接調他后面提供的 Dobbo 服務好了，完美。
獲取微信 accessToken
在獲取微信 api 調用前我們需要先得到 accessToken。
所以我們會先用一個公共方法先去獲取當前 accessToken， 然后在去請求微信開發平臺 api。
//?miniProgramService.ts?部分代碼?? ??public?async?retrieveWxToken():?Promise<string>?{ ????if?(!Launcher.dobboService.dubbo.mp)?{ ??????throw?new?Error("dubbo初始化錯誤"); ????} ????const?{ ??????success:?dobboSuccess, ??????error, ??????result:?wxToken, ????}?=?await?Launcher.dobboService.dubbo.mp.getComponentToken(); ????if?(!dobboSuccess)?{ ??????throw?new?Error(`dubbo調用失敗:${error}`); ????} ????console.log("wxToken:",?wxToken); ????return?wxToken; ??}</string>
如果你們的后端沒有支持微信開發平臺的鑒權能力的話就需要自己用 nodejs 方式去實現了，具體的微信開放平臺文案請移步
微信開放平臺 api 調用
其實微信開放平臺 api 調用就是正常的 http 調用即可。
微信提供了一系列方法，對于我們這次的場景來說有如下接口
-
getTemplateList 獲取模板列表
-
POST?https://api.weixin.qq.com/wxa/gettemplatelist?access_token==ACCESS_TOKEN
-
-
addtotemplate 移動草稿到模板庫
-
POST?https://api.weixin.qq.com/wxa/gettemplatelist?access_token=ACCESS_TOKEN
-
-
deleteTemplate 刪除指定模板
-
POST?https://api.weixin.qq.com/wxa/deletetemplate?access_token=ACCESS_TOKEN
-
-
getTemplateDraftList 獲取草稿箱列表
-
https://api.weixin.qq.com/wxa/gettemplatedraftlist?access_token=ACCESS_TOKEN
-
版本號的自動生成主要是通過在你點擊發布時候通過讓用戶選擇發布的版本為“大版本”，“功能迭代”還是“補丁修復”，在結合這里提到的獲取當前模板列表并用 AppID 找到當前最近的版本號再做自動計算累加的方式得到這次發布的版本號。
構建小程序
構建小程序這邊就直接沿用 uni-app 的能力直接做構建。封裝了如下方法去構建小程序
//miniProgramService.ts?部分代碼 public?async?buildMPForLocal(env:?string):?Promise<string>?{ ????let?buildEnv; ????switch?(env.toUpperCase())?{ ??????case?"PROD": ????????buildEnv?=?EnvEnum.prod; ????????break; ??????case?"STAGING": ????????buildEnv?=?EnvEnum.staging; ????????break; ??????case?"TEST": ????????buildEnv?=?EnvEnum.test; ????????break; ??????default: ????????buildEnv?=?EnvEnum.dev; ????????break; ????} ????const?args?=?`./node_modules/.bin/cross-env?NODE_ENV=production?DEPLOY_ENV=${buildEnv}?UNI_PLATFORM=mp-weixin?./node_modules/.bin/vue-cli-service?uni-build`.split('?'); ????//正常需要這樣傳入?shell?參數才行 ????//[ ????//?'NODE_ENV=production', ????//?'DEPLOY_ENV=staging', ????//?'UNI_PLATFORM=mp-weixin', ????//?'./node_modules/.bin/vue-cli-service', ????//?'uni-build' ????//] ????const?options:?MPExecOptions?=?{ ??????execFileNameOrPath:?'node', ??????cwd:?getWorkspacePath() ????}; ????return?Shell.exec(args,?options); ??}</string>
其余的功能
- 剩余文件讀取就正常使用 fs 庫的 readFileSync 方法去讀取和修改
- 撤銷修改文件則是通過調用 Git 的 checkout 命令的能力去做，也是要使用上一章節的 Git 的基本能力調用
部署小程序
我們 build 完成了，怎么上傳呢？微信小程序這塊還是需要借助微信開發工具的能力來上傳
微信開發工具上傳
首選我們要先檢查開發者工具設置：需要在開發者工具的設置 -> 安全設置中開啟服務端口。這樣我們才能直接喚起開發者然后做些我們要做的事情。
再者我們需要知道微信開發者工具的執行文件地址。正常來說 Mac 地址
/Applications/wechatwebdevtools.app/Contents/MacOS/cli
最后通過我們以前提供的 Shell 命令能力去執行就搞定了。是不是很簡單。我們也封裝了miniProgram.ts 來做這個事情
//?miniProgram.ts?核心代碼 export?namespace?Cmd?{ ????export?function?uploadMP(options:?MiniProgramExecOptions)?{ ??????const?args?=?[ ????????'upload', ????????'--project', ????????options.projectPath, ????????'-v', ????????options.userVersion, ????????'-d', ????????options.userDesc, ??????]; ??????return?Core.exec<string>(args,?options); ????} ??} }</string>
其余的功能
- 移動到模板庫和部署預覽版直接調用微信開放平臺 api 即可
效果預覽圖：
尾聲
至此整個小程序部署的在 Vscode 插件中實現的幾個關鍵的技術點已經逐一做了簡要的說明，大家會不會覺得其實看下來不難，就是涉及的東西會比較多。其實還有其他的諸如整個構建流程步驟如何可視化，Vscode 插件里面的一些基礎的能力等等在本文都沒有詳細提及。歡迎大家留言或者提問把自己想要知道的問題反饋給我們，也方便我們可以針對大家的問題再去做一篇更棒的關于 Vscode 插件開發的文章。
其實 Vscode 插件在整個開發提效場景中只是當中的一個環節，我們會以敦煌工作臺為核心底座搭配 Chrome 插件，Vscode 插件，zoo-cli 形成一個開發提效的百寶箱。Vscode 插件更多的是想給開發者們帶來沉浸式開發的體驗。
原文地址：https://juejin.cn/post/7000138685274390542#heading-6
更多編程相關知識，請訪問：請移步官方文檔！！
