Bagaimana untuk menerbitkan applet WeChat dalam vscode? Artikel berikut akan berkongsi dengan anda kaedah, saya harap ia akan membantu anda!

Semasa pembangunan, kita sering menghadapi banyak perkara yang menyusahkan Sesetengah proses berbau dan panjang, seperti langkah kaki wanita tua. Sebagai contoh, program kecil kami, proses dan langkahnya menjadikan Mac 13-inci Beggar's Edition saya sangat menyakitkan. Anda perlu membuka N banyak perkara setiap kali sebelum anda boleh menerbitkan untuk pratonton. Lan Shou adalah jembalang kecil yang menjengkelkan.

Analisis dan pembongkaran

Mengenai tutorial asas tentang pembangunan pemalam VscodeSila pergi ke dokumentasi rasmi, saya menang' t pergi ke butiran di sini kami hanya menumpukan pada merealisasikan perkara utama pembinaan automatik dan pelepasan program kecil.

Memandangkan kami menggunakan uni-app sebagai arah bersatu untuk berbilang terminal, setiap kali kami membangunkan atau menguji program kecil dan perlu menghantarnya ke versi pratonton, kami perlu melalui langkah berikut :

ok, sekarang proses itu telah dijelaskan secara kasar, marilah kita, yang mempunyai sikap pengaturcara yang ketat, menganalisis apakah kebolehan yang diperlukan dalam keseluruhan proses? Seterusnya, kami hanya akan melakukan beberapa analisis dan pembongkaran bahagian utama setiap pautan, dan tidak akan melakukan analisis struktur dan kod lengkap kod pemalam Vscode.

1. Pra-kerja
   • Pilih cawangan binaan, versi dan isikan keterangan
     • Keupayaan tetingkap pemalam Vscode - masukkan penerangan dan pilih drop- kotak bawah
     • Keupayaan Git - tarik cawangan
   • simpan sementara pengubahsuaian cawangan semasa
     • Keupayaan Git - simpan cawangan semasa
   • beralih kepada cawangan sasaran
     • Keupayaan Git - tukar cawangan
2. Binaan tempatan
   • Jana nombor versi secara automatik
     • Keupayaan api platform pembangunan WeChat - Dapatkan senarai templat terkini AppID semasa
   • Suntikan applet sasaran AppID
     • Keupayaan memanggil Shell - Ubah suai kandungan fail dan suntikan AppID
   • Jalankan arahan binaan uni-app
     • Keupayaan memanggil Shell-laksanakan arahan binaan
   • Buat asal penerbitan sementara fail yang diubah suai
     • Keupayaan memanggil Git- gunakan Git untuk membuat asal fail yang diubah suai
3. Letakkan program mini
   • Muat naik kotak draf awan
     • Keupayaan memanggil alat pembangunan WeChat
   • Berpindah ke perpustakaan templat
     • Keupayaan api platform pembangunan WeChat
   • Pengerahan versi pratonton
     • Keupayaan Dubbo - kerana siaran Keupayaan accessToken platform pembangunan WeChat sudah wujud pada pelanggan Terus hubungi untuk mendapatkan

.

Keupayaan tetingkap pemalam Vscode disediakan secara lalai dan tidak perlu dilaksanakan, jadi Panggilan Shell, panggilan Git, panggilan Dubbo, panggilan API platform pembangunan WeChat dan panggilan alat pembangunan WeChat perlu dilaksanakan.

Pengkelasan semula, sebenarnya, panggilan Git dan panggilan alat pembangunan WeChat ialah panggilan baris arahan, iaitu, panggilan api platform pembangunan WeChat sebenarnya adalah permintaan http, tetapi accessKey yang paling penting ialah Panggilan Terus Zhengcai Cloud. antara muka Dubbo belakang untuk mendapatkannya, jadi Dubbo diperlukan. Mari kita lihat bagaimana untuk melakukannya?

Shell invocation

Apabila anda mendengar Shell, dubur anda mengecut Orang yang tidak biasa dengannya menganggapnya sangat rumit > untuk membuka proses subrutin, dan kemudian anda boleh berseronok. Jadi kami merangkumkan shell.ts dalam projek untuk melaksanakan semua tindakan pelaksanaan skrip Shell. child_processJika anda tidak biasa dengan , sila pergi ke sinichild_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(&#39;error&#39;); }
      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
      }
    });
  }
}

Kemudian anda boleh memasukkan parameter melalui kaedah Shell.exec dan memanggilnya terus

Panggilan Git

Dengan Shell sebelumnya sebagai asas, kita boleh memulakan panggilan Git Parameter pertama dalam Shell ialah fail pelaksanaan perintah, jadi kita perlu mendapatkan Git semasa Alamat fail boleh laku digunakan sebagai parameter pertama, dan yang berikut sebenarnya adalah penyambungan perintah Git biasa. Jadi bagaimana anda mengetahui laluan fail pelaksanaan Git semasa?

Dapatkan

melalui keupayaan Git yang disepadukan dalam pemalam Vscode, seperti berikut 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;
  }

Dalam objek yang dikembalikan,

ialah laluan fail pelaksanaan Git. Untuk panggilan yang lebih mudah, kami juga telah merangkumkan git.ts sebagai panggilan teras dan paling asas bagi Git gitApi.git.path

//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);
    }
}

Secara luaran, kami terus menggunakan kaedah Git.Core.exec untuk melaksanakan arahan Git yang sepadan secara langsung .

Panggilan alat pembangunan WeChat

Mula-mula kita perlu

menyemak tetapan alat pembangun: anda perlu mendayakan perkhidmatan dalam tetapan alat pembangun-> tetapan keselamatan Port . Dengan cara ini kita boleh terus memanggil pembangun dan melakukan apa yang kita mahu lakukan.

再者我們需要知道微信開發(fā)者工具的執(zhí)行文件地址。 詳細(xì)請移步文檔

macOS: <安裝路徑>/Contents/MacOS/cli

windows: <安裝路徑>/cli.bat

正常來說 Mac 地址 /Applications/wechatwebdevtools.app/Contents/MacOS/cli

最后通過我們以前提供的 Shell 命令能力去執(zhí)行就搞定了。是不是很簡單。我們也封裝了miniProgram.ts 來做這個(gè)事情

//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);
    }
  }
}

Duddo 的調(diào)用

不明覺厲，都直接調(diào) Dubbo 了吊的不行，其實(shí)很簡單，有一個(gè) nodeJs 的庫 node-zookeeper-dubbo 再配合 js-to-java 這兩個(gè)庫就能搞定，只不過一些配置比較麻煩，我就把代碼大致的貼出來

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: "你的項(xiàng)目名稱", //項(xiàng)目名稱
      register: "你的服務(wù)器地址", // zookeeper 服務(wù)器地址，多個(gè)服務(wù)器之間使用逗號(hào)分割  
      dubboVer: "你的版本", //dubbo 的版本，詢問后端得知是2.3.5
      root: '你的根節(jié)點(diǎn)', //注冊到 zookeeper 上的根節(jié)點(diǎn)名稱
      dependencies: {
        //依賴的 dubbo 服務(wù)集,也就是你要調(diào)用的服務(wù)的配置集合
        mp: {
          //服務(wù)的標(biāo)識(shí)，自定義的，按自己喜好
          interface: "你的后端 dubbo 服務(wù)地址", //后端 dubbo 服務(wù)地址
          version: "你的服務(wù)版本號(hào)", //服務(wù)版本號(hào)
          timeout: "30000", //超時(shí)時(shí)間
          group: '你的分組', //分組的功能也沒有使用
          methodSignature: {
            //服務(wù)里暴露的方法的簽名，可以省略
            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 方法

搞起

前置工作

因?yàn)槲覀円獦?gòu)建一個(gè)預(yù)發(fā)版，所以很有可能我們需要構(gòu)建的分支不是我們當(dāng)前工作的分支，所以這步驟的話更多的是要做好一些構(gòu)建前的一些準(zhǔn)備工作，總不能因?yàn)槿思覝y試要一個(gè)預(yù)覽測試版然后一不小心把我們自己本地的辛辛苦苦開發(fā)的東西弄沒了吧，那真的是 f**k 了。

根據(jù)流程我們先來分解下大致的技術(shù)動(dòng)作

• 臨時(shí)保存當(dāng)前分支修改
  • 獲取當(dāng)前分支。
  • 如果是在當(dāng)前分支啥都不管，否則 stash 下
• 切換到需要發(fā)布分支
  • 切換下分支

再精簡下： 獲取當(dāng)前分支 ---> 保存修改 --> 切換分支。 都是 Git 的一些動(dòng)作。那么在 nodeJs 中怎么開始自己的 Git 表演呢？一個(gè)關(guān)鍵點(diǎn)：Shell 腳本和命令的調(diào)用，所以這里的本質(zhì)是調(diào)用 Shell。我們在上個(gè)章節(jié)中已經(jīng)實(shí)現(xiàn)的 Shell 和 Git 的基本能力了，我們直接調(diào)用就行了。

使用 symbolic-ref 獲取當(dāng)前分支

其實(shí) Git 的命令分為兩種

• 高層命令（porcelain commands）
• 底層命令（plumbing commands）

常用的命令大家都很熟悉了，什么 branch 啊， init 啊，add 啊，commit 啊等等。底層命令又是什么鬼，其實(shí)所有的高層命令的本質(zhì)都是會(huì)調(diào)用底層命令，可以類比為語言層面 Java，C#，Js 這些高級(jí)語言他的底層是使用 C 或者 C++ 是一個(gè)概念。 有興趣請移步

symbolic-ref 命令能干嘛呢？

給定一個(gè)參數(shù)，讀取哪個(gè)分支頭部給定的符號(hào) 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 中實(shí)現(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, "");
}

保存修改和切換分支

當(dāng)我們獲取到當(dāng)前分支之后，和我們目標(biāo)分支進(jìn)行比對如果一致的話直接跳過該步驟，否則就需要對當(dāng)前分支保存并且切換了。

為了方便對于保存和切換我們直接用了Git 的 stash 和 checkout 命令，并且封裝了兩個(gè)方法。

// 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(&#39;pop&#39;);
      }
      return Core.exec<string>(params, options);
    }

本地構(gòu)建

繼續(xù)分析下本地構(gòu)建的基本流程

大致分以下幾步

• 自動(dòng)生成版本號(hào)
  • 得到當(dāng)前 AppID 在微信模板庫中版本號(hào)情況
• 注入需要發(fā)布的小程序 AppID
  • 需要修改 src/manifest.json 文件中 AppID，方便開發(fā)工具上傳使用
• 運(yùn)行 uni-app 構(gòu)建命令
  • run uniapp 命令
• 撤銷發(fā)布時(shí)候的臨時(shí)文件修改
  • 撤銷文件修改

能力上來說有那么幾個(gè)

• 微信 api 調(diào)用

• 文件讀取和修改能力

• Shell 命令執(zhí)行能力

• 撤銷文件修改能力

首先怎么調(diào)用微信的 api，由于那時(shí)候我們親愛的后端同學(xué)啃次啃次的已經(jīng)吧微信 token 鑒權(quán)的能力已經(jīng)做掉了，所以我們直接接后端的微信鑒權(quán)能力就可以了。但是怎么接又是個(gè)問題，雖然人家已經(jīng)有個(gè) restful 接口可以用，但是接口都要登錄的啊，讓人家為了我這個(gè)小小的需求弄個(gè)匿名的不大現(xiàn)實(shí)也不安全，想來想去那就不要用 restful 了，直接調(diào)他后面提供的 Dobbo 服務(wù)好了，完美。

獲取微信 accessToken

在獲取微信 api 調(diào)用前我們需要先得到 accessToken。

所以我們會(huì)先用一個(gè)公共方法先去獲取當(dāng)前 accessToken， 然后在去請求微信開發(fā)平臺(tái) api。

// miniProgramService.ts 部分代碼  
  public async retrieveWxToken(): Promise<string> {
    if (!Launcher.dobboService.dubbo.mp) {
      throw new Error("dubbo初始化錯(cuò)誤");
    }
    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ā)平臺(tái)的鑒權(quán)能力的話就需要自己用 nodejs 方式去實(shí)現(xiàn)了，具體的微信開放平臺(tái)文案請移步

微信開放平臺(tái) api 調(diào)用

其實(shí)微信開放平臺(tái) api 調(diào)用就是正常的 http 調(diào)用即可。

微信提供了一系列方法，對于我們這次的場景來說有如下接口

• getTemplateList 獲取模板列表

  • POST https://api.weixin.qq.com/wxa/gettemplatelist?access_token==ACCESS_TOKEN

• addtotemplate 移動(dòng)草稿到模板庫

  • 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

具體的微信開放平臺(tái)文案請移步

版本號(hào)的自動(dòng)生成主要是通過在你點(diǎn)擊發(fā)布時(shí)候通過讓用戶選擇發(fā)布的版本為“大版本”，“功能迭代”還是“補(bǔ)丁修復(fù)”，在結(jié)合這里提到的獲取當(dāng)前模板列表并用 AppID 找到當(dāng)前最近的版本號(hào)再做自動(dòng)計(jì)算累加的方式得到這次發(fā)布的版本號(hào)。

構(gòu)建小程序

構(gòu)建小程序這邊就直接沿用 uni-app 的能力直接做構(gòu)建。封裝了如下方法去構(gòu)建小程序

//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(&#39; &#39;);
    //正常需要這樣傳入 shell 參數(shù)才行
    //[
    // &#39;NODE_ENV=production&#39;,
    // &#39;DEPLOY_ENV=staging&#39;,
    // &#39;UNI_PLATFORM=mp-weixin&#39;,
    // &#39;./node_modules/.bin/vue-cli-service&#39;,
    // &#39;uni-build&#39;
    //]

    const options: MPExecOptions = {
      execFileNameOrPath: &#39;node&#39;,
      cwd: getWorkspacePath()
    };

    return Shell.exec(args, options);
  }

其余的功能

• 剩余文件讀取就正常使用 fs 庫的 readFileSync 方法去讀取和修改
• 撤銷修改文件則是通過調(diào)用 Git 的 checkout 命令的能力去做，也是要使用上一章節(jié)的 Git 的基本能力調(diào)用

部署小程序

我們 build 完成了，怎么上傳呢？微信小程序這塊還是需要借助微信開發(fā)工具的能力來上傳

微信開發(fā)工具上傳

首選我們要先檢查開發(fā)者工具設(shè)置：需要在開發(fā)者工具的設(shè)置 -> 安全設(shè)置中開啟服務(wù)端口。這樣我們才能直接喚起開發(fā)者然后做些我們要做的事情。

再者我們需要知道微信開發(fā)者工具的執(zhí)行文件地址。正常來說 Mac 地址

/Applications/wechatwebdevtools.app/Contents/MacOS/cli

最后通過我們以前提供的 Shell 命令能力去執(zhí)行就搞定了。是不是很簡單。我們也封裝了miniProgram.ts 來做這個(gè)事情

// 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);
    }
  }
}

其余的功能

• 移動(dòng)到模板庫和部署預(yù)覽版直接調(diào)用微信開放平臺(tái) api 即可

效果預(yù)覽圖：

尾聲

至此整個(gè)小程序部署的在 Vscode 插件中實(shí)現(xiàn)的幾個(gè)關(guān)鍵的技術(shù)點(diǎn)已經(jīng)逐一做了簡要的說明，大家會(huì)不會(huì)覺得其實(shí)看下來不難，就是涉及的東西會(huì)比較多。其實(shí)還有其他的諸如整個(gè)構(gòu)建流程步驟如何可視化，Vscode 插件里面的一些基礎(chǔ)的能力等等在本文都沒有詳細(xì)提及。歡迎大家留言或者提問把自己想要知道的問題反饋給我們，也方便我們可以針對大家的問題再去做一篇更棒的關(guān)于 Vscode 插件開發(fā)的文章。

其實(shí) Vscode 插件在整個(gè)開發(fā)提效場景中只是當(dāng)中的一個(gè)環(huán)節(jié)，我們會(huì)以敦煌工作臺(tái)為核心底座搭配 Chrome 插件，Vscode 插件，zoo-cli 形成一個(gè)開發(fā)提效的百寶箱。Vscode 插件更多的是想給開發(fā)者們帶來沉浸式開發(fā)的體驗(yàn)。

原文地址：https://juejin.cn/post/7000138685274390542#heading-6

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Cara menerbitkan applet WeChat dalam vscode (langkah terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!