Плагин vscode серии Treasure Box — выпущен апплет WeChat

1629709383643_毅轩.png

Это 112-я оригинальная статья без воды.Если вы хотите получить больше оригинальных статей, выполните поиск в общедоступном аккаунте и подпишитесь на нас~ Эта статья была впервые опубликована в блоге Zhengcaiyun:Плагин vscode серии Treasure Box — выпущен апплет WeChat

предисловие

Во время разработки мы часто сталкиваемся с массой хлопотных вещей, некоторые процессы вонючие и долгие, как шаги старушечьей портянки. Например, наш дорогой апплет, процесс и шаги сделали мою 13-дюймовую нищенскую версию Mac очень болезненной. Вы должны открывать больше N вещей каждый раз, чтобы опубликовать для предварительного просмотра. Лан Шоу, какой надоедливый маленький гоблин.

Разбор и разборка

Базовый учебник по разработке плагинов VscodeПожалуйста, перейдите к официальной документации, Я не буду здесь вдаваться в подробности, здесь мы сосредоточимся только на реализации ключевых моментов для реализации автоматического построения и выпуска небольших программ.

Так как мы используем uni-app как многотерминальное унифицированное направление, нам необходимо выполнять следующие шаги каждый раз, когда мы разрабатываем или тестируем небольшую программу и отправляем ее в превью-версию:

ок, раз уж процесс примерно выяснен, то мы, обладающие строгим отношением программистов, анализируем и анализируем, какие способности нам нужно использовать во всем процессе? Далее мы делаем только некоторый анализ и разборку ключевых частей каждой ссылки, а не анализируем структуру и код всего кода плагина Vscode.

Предварительная работа
- Выберите ветку сборки, версию и заполните описание
  - Возможность окна плагина Vscode - введите описание, выберите раскрывающийся список
  - Возможности Git — вытягивание ветвей
- Временно сохранить текущие изменения ветки
  - Возможность Git - сохранить текущую ветку
- переключиться на целевую ветку
  - Возможность Git - переключать ветки
Создавайте локально
- Автоматически генерировать номера версий
  - Возможности API платформы разработки WeChat — получить список последних шаблонов для текущего идентификатора приложения.
- Внедрить AppID целевого апплета
  - Возможность вызова оболочки — изменение содержимого файла для внедрения AppID
- Запустите команду сборки uni-app
  - Возможность вызова оболочки - выполнение команд сборки
- Отменить публикацию временных измененных файлов
  - Возможность вызова Git — используйте Git для отмены изменений в файлах.
развернуть апплет
- Загрузить облачный черновик
  - Возможность вызова инструмента разработки WeChat
- Перейти к библиотеке шаблонов
  - Возможности API платформы разработки WeChat
- Предварительный просмотр развертывания
  - Возможность Dubbo. Поскольку серверная часть уже имеет возможность accessToken платформы разработки WeChat, вы можете напрямую позвонить, чтобы получить ее.

Возможность окна плагина Vscode включена по умолчанию и не требует реализации, поэтому необходимо реализовать вызовы Shell, вызовы Git, вызовы Dubbo, вызовы API платформы разработки WeChat и вызовы инструмента разработки WeChat.

Чтобы снова классифицировать, на самом деле вызовы Git и вызовы инструмента разработки WeChat являются вызовами командной строки, то есть вызовами оболочки.Вызовы API платформы разработки WeChat на самом деле являются HTTP-запросами, но наиболее важным ключом доступа является прямой вызов Zhengcaiyun. Интерфейс Dubbo получается из терминала, поэтому требуется Dubbo. Давайте посмотрим, как это сделать?

Вызов 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('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.

Git-вызовы

Взяв за основу предыдущую оболочку, мы можем начать вызов Git.Первым параметром в оболочке является файл выполнения команды, поэтому нам нужно получить адрес текущего исполняемого файла Git в качестве первого параметра.Просто сращивание обычных Команд Git достаточно. Итак, как узнать текущий путь к исполняемому файлу Git?

Получите это с помощью встроенных возможностей Git в плагине Vscode.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.ts как самый основной и основной вызов 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.Core.exec для прямого выполнения соответствующей команды Git.

Вызов средства разработки WeChat

Сначала мы должны сначалаПроверьте настройки инструментов разработчика: вам нужно открыть сервисный порт в настройках инструментов разработчика -> настройки безопасности. Таким образом, мы можем напрямую вызывать разработчика и делать то, что хотим.

Кроме того, нам нужно знать адрес исполняемого файла инструмента разработчика 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);
    }
  }
}

Дуддо звонит

Я не знаю почему, поэтому я просто настроил 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.exec

Git: метод Git.Core.exec

Инструменты разработки WeChat: метод MiniProgram.Core.exec

Дуббо: метод DobboService.dubbo.mp

вставать

Предварительная работа

Поскольку мы хотим собрать предварительную версию, очень вероятно, что ветка, которую нам нужно построить, не является той веткой, над которой мы сейчас работаем, поэтому этот шаг больше связан с выполнением некоторой подготовительной работы перед сборкой, а не потому, что другие люди test Предварительная бета-версия, а затем случайно потеряли наши собственные локальные трудноразрабатываемые материалы, это действительно чертовски.

По процессу сначала разложим общие технические действия

Временно сохранить текущие изменения ветки
- Получить текущую ветку.
- Если он есть в текущей ветке, то пофиг, иначе закопать
Переключитесь на ветку, которую необходимо освободить
- переключить ветвь вниз

Еще раз упростить: получитьтекущая ветвь ---> Сохранить изменения --> переключить ветку. Это все действия Git. Так как же начать собственное шоу Git в nodeJs? Ключевой момент: вызов сценариев и команд оболочки, поэтому суть здесь заключается в вызове оболочки. Основные возможности Shell и Git, которые мы реализовали в предыдущей главе, мы можем просто вызывать напрямую.

Используйте symbolic-ref для получения текущей ветки

На самом деле есть два типа команд Git.

Фарфоровые команды
Сантехнические команды

Общеупотребительные команды всем знакомы, такие как 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);
}

Реализуйте метод getCurrentBranch в gitService.

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

Создавайте локально

Продолжить анализ основного процесса местного строительства

Примерно разделить на следующие шаги

Автоматически генерировать номера версий
- Получите номер версии текущего AppID в библиотеке шаблонов WeChat.
Введите AppID публикуемого апплета.
- Вам необходимо изменить AppID в файле src/manifest.json, чтобы упростить загрузку и использование инструментов разработки.
Запустите команду сборки uni-app
- запустить команду uniapp
Отменить изменения временных файлов при публикации
- Отменить изменения файла

Что касается способностей, то их очень много.

API-вызов WeChat
Возможности чтения и модификации файлов
Возможность выполнения команд оболочки
Отменить изменение файла

Прежде всего, как вызвать API WeChat, потому что в то время наши дорогие back-end одноклассники уже сделали возможность аутентификации WeChat по токену, поэтому мы можем напрямую подключить back-end возможность аутентификации WeChat. Но как подключиться - это другая проблема. Хотя у людей уже есть спокойный интерфейс, который можно использовать, но интерфейс должен быть авторизован. Нереально и небезопасно позволять людям делать анонимность для моих небольших нужд. Не используйте успокоительный больше, просто позвоните в службу Dobbo, предоставленную им, это идеально.

Получить токен доступа WeChat

Прежде чем получить вызов API WeChat, нам нужно сначала получить accessToken.

Поэтому мы сначала воспользуемся общедоступным методом для получения текущего accessToken, а затем запросим API платформы разработки WeChat.

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

Если ваш бэкэнд не поддерживает возможность аутентификации платформы разработки WeChat, вам нужно использовать nodejs, чтобы реализовать ее самостоятельно.Пожалуйста, перейдите к копирайтингу на открытой платформе WeChat

Вызов API открытой платформы WeChat

На самом деле вызов API открытой платформы WeChat — это обычный HTTP-вызов.

WeChat предоставляет ряд методов.Для нашего сценария есть следующие интерфейсы

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

Пожалуйста, перейдите к копирайтингу на открытой платформе WeChat

Автоматическое создание номера версии, в основном, позволяет пользователю выбрать, является ли выпускаемая версия «основной версией», «итерацией функции» или «исправлением исправления», когда вы нажимаете «Опубликовать», в сочетании с получением текущего списка шаблонов, упомянутого здесь. и использование 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);
  }

остальные функции

Остальные файлы читаются и изменяются обычным образом с помощью метода readFileSync библиотеки fs.

Отмена измененных файлов выполняется с помощью команды Git checkout, а также с использованием основных возможностей Git, описанных в предыдущей главе.

развернуть апплет

Наша сборка завершена, как ее загрузить? Апплет WeChat еще нужно загрузить с помощью инструментов разработки WeChat.

Загрузка инструмента разработки WeChat

Кроме того, нам нужно знать адрес исполняемого файла инструмента разработчика WeChat. Обычно Mac-адрес

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

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

остальные функции

Перейдите к библиотеке шаблонов и разверните предварительную версию, напрямую вызвав WeChat Open Platform API.

Предварительный просмотр эффекта:

конец

Пока что кратко один за другим были объяснены несколько ключевых технических моментов, реализованных в плагине Vscode, развернутом всем апплетом.Как вы думаете, это не сложно увидеть, но будет больше вещей, связанных с этим. На самом деле есть и другие вещи, такие как визуализация всех этапов процесса строительства, некоторые базовые возможности в плагине Vscode и т. д., которые подробно не упоминаются в этой статье. Вы можете оставить сообщение или задать вопросы и дать нам отзыв по вопросам, которые вы хотите знать, и нам также удобно сделать лучшую статью о разработке плагинов Vscode для ваших вопросов.

По сути, плагин Vscode — это лишь одно из звеньев во всем сценарии разработки и повышения эффективности. сформировать сундук с сокровищами для развития и повышения эффективности. Плагин Vscode больше подходит разработчикамИммерсивная разработкаопыт.

Наконец со своим девизом -«Ленивый» — это лестница человеческого прогресса. Для того, чтобы быть более «ленивым», продолжаем двигаться вперед и исследовать.

работы с открытым исходным кодом

Zhengcaiyun интерфейсный таблоид

адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 50 партнеров по фронтенду, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры полного стека, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com