Taro多端统一开发框架 v3.6.23.zip

# @tarojs/plugin-mini-ci > Taro 小程序端构建后支持 CI（持续集成）的插件， 支持构建完毕后自动打开小程序开发这个工具、上传作为体验版、生成预览二维码. 目前支持（企业）微信、 京东、字节、支付宝、钉钉、百度小程序 ## 使用 ### 安装 ```sh npm i @tarojs/plugin-mini-ci -D ``` ### 使用插件 `/config/index.js` ```js // 示例, 如果你使用 `vs code` 作为开发工具， 你还可以使用注释的语法引入插件包含的声明文件，可获得类似于typescript的友好提示 /** * @typedef { import("@tarojs/plugin-mini-ci").CIOptions } CIOptions * @type {CIOptions} */ const CIPluginOpt = { weapp: { appid: '微信小程序appid', privateKeyPath: '密钥文件相对项目根目录的相对路径，例如 key/private.appid.key', }, tt: { email: '字节小程序邮箱', password: '字节小程序密码', }, alipay: { appid: '支付宝小程序appid', toolId: '工具id', privateKeyPath: '密钥文件相对项目根目录的相对路径，例如 key/pkcs8-private-pem', }, dd: { appid: '钉钉小程序appid,即钉钉开放平台后台应用管理的 MiniAppId 选项', token: '令牌，从钉钉后台获取', }, swan: { token: '鉴权需要的token令牌', }, jd: { privateKey: '京东小程序秘钥' } // 版本号 version: '1.0.0', // 版本发布描述 desc: '版本描述', } const config = { plugins: [['@tarojs/plugin-mini-ci', CIPluginOpt]], } ``` 除了给插件传入对象， 你也可以传入一个异步函数，在编译时动态返回相关配置。 ```js const CIPluginFn = async () => { // 可以在这里做一些异步事情， 比如请求接口获取配置 /** * @typedef { import("@tarojs/plugin-mini-ci").CIOptions } CIOptions * @type {CIOptions} */ return { weapp: { appid: "微信小程序appid", privateKeyPath: "密钥文件相对项目根目录的相对路径，例如 key/private.appid.key" }, tt: { email: "字节小程序邮箱", password: "字节小程序密码" }, alipay: { appid: "支付宝小程序appid", toolId: "工具id", privateKeyPath: "密钥文件相对项目根目录的相对路径，例如 key/pkcs8-private-pem" }, dd: { appid: "钉钉小程序appid,即钉钉开放平台后台应用管理的 MiniAppId 选项" token: "令牌，从钉钉后台获取" }, swan: { token: "鉴权需要的token令牌" }, jd: { privateKey: '京东小程序秘钥' } // 版本号 version: "1.0.0", // 版本发布描述 desc: "版本描述" } } const config = { plugins: [ [ "@tarojs/plugin-mini-ci", CIPluginFn ] ] } ``` ### 作为选项配合 build 命令使用 `package.json` 的 `scripts` 字段使用命令参数 ```json { "scripts": { // 构建完后自动 “打开开发者工具” "build:weapp": "taro build --type weapp --open", // 构建完后自动 “上传代码作为开发版并生成预览二维码” "build:weapp:preview": "taro build --type weapp --preview", // 构建完后自动“上传代码作为体验版” "build:weapp:upload": "taro build --type weapp --upload", // 构建完后自动“上传 dist/xxx 目录的代码作为体验版”， `--projectPath` 参数 适用于 taro 和 原生混合的场景 "build:weapp:upload": "taro build --type weapp --upload --projectPath dist/xxx" }, "taroConfig": { "version": "1.0.0", "desc": "上传描述" } } ``` 由上面的示例可知，插件为 taro cli 命令扩展了 4 个选项： - --open 打开开发者工具，类似于网页开发中自动打开谷歌浏览器 - --preview 上传代码作为开发版并生成预览二维码 - --upload 上传代码作为体验版 此 3 个选项在一条命令里不能同时使用（互斥） - --projectPath 指定要操作（打开、预览、上传）的目录路径， 默认情况下是操作构建后目录路径，即 [outputRoot 选项](https://taro-docs.jd.com/taro/docs/next/config-detail#outputroot)； 此选项必须搭配上述三个选项之一一起使用； 此选项优先级为： 终端传入的`--projectPath` > CI 配置的`projectPath` 选项 > [outputRoot 选项](https://taro-docs.jd.com/taro/docs/next/config-detail#outputroot)。 ### 作为命令单独使用 ```json { "scripts": { // 直接 “打开开发者工具并载入项目” "build:weapp": "taro open --type weapp --projectPath dist/xxx", // 直接 “上传代码作为开发版并生成预览二维码” "build:weapp:preview": "taro preview --type weapp", // 直接“上传代码作为体验版” "build:weapp:upload": "taro upload --type weapp", // 上传指定目录代码作为体验版 "build:weapp:upload2": "taro upload --type weapp --projectPath dist/xxx" }, "taroConfig": { "version": "1.0.0", "desc": "上传描述" } } ``` 由上面的示例可知，插件额外新增了 3 个独立命令，让你可以直接操作指定目录。适用于把 `taro` 作为项目一部分的使用场景。 当直接作为命令使用时，有两个选项： - --type 传入平台名称 - --projectPath 传入路径。 此选项优先级为： 终端传入的`--projectPath` > CI 配置的`projectPath` 选项 > [outputRoot 选项](https://taro-docs.jd.com/taro/docs/next/config-detail#outputroot) ### Hooks 使用 在插件执行完 `预览`、`上传` 操作后， 插件会触发 2 个钩子事件： | 事件名 | 传递参数对象 | 说明 | | :---------------- | :----------- | :---------------- | | onPreviewComplete | 详细见下文 | CI 执行预览后触发 | | onUploadComplete | 详细见下文 | CI 执行上传后触发 | 两个钩子被触发时传入的数据对象描述如下 ```ts interface HooksData { /** 是否预览、构建成功 */ success: boolean data: { /** 当前构建的小程序平台 */ platform: string /** 预览码本地路径 */ qrCodeLocalPath: string /** 预览码内容 */ qrCodeContent: string /** 插件传递的预览版本号 */ version: string /** 插件传递的描述文本 */ desc: string /** 预览或上传的目录路径 */ projectPath: string } /** 错误对象 */ error?: Error } ``` 你可以写一个自定义插件，来接收上述 2 个事件传递的值： ```js // config/test.js module.exports = function (ctx) { ctx.register({ name: 'onPreviewComplete', fn: ({ success, data, error }) => { console.log('接收预览后数据', success, data, error) // 你可以在这里发送钉钉或者飞书消息 }, }) ctx.register({ name: 'onUploadComplete', fn: ({ success, data, error }) => { console.log('接收上传后数据', success, data, error) // 你可以在这里发送钉钉或者飞书消息 }, }) } ``` 然后把自己写的插件配置应用起来： ```js // config/index.js const config = { plugins: [ ['@tarojs/plugin-mini-ci', CI插件参数], // 应用自己写的插件 require('path').join(__dirname, './test'), ], ...其他配置省略, } module.exports = function (merge) { if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } return merge({}, config, require('./prod')) } ``` ### 各平台 支持的功能情况对比 | 平台/功能 | 自动打开 IDE | 输出预览二维码 | 输出体验二维码 | | :-------- | :----------- | :------------- | :------------- | | weapp | ✅ | ✅ | ✅ | | qywx | ✅ | ✅ | ✅ | | tt | ✅ | ✅ | ✅ | | alipay | ✅ | ✅ | ✅