首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

NestJS 入门到实战 前端必学服务端新趋势-关关雎鸠,在河之洲

Taro 小程序持续集成

NestJS 入门到实战 前端必学服务端新趋势

download:https://www.51xuebc.com/thread-511-1-1.html

传统意义上的持续集成,是在 Web 端经过自动化的方式将项目打包并上传到效劳器,这一过程需求 Git 参与。持续集成的目的是为了免去手动打包、手动上传这一繁琐且容易出错的步骤,进步部署效率和部署的平安性。

而小程序部署方式与 Web 端不同,它不需求在本地打包,点击开发者工具中的上传按钮就会发布版本,版本能够在小程序管理后台看到。当需求其别人测试时,将某个版本设置为体验版,然后分享体验版二维码即可。

为什么小程序也需求持续集成?

在实践开发中我们遇到了这样的问题:每个前端人员上传后会产生一个新版本,不同的人上传后需求测试时,就要登录到管理后台切换体验版,在频繁测试场景下这个过程十分繁琐。

那么如何处置呢?处理计划就是将某个固定的版本号设置为体验版(如上图中的 v1.1.0),每个人都在这个版本号下上传,这样就不需求在后台切换版本了。多人在一个版本号下上传,开发者工具办不到,此时需求集成 CI 的才能。

Taro 集成 CI

我们以微信小程序为例,引见接入持续集成的正确姿态。

留意:小程序持续集成至少需求 Taro v3.6.2 的版本,之前的版本会报错,请留意晋级。

1. 小程序后台升成上传密钥。

用代码的方式上传小程序,必然需求微信提供一个凭证,这个凭证就是上传密钥。在小程序后台找到【开发->开发管理->开发设置】,会看到“小程序代码上传”面板。点击“生成”按钮,依据步骤创立密钥并下载。

下载后将密钥命名为 private.key,然后将其保管在项目的 config 目录下。

2. 装置插件并配置

在终端执行命令:

$ yarn add @tarojs/plugin-mini-ci -D

在配置文件 config/index.js 中引入插件并配置:

const ciPlugin = { // 微信小程序 weapp: { appid: 'xxxxx', privateKeyPath: 'config/private.key', }, // 版本号 version: '1.1.0', // 版本发布描绘 desc: 'CI自动发布', } const config = { ... plugins: [ ['@tarojs/plugin-mini-ci', ciPlugin] ], }

配置中的 weapp 选项表示微信小程序配置,传入小程序的 appid,属性 privateKeyPath 表示下载后的上传密钥的途径(相对途径)。简单两步,配置就完成了。

3. 添加上传命令

Taro 编译微信小程序时,经过命令 taro build --type weapp 来完成。假如要在编译之后自动上传代码,也就是触发我们上一步集成的 CI 插件,只需求添加一个 --upload 参数。

我们将编译并上传单独设置为一个命令,在 package.json 中设置如下:

{ "scripts": { "upload": "taro build --type weapp --upload" } }

在终端执行 yarn run upload 命令,控制台开端执行打包,完成后会自动将代码上传并设置为体验版,同时在控制台中自动打印出体验版的二维码,如图:

如今我们直接截图分享二维码即可,再也不需求登录管理后台了。

@tarojs/plugin-mini-ci 原了解M

在 Taro 中运用该插件集成 CI 很简单,但假如你的小程序不是运用 Taro 开发,应该如何完成持续集成呢?下面我们解析下该插件的原理。

1. miniprogram-ci

小程序代码上传是微信支持的功用,微信团队发布了一个 NPM 包,支持在 Node.js 中上传小程序代码。运用 @tarojs/plugin-mini-ci 插件时我们传入的配置,其实就是 miniprogram-ci 的配置。

在 Node.js 中,miniprogram-ci 的用法如下:

const ci = require('miniprogram-ci'); // ci项目实例 const project = new ci.Project({ appid: 'wxsomeappid', type: 'miniProgram', projectPath: 'the/project/path', privateKeyPath: 'the/path/to/privatekey', }); // 开端上传 const uploadResult = await ci.upload({ project, version: '1.1.0', desc: 'CI自动发布', onProgressUpdate: console.log, }); console.log(uploadResult);

上传代码之后,我们还需求将体验码生成并输出到控制台。

2. 生成体验码

在小程序中扫描体验码,会翻开当前小程序的体验版页面,其实这个页面是 H5 页面

在链接中交换为本人的 appid,就能够将链接生成一个二维码输出到控制台,这里要借助另一个 NPM 包 qrcode 来完成。

首先装置 qrcode:

$ yarn add qrcode

然后编写一个将链接生成二维码,并输出到控制台的办法:

import * as QRCode from 'qrcode'; const printQrcode = async (url) => { let terminalStr = await QRCode.toString(url, { type: 'terminal', small: true }); console.log(terminalStr); }; // 生成二维码并输出到控制台 const url = 'https://open.weixin.qq.com/sns/getexpappinfo?appid=xxx#wechat-redirect'; printQrcode(url);

在代码上传完成后调用 printQrcode() 办法,即可打印出体验码。

总结

本篇引见了如何在 Taro 中运用插件集成 CI,并解释了插件的原理协助大家在非 Taro 环境下集成,整体完成并不艰难。

但小程序有本人的场景,普通状况下 CI 只针对体验版。我们将上传代码封装为 upload 命令,你能够在本地执行,当然也能够在如 GitHub Action 的自动化流水线中执行。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20230318A040GD00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券