If you use Taro to develop applets, it is recommended that you use taro-deploy for efficient one-click automated build releases.

Why use taro-deploy?

Taro developers often have this pain point: After developing code, they need to go through the following steps to publish and test it (take Alipay and wechat mini program platforms as examples) :

The whole process was nearly 10 minutes, and there were many manual steps, which made the original release very inefficient.

Taro-deploy is designed to address this pain point by integrating command line tools provided by Alipay and wechat to automate the process.

With taro-deploy, there are only two steps developers need to take to publish a test:

  1. Run the taro-deploy command once
  2. Take a tea break

Once the build is published, the nail will receive a push of the build results, without human intervention.

The following is a screenshot of Dingding’s push message.

It can be seen that in addition to the qr code generated by publishing the small program, the push message also includes the build machine, build branch, the latest Git commit log of the project, etc., making the packaging information clearer.

Git commit (feat/fix

Does it fit me?

If you are

  1. Develop applets using the Taro framework
  2. Need to support wechat and Alipay platforms
  3. You want to automate build releases, not do them manually
  4. Use taro-deploy for office, development, and testing in a group of studs. (This is not necessary, taro-deploy can be used without studs, but requires more manual operation.)

Taro -deploy is perfect for you.

How does it work?

Step 1 — Install

npm i -g taro-deploy
Copy the code

Step 2 – Platform related preparation steps

  1. Alipay: Refer to the official documentation and prepare the private key and toolId.
  2. Wechat: Refer to the official documentation to prepare the private key

Step 3 — Create a stitching robot

Refer to the official document to create the pin robot, and remember to select “custom keywords” and fill in “small program build” for security Settings.

Creation is completed, will get a form webhook a url such as https://oapi.dingtalk.com/robot/send?access_token=XXXXXX, subsequent use.

Step 4 — Prepare the configuration file

Create a new deploy-config.js file in your Taro project root directory and fill it with the following template.

Here need to configure more key content, success or failure (” ゜ロ゜ “)

// deploy-config.js
// This file should be placed under the root directory of the Taro project

module.exports = {
  // Build the output directory where the logs generated by the script will also be output
  outDir: './deploy-out'.// Wechat configuration
  weapp: {
    // If false, the wechat build process will not run
    enable: true.// Fill in the output path of your Taro compiled wechat package here
    projectPath: './dist/weapp'.// The path to the private key obtained in Step 2
    keyPath: './weapp.key'.// wechat small program appId
    appId: 'wx82xxxxxx'.// wechat experience version photo address
    // Unlike Alipay, no matter how many new versions are uploaded, the address of wechat experience version remains unchanged
    // Therefore, you need to configure the link of the QR code image here
    // The image address of the experience version copied directly from the wechat public platform seems not to be displayed properly in Dingdingli
    // It is recommended to save to your own CDN, and then fill in the CDN url below
    qrcodeImageUrl: 'https://xxxcdn.con/image/weapp-exp-qrcode.jpg'.// Applets version number
    // Since the command line SDK of wechat does not support setting a certain version as the experience version, you need to manually change the experience version on the web page
    // So you can only save the country by curving. First set the version uploaded by this tool to experience version on the webpage (find the version uploaded by CI Robot 1).
    // Then specify the same version number for each upload to override the old version and finally achieve the effect of releasing a new experience version
    version: '1.1.0'.// true skips the compile phase, i.e. the taro build command,
    skipBuild: false,},// Alipay related configuration
  alipay: {
    // If false, alipay's build process will not run
    enable: true.// Fill in the output path of alipay program package configured Taro compiled here
    projectPath: './dist/alipay'.// The path to the private key obtained in Step 2
    keyPath: './alipay.key'.// The toolId obtained in Step 2
    toolId: 'f48xxx'.// Alipay small program appId
    appId: '202xxx'.// true skips the taro build command, the compile phase
    skipBuild: false,},// By default, the demo version will be released. If you enter false, the preview version will be released
  // Note that uploadImage function must be implemented if it is published as a preview version, otherwise it cannot display the qr code of the preview version
  isExperience: true.// Whether to run NPM install before build
  npmInstall: false.// Specify environment variables. The specified environment variables will be injected into the taro Build directive at compile time
  env: {
    BUILD_ENV: 'test' // For demo only, you should actually fill in the environment variables you need to compile your project
  },

  // The webhook URL of the nailing robot obtained in Step 3
  dingTalkUrl: 'https://oapi.dingtalk.com/robot/send?access_token=xxx'.// If you only need to build the release demo applet, you can ignore the following functions
  // If you need to build the release preview version of the applet, you need to implement this function, the local QR code image file into the image link, otherwise the preview version of the QR code can not be pushed to the nail group
  // objectName is in the form of {platform}-{timestamp}.jpg, which is the recommended file name
  // filePath is the path of the local preview QR code image
  uploadImage: async function(objectName, filePath) {
    return ' '
    // If you use Ali cloud OSS as CDN, you can refer to the following code to upload
    // const OSS = require('ali-oss')
    // const client = new OSS({
    // region: 'oss-cn-xxx',
    // accessKeyId: 'xxx',
    // accessKeySecret: 'xxx',
    // bucket: 'xxx',
    // })
    // await client.put(`preview/${objectName}`, filePath, {
    // 'Cache-Control': 'max-age=31536000'
    // })
    // return `https://xxx-oss-cdn.com/preview/${objectName}`}}Copy the code

Step 5 – Run taro-deploy

CD to your project and run it
taro-deploy
Copy the code

Then you can wait for the nail robot to push the construction results 🙂

FAQ

Q: We don’t use taro office. How can we use taro office?

A: Taro-deploy currently only supports push pin messages. Otherwise, only automatic build, upload and setup of the experience version can be completed, and the final push step cannot be completed. If you need to push other IM tools, you can try to do it yourself, and you are also welcome to submit PR.

Q: Why is uploadImage so troublesome to implement in a preview release?

A: Because the preview version of Alipay and wechat will only generate local TWO-DIMENSIONAL code pictures. If you want to display local two-dimensional code pictures in Dingdingmessage, you can only upload the pictures to CDN first and then fill the CDN link into dingdingmessage template.

Q: Why is the wechat experience version still old after it is released?

A: Please check on the wechat web console to ensure that the version uploaded by “CI Robot 1” is set as the experience version.

Q: Do you only support wechat and Alipay?

A: Taro supports many platforms, but taro-Deploy currently only supports automatic build and release of wechat and Alipay.

Q: Can’t find the version uploaded by CI Robot 1?

A: Run taro-deploy first. After the upload is completed, it will be found in the “Version Control” menu of the wechat mini program console web page.

Q: If the tool is buggy, will it cause online glitches for applets?

A: Taro-deploy currently only supports release of preview and trial release, and does not support release of production release, which does not affect the production environment.

Q: I want to customize the content of the pins push message

A: Currently there is no open very flexible pin message template configuration, if you need to fork this project and customize the send-ding.js file, also welcome to submit PR.