vscode で WeChat アプレットを公開する方法 (詳細な手順)

vscode で WeChat アプレットを公開するにはどうすればよいですか?次の記事でその方法を紹介しますので、お役に立てれば幸いです。

#開発中には、臭くて長い、まるでおばあさんの足取りのように面倒なことがたくさんあります。たとえば、私たちの親愛なる小さなプログラム、そのプロセスと手順により、私の Mac 13 インチ Beggar's Edition は非常に苦痛になります。プレビューに公開する前に、毎回 N 個のものを開く必要があります。ラン・ショウはとても迷惑な小さなゴブリンです。

分析と解体

Vscode プラグイン開発の基本チュートリアルについて公式ドキュメントに移動してください、行きませんここでは、小さなプログラムの自動構築とリリースの重要な点のみを説明します。

複数の端末の統一的な方向性としてユニアプリを使用しているため、プレビュー版に送信する必要がある小さなプログラムを開発またはテストするたびに、次の手順を実行する必要があります。

さて、プロセスが大まかに明らかになったところで、プログラマーとしての厳しい姿勢を持つ私たちが、プロセス全体でどのような能力が必要なのかを分析してみましょう。次に、各リンクの主要な部分の分析と分解のみを行います。Vscode プラグイン コードの完全な構造とコード分析は行いません。

1. 事前作業
   • ビルド ブランチ、バージョンを選択し、説明を入力します。
     • Vscode プラグイン ウィンドウの機能 - 説明を入力し、ドロップを選択します。ダウン ボックス
     • Git 機能 - ブランチのプル
   • 現在のブランチの変更を一時的に保存
     • Git 機能 - 現在のブランチを保存
   • ターゲット ブランチに切り替える
     • Git 機能 - ブランチを切り替える
2. ローカル ビルド
   • 自動生成バージョン番号
     • WeChat 開発プラットフォーム API 機能 - 現在の AppID の最近のテンプレート リストを取得します
   • ターゲット アプレット AppID を挿入します
     • シェル呼び出し機能 - を変更しますファイルのコンテンツを作成し、AppID を挿入します。
   • ユニアプリ ビルド コマンドを実行します。
     • シェル呼び出し機能 - ビルド コマンドを実行します。
   • 元に戻す一時的に変更されたファイルの公開
     ##Git 呼び出し機能 - Git を使用して変更されたファイルを元に戻す
   アプレットのデプロイ
   ##クラウド ドラフト ボックスのアップロード
3. WeChat 開発ツール呼び出し機能
   • • テンプレート ライブラリに移動
     WeChat 開発プラットフォーム API 機能
   • • デプロイプレビュー バージョン
     Dubbo 機能 - 投稿による WeChat 開発プラットフォームの accessToken 機能はクライアント上にすでに存在します。これを直接呼び出して
   • • # を取得できます。
     ##. Vscode プラグインのウィンドウ機能はデフォルトで提供されており、実装する必要はないため、シェル呼び出し、Git 呼び出し、Dubbo 呼び出し、WeChat 開発プラットフォーム API 呼び出し、および WeChat 開発ツール呼び出しを実装する必要があります。
   再分類すると、実際には、Git 呼び出しと WeChat 開発ツール呼び出しはコマンド ライン呼び出し、つまりシェル呼び出しです。WeChat 開発プラットフォーム API 呼び出しは実際には http リクエストですが、最も重要な accessKey は Zhengcai Cloud を直接呼び出すことですバックエンド Dubbo インターフェイスを使用して取得するため、Dubbo が必要です。やり方を見てみましょう?

Shell の呼び出し

Shell と聞くと、肛門が締め付けられます。詳しくない人は、非常に複雑だと思います。実際には # を使用するだけです。 ##child_process

子プロセスを開始して、楽しんでください。そこで、すべてのシェル スクリプト実行アクションを実行するために、プロジェクト内にshell.tsをカプセル化しました。 child_process に詳しくない場合は、ここにアクセスしてください

// shell.ts 部分核心代码
import { execFile, ExecFileOptions } from "child_process";

export namespace Shell {
  // 在 shell 中直接调用 git 的执行文件执行原始命令
  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
      }
    });
  }
}

その後、Shell.exec メソッドを通じてパラメータを渡し、直接呼び出すことができます Git call

前のシェルをベースとして、Git の呼び出しを開始できます。シェルの最初のパラメータはコマンドの実行ファイルなので、次のパラメータを取得する必要があります。現在の Git 実行ファイルのアドレスが最初のパラメータとして使用され、以下は実際には通常の Git コマンドのつなぎ目です。では、現在の Git 実行ファイルのパスはどのようにして知ることができるのでしょうか?

次のように、Vscode プラグインに統合された Git 機能を通じて

extensions.getExtension("vscode.git") を取得します

// 获取 Vscode 内置的 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の実行ファイルのパスです。より便利な呼び出しのために、Git

//git.ts 的部分核心代码
export namespace Git {
  export namespace Core {
    // 在 shell 中直接调用  git 的执行文件执行原始命令
    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.ts もカプセル化しました。外部では、Git.Core.exec メソッドを直接使用して、対応する Git コマンドを直接実行します

WeChat 開発ツールの呼び出し

最初の選択は、

開発者ツールの設定を確認することです: 開発者ツールの設定 -> セキュリティ設定でサービス ポートを開く必要があります。 ＃＃＃。このようにして、開発者を直接呼び出して、やりたいことを実行できます。

再者我们需要知道微信开发者工具的执行文件地址。 详细请移步文档

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 extends string | Buffer>(
      args: any[],
      options: MiniProgramExecOptions
    ): Promise<TOut> {
      vscode;
      options.execFileNameOrPath = "/Applications/wechatwebdevtools.app/Contents/MacOS/cli";
      return Shell.exec(args, options);
    }
  }
}

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

本地构建

继续分析下本地构建的基本流程

大致分以下几步

• 自动生成版本号
  • 得到当前 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;
  }

如果你们的后端没有支持微信开发平台的鉴权能力的话就需要自己用 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(&#39; &#39;);
    //正常需要这样传入 shell 参数才行
    //[
    // &#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 方法去读取和修改
• 撤销修改文件则是通过调用 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);
    }
  }
}

其余的功能

• 移动到模板库和部署预览版直接调用微信开放平台 api 即可

效果预览图：

尾声

至此整个小程序部署的在 Vscode 插件中实现的几个关键的技术点已经逐一做了简要的说明，大家会不会觉得其实看下来不难，就是涉及的东西会比较多。其实还有其他的诸如整个构建流程步骤如何可视化，Vscode 插件里面的一些基础的能力等等在本文都没有详细提及。欢迎大家留言或者提问把自己想要知道的问题反馈给我们，也方便我们可以针对大家的问题再去做一篇更棒的关于 Vscode 插件开发的文章。

其实 Vscode 插件在整个开发提效场景中只是当中的一个环节，我们会以敦煌工作台为核心底座搭配 Chrome 插件，Vscode 插件，zoo-cli 形成一个开发提效的百宝箱。Vscode 插件更多的是想给开发者们带来沉浸式开发的体验。

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

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がvscode で WeChat アプレットを公開する方法 (詳細な手順)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。