This article was first published at github.com/yingye/Blog… Welcome to pay attention to my Blog, the body is presented in the form of issue, like please click star, subscribe please click watch ~
background
In the absence of CI/CD and other relevant tools, there are the following problems in the test release of wechat applets:
- In apet, only one development version can be displayed for a developer
- Test colleagues to find the development of two-dimensional code, low efficiency
- Locally generated two-dimensional code will carry local code, not timely pull branches and other changes
In order to avoid the occurrence of the above problems, the micro program of wechat was adopted to integrate Jenkins’ scheme.
basis
Before introducing the implementation scheme, let’s review the conventional micro channel small program release process.
As can be seen from the above flow chart, wechat applet preview and upload are required to be carried out in wechat developer tools. Next, let’s learn about the uploading method provided by wechat developer tools.
Wechat developer tools
In addition to the graphical interface, wechat developer tool also provides two interfaces, command line and HTTP service, for external invocation to log in, preview, upload and other operations.
Command line call
Command line tool location:
MacOS: < installation path > / Contents/Resources/app. The nw/bin/cli Windows: < installation path > / cli. The bat
Take macOS as an example:
1. Open the Developer tool:
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
Copy the codeAmong them, / Applications/wechatwebdevtools app/installation path.
2. Login:
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l
Copy the codeAfter entering the command line above, the login QR code will be printed in the terminal, and the login will be scanned by wechat. After the operation is completed on wechat, login Success will be output, as shown below:
To obtain a base64 qr code, use the following command:
# Login: Print the TWO-DIMENSIONAL code in the form of Base64 login in the terminal
cli -l --login-qr-output base64
/Users/username/code.txt
cli -l --login-qr-output base64@/Users/username/code.txt
Copy the codeSee command line calls for more APIS.
The HTTP service
The HTTP service is automatically enabled after the tool is started. The host is set to 127.0.0.1 and the port number is not fixed. The port number is recorded in the user directory as follows:
MacOS: ~/Library/Application Support/ wechat Web developer tools /Default/.ide Windows: ~/AppData/Local/ wechat Web developer tools /User Data/Default/.ide
Take macOS as an example:
First you need to run the developer tool, you can use the command line method introduced above to open the wechat developer tool.
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/ Users/zyy/Library/Application Support/WeChat web developer tools/Default/ide." ")
echo "Wechat developer tool runs on${port}Port"
Copy the codeIn this way, you can get the port number of wechat developer tools, where /Users/zyy/ is the user directory.
1. Open the Developer tool:
# Open toolshttp://127.0.0.1: Port number /openOpen/refresh the projecthttp://127.0.0.1: port number /open? Projectpath = full projectpathCopy the code2. Login:
# Login, return the QR code in picture formathttp://127.0.0.1: Port number /loginLogin, base64 format qr codehttp://127.0.0.1: Port number /login? Format =base64Qr code # login, base64 format and written to/Users/username/logincode. TXThttp://127.0.0.1: port number /login? Format = base64&qrOutput =%2FUsers%2Fusername% 2flogincode.txtCopy the code3. Preview:
/Users/username/demohttp://127.0.0.1: port number /preview? Projectpath =%2FUsers%2Fusername%2Fdemo/Users/username/demohttp://127.0.0.1: port number /preview? Projectpath =%2FUsers%2Fusername%2Fdemo&format=base64# preview path to/Users/username/demo project, return base64 qr code format, and write/Users/username/logincode. TXThttp://127.0.0.1: port number /preview? Projectpath =%2FUsers%2Fusername% 2fdemo&format = base64&qrOutput =%2FUsers%2Fusername%2Floginco de.txt# preview path to/Users/username/demo program, return to qr code image format, and preview information output to/Users/username/info. The jsonhttp://127.0.0.1: port number /preview? Projectpath =%2FUsers%2Fusername%2Fdemo& InfoOutput =%2Users%2username%2info.jsonCopy the codeFor more apis, see HTTP calls.
plan
Wechat developer tools are currently available only in macOS and Windows versions, which limits the server system. The following uses macOS as an example to introduce the specific implementation process:
Install Jenkins
The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project. As the leading open source automation server, Jenkins offers hundreds of plug-ins to support building, deploying, and automating any project.
Jenkins relies on the Java runtime environment, so you need to install Java on the machine. There are many ways to install Jenkins, you can download the latest software package directly from the official website, and then run the following command to start Jenkins.
java -jar jenkins.war --httpPort=8888
Copy the code–httpPort=8888 specifies the service port number. The default port number is 8080.
A new task
Select “Build a Free-style software project”, enter the task name, and click OK to go to the task configuration page.
Task allocation
Before getting into task configuration, let’s take a look at the final functionality.
The main function points are as follows:
- Git is used to manage your code, with a choice of branches
- The packaged version (development/trial) is optional (note: “Development” corresponds to “preview” and “trial” corresponds to “upload”)
1. Source code management
On the task configuration page, under the second item, “Source Management,” select Git to manage your code. Enter the git repository address and the account to access. $branch is a custom build parameter.
2. Build parameters
On the task configuration page, click General, and select Parameterize Build Process. The Build parameter configuration page is displayed.
There are several types of parameters for you to choose from. You can configure them by referring to the following figure.
Note that name can pass
build
Under Build on the task configuration page, select Execute Shell to build.
Tips: The shell script here is the core content of wechat applet integration with Jenkins.
Review the flow chart of wechat applets at the beginning of this article:
This series of operations using shell scripts to complete, how to achieve?
The login
The login of the wechat developer tool needs to be confirmed by scanning the code at the wechat terminal. At this step, wechat does not provide the login method of account password. However, wechat developer tools can keep the login state. Due to the restriction of wechat, one developer can only log in on one terminal, so we applied for a new wechat account “Front-end little Sister” to log in on Jenkins’ machine.
Basic project Settings
In the graphical interface, when uploading code, the developer tool will fill in information such as AppID and project path, and select basic project Settings from “Details”, such as “ES6 to ES5”. Wechat also provides a configuration method using the project.config.json file in the project root directory. A node script generates the project.config.json file.
const fs = require('fs')
const content = '{"description":" Project configuration file." ,"setting":{"urlCheck":false,"es6":true,"postcss":true,"minified":true,"newFeature":true},"miniprogramRoot":"./","compil eType":"miniprogram","appid":"***","projectname":"wechat-app","condition":{"search":{"current":-1,"list":[]},"conversati on":{"current":-1,"list":[]},"plugin":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current" :-1,"list":[]}}}'
fs.writeFileSync('./dist/project.config.json', content, 'utf-8')
Copy the codeThis completes the basic setup of the project, and I’ll show you how to do the upload via shell script.
A shell script
echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
#Perform project build
npm i --registry=http://registry.npm.taobao.org
npm run build
#Open the wechat developer tool/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o port=$(cat "/Users/devops/Library/Application $(curl -sl -w %{http_code}) $(curl -sl -w %{http_code}) http://127.0.0.1:${port}/open) if [$return_code == 200] then echo" Else echo "${return_code}, devtool startup failed "exit 1 fi if ["$build_type" == "dev"] then echo" Dev" Wget -o $BUILD_ID. PNG http://127.0.0.1:${port} / preview? Projectpath = / Users/Shared/Jenkins/Home/workspace/fe - wechat - app/dist echo "preview success! Please scan the QR code to enter the development version!" Elif ["$build_type" == 'prod'] then echo" /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u 1.0.0 @ / Users/Shared/Jenkins/Home/workspace/fe - wechat - app/dist - upload - desc 'initial release "echo" uploaded successfully! Please go to the background of wechat mini program to set up the experience version and submit it for review!" fiCopy the codeBecause this project requires compiled code, node and NPM need to be installed on the server. The NPM run build command not only compiles the code, but also executes the previously described Node script that generates project.config.json.
After the development version is uploaded successfully, the TWO-DIMENSIONAL code picture is saved for displaying the two-dimensional code and sending emails after construction.
Here, the command line call and HTTP call are combined to complete the upload for the following reasons:
- HTTP calls make it easy to download the generated QR code image
- The HTTP service will start only after the wechat developer tool is started. Therefore, you need to invoke the command line to start the wechat developer tool
After the build
Use the Description setter plugin to achieve, after the completion of the construction of the TWO-DIMENSIONAL code image display.
Installing a plug-in
Go back to Jenkins home page, enter the “Plug-in Management” page in “System Management”, search for description setter Plugin and install it.
After the plug-in is installed, return to the task configuration page. In “Post-Build Operations”, add the “Set Build Description” step as shown below:
Here, the TWO-DIMENSIONAL code information is displayed in the form of HTML tag, as follows:
<img src="Http://machine IP: port /job/ project name /ws/${BUILD_ID}.png" alt=${BUILD_ID}" width="200" height="200" /> <a href="Http://machine IP: port /job/ project name /ws/${BUILD_ID}.png">Qr code ${BUILD_ID}</a>
Copy the codeAfter the above configuration, the image is not displayed, but the text information is displayed. This is because Jenkins’ default Markup Formatter for all description information adopts Plain text mode due to security restrictions.
In System Administration -> Global Security Configuration, change the Markup Formatter from Plain Text to Safe HTML.
Follow the above steps, you can display the development version of the TWO-DIMENSIONAL code. Since Jenkins was built using the wechat account of “Front-end Little Sister”, the development version published by “Front-end Little Sister” on the small program development assistant is not sure which student built it, so we need to use the TWO-DIMENSIONAL code generated by Jenkins platform, and pay attention to the validity period of the two-dimensional code (valid for 25 minutes).
conclusion
This paper takes the conventional release process of wechat applets as the entry point, and gradually introduces how to integrate Jenkins to realize the preview and upload functions of wechat applets. Background and test colleagues can select branches to obtain the development version on this platform for joint tuning and testing, which solves the problems mentioned at the beginning of this article.
Due to the limited space of this article, it only introduces some basic functions of the platform. If you have other requirements, please refer to the extension link at the end of the article to solve them. In addition, if there is any unclear or inappropriate in the article, we welcome your criticism and correction ~
Extension link:
- What is continuous integration? (Ruan Yifeng)
- Jenkins User Documentation
- | | small program WeChat public platform project configuration file
- WeChat public platform | | small program command line calls
- WeChat public platform for a small program that | | HTTP calls