溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹vscode中如何進行微信小程序的發(fā)布，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
ok，既然都已經(jīng)大致理清楚流程了，那么擁有程序員嚴謹態(tài)度的我們，分析分析整個過程中需要用到的哪些能力？接下來我們只對每個環(huán)節(jié)關鍵的部分做一些分析和拆解，不做全盤 Vscode 插件代碼的結構和代碼分析。
前置工作
Git 能力- 切換分支
Git 能力 - 保存當前分支
Vscode 插件 window 能力 - 輸入描述，下拉框選擇
Git 能力 - 拉取分支
選擇構建分支，版本并填寫描述
臨時保存當前分支修改
切換到目標分支
本地構建
Git 調(diào)用能力- 使用 Git 來撤銷修改文件
Shell 調(diào)用能力 - 執(zhí)行構建命令
Shell 調(diào)用能力- 修改文件內(nèi)容注入 AppID
微信開發(fā)平臺 api 能力- 獲取當前 AppID 最近模板列表
自動生成版本號
注入目標小程序 AppID
運行 uni-app 構建命令
撤銷發(fā)布臨時修改文件
部署小程序
Dubbo 能力 - 由于后端已經(jīng)存在微信開發(fā)平臺 accessToken 能力，直接調(diào)用獲取
微信開發(fā)平臺 api 能力
微信開發(fā)工具調(diào)用能力
上傳云端草稿箱
移動到模板庫
部署預覽版
Vscode 插件的 window 能力是默認就帶的不需要實現(xiàn)，所以就 Shell 調(diào)用，Git 調(diào)用，Dubbo調(diào)用，微信開發(fā)平臺 api 調(diào)用，微信開發(fā)工具調(diào)用需要實現(xiàn)。
再歸歸類，其實 Git 調(diào)用，和微信開發(fā)工具調(diào)用都是命令行調(diào)用也就是 Shell 調(diào)用，微信開發(fā)平臺 api 調(diào)用其實本質(zhì)就是 http 請求，但是里面最最重要的 accessKey 呢是直接調(diào)用政采云后端 Dubbo 接口獲取，所以才需要 Dubbo。下面看看大致怎么去做呢？
聽到 Shell 菊花一緊，不熟悉的人覺得天哪很復雜的樣子，其實就是使用 child_process 去開一個子進程，然后你就快樂的玩耍吧。所以我們在項目中封裝了一個 shell.ts 來做所有 Shell 腳本的執(zhí)行動作。 不熟悉child_process的請移步這里
// shell.ts 部分核心代碼
import { execFile, ExecFileOptions } from "child_process";
export namespace Shell {
// 在 shell 中直接調(diào)用 git 的執(zhí)行文件執(zhí)行原始命令
export async function exec<TOut extends string | Buffer>(
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
}
});
}
}然后就可以通過 Shell.exec 方法傳入?yún)?shù)就能直接調(diào)用了
有了上一個 Shell 作為基礎我們就可以開干 Git 的調(diào)用了，在 Shell 中第一個參數(shù)是命令的執(zhí)行文件，所以我們需要得到當前的 Git 的執(zhí)行文件的地址作為第一個參數(shù)，后面其實就是正常的 Git 命令的拼接就夠了。那么怎么知道當前 Git 的執(zhí)行文件路徑呢？
通過 Vscode 插件中集成的 Git 能力去得到 extensions.getExtension("vscode.git")，如下方式
// 獲取 Vscode 內(nèi)置的 Git Api
static async getBuiltInGitApi(): Promise<BuiltInGitApi | undefined> {
try {
const extension = extensions.getExtension("vscode.git") as Extension<
GitExtension
>;
if (extension !== null) {
const gitExtension = extension.isActive
? extension.exports
: await extension.activate();
return gitExtension.getAPI(1);
}
} catch {}
return undefined;
}在返回的對象中 gitApi.git.path 就是 Git 的執(zhí)行文件路徑。為了更加方便的調(diào)用，我們也封裝了一個 git.ts 作為 Git 最最核心最最基礎的調(diào)用
//git.ts 的部分核心代碼
export namespace Git {
export namespace Core {
// 在 shell 中直接調(diào)用 git 的執(zhí)行文件執(zhí)行原始命令
export async function exec<TOut extends string | Buffer>(
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);
}
}在外部我們直接用 Git.Core.exec 方法直接執(zhí)行對應的 Git 命令
首選我們要先檢查開發(fā)者工具設置：需要在開發(fā)者工具的設置 -> 安全設置中開啟服務端口。這樣我們才能直接喚起開發(fā)者然后做些我們要做的事情。
再者我們需要知道微信開發(fā)者工具的執(zhí)行文件地址。 詳細請移步文檔
macOS: <安裝路徑>/Contents/MacOS/cli
windows: <安裝路徑>/cli.bat
正常來說 Mac 地址 /Applications/wechatwebdevtools.app/Contents/MacOS/cli
最后通過我們以前提供的 Shell 命令能力去執(zhí)行就搞定了。是不是很簡單。我們也封裝了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 中直接調(diào)用 git 的執(zhí)行文件執(zhí)行原始命令
export async function exec<TOut extends string | Buffer>(
args: any[],
options: MiniProgramExecOptions
): Promise<TOut> {
vscode;
options.execFileNameOrPath = "/Applications/wechatwebdevtools.app/Contents/MacOS/cli";
return Shell.exec(args, options);
}
}
}不明覺厲，都直接調(diào) 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: '你的根節(jié)點', //注冊到 zookeeper 上的根節(jié)點名稱
dependencies: {
//依賴的 dubbo 服務集,也就是你要調(diào)用的服務的配置集合
mp: {
//服務的標識，自定義的，按自己喜好
interface: "你的后端 dubbo 服務地址", //后端 dubbo 服務地址
version: "你的服務版本號", //服務版本號
timeout: "30000", //超時時間
group: '你的分組', //分組的功能也沒有使用
methodSignature: {
//服務里暴露的方法的簽名，可以省略
getComponentToken: () => () => [],
},
},
},
java: j2j, //使用 js-to-java 庫來簡化傳遞給 java 后端的值的寫法
};
this._dubbo = new nzd(options);
}
}至此一些基本能力已經(jīng)封裝的差不多了
Shell：Shell.exec 方法
Git：Git.Core.exec 方法
微信開發(fā)工具： MiniProgram.Core.exec 方法
Dubbo: DobboService.dubbo.mp 方法
因為我們要構建一個預發(fā)版，所以很有可能我們需要構建的分支不是我們當前工作的分支，所以這步驟的話更多的是要做好一些構建前的一些準備工作，總不能因為人家測試要一個預覽測試版然后一不小心把我們自己本地的辛辛苦苦開發(fā)的東西弄沒了吧，那真的是 f**k 了。
根據(jù)流程我們先來分解下大致的技術動作
臨時保存當前分支修改
獲取當前分支。
如果是在當前分支啥都不管，否則 stash 下
切換到需要發(fā)布分支
切換下分支
再精簡下： 獲取當前分支 ---> 保存修改 --> 切換分支。 都是 Git 的一些動作。那么在 nodeJs 中怎么開始自己的 Git 表演呢？一個關鍵點：Shell 腳本和命令的調(diào)用，所以這里的本質(zhì)是調(diào)用 Shell。我們在上個章節(jié)中已經(jīng)實現(xiàn)的 Shell 和 Git 的基本能力了，我們直接調(diào)用就行了。
其實 Git 的命令分為兩種
高層命令（porcelain commands）
底層命令（plumbing commands）
常用的命令大家都很熟悉了，什么 branch 啊， init 啊，add 啊，commit 啊等等。底層命令又是什么鬼，其實所有的高層命令的本質(zhì)都是會調(diào)用底層命令，可以類比為語言層面 Java，C#，Js 這些高級語言他的底層是使用 C 或者 C++ 是一個概念。 有興趣請移步
symbolic-ref 命令能干嘛呢？
給定一個參數(shù)，讀取哪個分支頭部給定的符號 ref 引用并輸出其相對于 .git/ 目錄的路徑。通常，HEAD 以 參數(shù)的形式提供您的工作樹所在的分支。
有了上面 git.ts 支持基本能力那么現(xiàn)在我們就很簡單多了，Git.Core.exec<string>(["symbolic-ref", "--short", "HEAD"], options);
在 git.ts 中增加基本命令方法
// git.ts 部分代碼
export function symbolicRef(options: GitExecOptions = {}) {
return Core.exec<string>(["symbolic-ref", "--short", "HEAD"], options);
}在 gitService 中實現(xiàn) getCurrentBranch 方法
// gitService.ts 部分代碼
public async getCurrentBranch(filePath: string): Promise<string> {
const branchName = await Git.Cmd.symbolicRef({ cwd: filePath });
return branchName.replace(/\n/g, "");
}當我們獲取到當前分支之后，和我們目標分支進行比對如果一致的話直接跳過該步驟，否則就需要對當前分支保存并且切換了。
為了方便對于保存和切換我們直接用了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);
}繼續(xù)分析下本地構建的基本流程
大致分以下幾步
自動生成版本號
得到當前 AppID 在微信模板庫中版本號情況
注入需要發(fā)布的小程序 AppID
需要修改 src/manifest.json 文件中 AppID，方便開發(fā)工具上傳使用
運行 uni-app 構建命令
run uniapp 命令
撤銷發(fā)布時候的臨時文件修改
撤銷文件修改
能力上來說有那么幾個
微信 api 調(diào)用
文件讀取和修改能力
Shell 命令執(zhí)行能力
撤銷文件修改能力
首先怎么調(diào)用微信的 api，由于那時候我們親愛的后端同學啃次啃次的已經(jīng)吧微信 token 鑒權的能力已經(jīng)做掉了，所以我們直接接后端的微信鑒權能力就可以了。但是怎么接又是個問題，雖然人家已經(jīng)有個 restful 接口可以用，但是接口都要登錄的啊，讓人家為了我這個小小的需求弄個匿名的不大現(xiàn)實也不安全，想來想去那就不要用 restful 了，直接調(diào)他后面提供的 Dobbo 服務好了，完美。
在獲取微信 api 調(diào)用前我們需要先得到 accessToken。
所以我們會先用一個公共方法先去獲取當前 accessToken， 然后在去請求微信開發(fā)平臺 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調(diào)用失敗:${error}`);
}
console.log("wxToken:", wxToken);
return wxToken;
}如果你們的后端沒有支持微信開發(fā)平臺的鑒權能力的話就需要自己用 nodejs 方式去實現(xiàn)了，具體的微信開放平臺文案請移步
其實微信開放平臺 api 調(diào)用就是正常的 http 調(diào)用即可。
微信提供了一系列方法，對于我們這次的場景來說有如下接口
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
具體的微信開放平臺文案請移步
版本號的自動生成主要是通過在你點擊發(fā)布時候通過讓用戶選擇發(fā)布的版本為“大版本”，“功能迭代”還是“補丁修復”，在結合這里提到的獲取當前模板列表并用 AppID 找到當前最近的版本號再做自動計算累加的方式得到這次發(fā)布的版本號。
構建小程序這邊就直接沿用 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 參數(shù)才行
//[
// '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);
}其余的功能
剩余文件讀取就正常使用 fs 庫的 readFileSync 方法去讀取和修改
撤銷修改文件則是通過調(diào)用 Git 的 checkout 命令的能力去做，也是要使用上一章節(jié)的 Git 的基本能力調(diào)用
我們 build 完成了，怎么上傳呢？微信小程序這塊還是需要借助微信開發(fā)工具的能力來上傳
首選我們要先檢查開發(fā)者工具設置：需要在開發(fā)者工具的設置 -> 安全設置中開啟服務端口。這樣我們才能直接喚起開發(fā)者然后做些我們要做的事情。
再者我們需要知道微信開發(fā)者工具的執(zhí)行文件地址。正常來說 Mac 地址
/Applications/wechatwebdevtools.app/Contents/MacOS/cli
最后通過我們以前提供的 Shell 命令能力去執(zhí)行就搞定了。是不是很簡單。我們也封裝了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);
}
}
}其余的功能
移動到模板庫和部署預覽版直接調(diào)用微信開放平臺 api 即可
效果預覽圖：
至此整個小程序部署的在 Vscode 插件中實現(xiàn)的幾個關鍵的技術點已經(jīng)逐一做了簡要的說明，大家會不會覺得其實看下來不難，就是涉及的東西會比較多。其實還有其他的諸如整個構建流程步驟如何可視化，Vscode 插件里面的一些基礎的能力等等在本文都沒有詳細提及。
其實 Vscode 插件在整個開發(fā)提效場景中只是當中的一個環(huán)節(jié)，我們會以敦煌工作臺為核心底座搭配 Chrome 插件，Vscode 插件，zoo-cli 形成一個開發(fā)提效的百寶箱。Vscode 插件更多的是想給開發(fā)者們帶來沉浸式開發(fā)的體驗。
關于vscode中如何進行微信小程序的發(fā)布就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
