Pain points

  • Development mode (Branch development mode)
  • 4. Open developer tools =>5. Local build=>6. Upload code (fill in the version number and remarks) =>7.

The solution

Jenkins is CI&CD open source software for automating a variety of tasks, including building, testing, and deploying software. Jenkins supports a variety of operations, either through system packages, Docker, or a standalone Java program.

We realized the automatic construction of small program by creating job on Jenkins. 2,3,4,5 and 6 of the above arraignment process will be automated one-click compilation, deployment and upload, freeing manpower.

The project design

  • Jenkins service construction (wechat developer tools only have Windows version and MAC version, so it is necessary to build a set of Jenkins service on MAC Mini). For details, refer to Jenkins official website, JDK needs to be installed. The standard JDK is blocked, openJDK can be used or successfully installed. In fact, the most powerful thing of Jenkins is its plug-in system. You can install the plug-ins you need according to your needs. Only when the relevant plug-ins are installed, the corresponding options will be displayed when creating a job. Start Jenkins, use the Jenkins command to start
  • Create a job (automatic build of small program) Create a free-style job, which needs to be noted in the process of job creation, such as “multi-parameter build”, “Gitlab address configuration”, “build process”, “post-build operation”, etc.
  • Scripting (current branch build, pull code, NPM run build, start, command line login, command line upload)
  • The process test

Jenkins Service Setup

  • The device Mac Mini
  • Download Jenkins
  • 1) Install Iterm2 (terminal system on MAC, you can also use MAC terminal)
  • 2) Install Homebrew (Homebrew is a Ruby package management tool for MAC, which enables developers to easily install various development software without installing and configuring other dependencies)
  • 3) Install Jenkins using Homebrew (eliminating the process of manually downloading the configuration; Brew cask install caskroom/versions/java8 Brew Cask install Java8 (openJDK and Oracle JDK are similar)
  • 4) To install Jenkins, you must first install Java8, i.e. Jdk1.0.8, because Jenkins runs on java8;
  • 5) NPM install Jenkins successfully
  • 6) After the installation is successful, run the Jenkins command to start the Jenkins service. After the service is successfully started, enter http://localhost:8080 in the browser. Since the password is required to start Jenkins for the first time, run the following command:

The cat ~ /. Jenkins/secrets/initialAdminPassword (copy the path of the page displays, perform the cat command, will show the password)

  • 7) Jenkins interface will be opened after entering the password, and the installation is successful

In the process of Jenkins initialization, users will be guided to install corresponding plug-ins. Users can install them according to their own needs.

Create a job

Jenkins can create multiple types of jobs, as shown in the following figure:



Let’s just create a FreeStyle Project. For details about how to create a job, see the Jenkins official website.

packaging

For a continuous inheritance packaging platform, there are four steps for each package: triggering the build, pulling the code, executing the build, and post-build processing

Small program automation building ideas

General applets release process

Code Done- “local build-” login wechat developer tools (TWO-DIMENSIONAL code login) – “upload -” wechat background interrogation – “released

In this process, the official release of the applets must be carried out through the applets developer tool, and the applets developer tool provides two kinds of interface for external call command line and HTTP service. So we can do this in both ways in our build scripts.

Jenkins packing procedure is specific

1. Configure job information



Make it clear what the main purpose of the current job is.

Parameterize the build process

During the upload process, the small program needs to fill in the two information of “version number” and “online content”, as well as the branch name if it needs to be online in different branches. Therefore, it needs to parameterize the construction process and obtain the above information from the user.



Code remote warehouse Settings here to set the need to pull which warehouse code to build, generally only need to fill in the remote warehouse address.

Note: If you want to manage your code with Git, you need to install the Git plugin and configure the Git path, otherwise there will be no Git option for source management.

Build scripts The next step is to write build scripts. The normal process should be: determine whether the current parameter is empty – “if it is empty, return-” otherwise determine the current build branch – “pull remote warehouse code -” execute NPM install- “execute NPM run build-” command line call open wechat developer tools – “command line upload -” wechat background raise

The above process seems to have no problems at first glance, but the premise of its normal upload is that the applets developer tool is logged in normally, that is to say, when the applets developer tool fails, the upload fails, so it is necessary to add the applets developer tool login process in the construction step.

The small program developer tool only has a login way of scanning two-dimensional code, so only by integrating the login two-dimensional code into Jenkins can the login problem be solved.

The login

The cli provides two login methods. One is to convert the login QR code into Base64 for users. The second is to print the TWO-DIMENSIONAL code in the command line. In the iterm terminal execute commands/Applications/wechatwebdevtools app/Contents/Resources/app. The nw/bin/cli – l can login in terminal print qr code, the premise is need to open the developer tools port Settings.

Settings – > Security Settings – > Service Port – > Enable

However, executing this command directly in the script will not output the QR code in Jenkins’ Console output, but will output a bunch of Unicode characters, which is not feasible.

So you can get a Base64 QR code over HTTP and turn it into an image file using a Python script. Here is the shell script

echo 'Generate the LOGIN QR code of wechat developer tools'
WX_CLI=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli
$WX_CLI-o PORT=$(cat ~/Library/Application/Support/ wechat web developer /Default/.ide) curl http://127.0.0.1:$PORT/login? TXT $(python ~/tools/base64tojpeg.py ~/qrcode.txt ~/.jenkins/workspace/ qrcode.jpg)echo [QRCode generated succeed]$BUILD_NUMBER
Copy the code

Base64tojepg. Py script

#! /usr/bin/python
import os,base64,sys 
if len(sys.argv) == 3:
    inputFileName=sys.argv[1]
    outputFileName=sys.argv[2]
    allstr=open(inputFileName).read()
    idx=allstr.find(', ')
    bstr=allstr[idx+1:]
    imgdata=base64.b64decode(bstr)
    file=open(outputFileName,'wb')
    file.write(imgdata)
    file.close()
else:
    print('Useage: python base64tojpeg.py inputFileName outputFileName')
Copy the code

Set the display of login QR code

Add the set Build Description after the Build build step, and set the qr code image just generated to the Build build screen



The blackened parts are the IP address and the project name



Note: The Description setter Plugin plugin needs to be installed here



upload

Upload must be called after login, so add a build step after set Build description as shell for upload

#sh ~/wechat_cli.sh
WX_CLI=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli
echo "The version number is${UPLOAD_VERSION}"
echo "To describe is${UPLOAD_DESC}"

PRO_ROOT=$(pwd)/build/ZZWAMain
echo "PRO_ROOT is${PRO_ROOT}"PORT=$(cat ~/Library/Application/Support/ wechat web developers /Default/.ide)$WX_CLI -l --login-qr-output [email protected]
echo 'Upload to wechat background'

$WX_CLI -u ${UPLOAD_VERSION}@/Users/ username /.jenkins/workspace/ project name/project name -- uploa-desc${UPLOAD_DESC}


#clean upJPG rm /Users/ User name /qrcode. TXT cp /Users/ User name /expired.png /Users/ username /.jenkins/workspace/ project name /qrcode.jpgCopy the code

permissions

Jenkins only needs an administrator who has super privileges. As the administrator of Jenkins service, he can view scripts, modify scripts, modify permissions, and other operations. Ordinary developers, as Jenkins users, only need to have build project permissions.

Qr code requires login

Set the plain text of the QR code

Test after upload

Set the current uploaded version as the experience version and check whether it is opened properly.