Half a year ago, I had the opportunity to contact wechat small program development. Because mpvue only modifies the runtime and compiler of vue. js to realize the ability to compile and run in native small programs. For example, native applet does not support the use and management of NPM package, etc., of course, the technical details and difficulties at that time were solved and digested by very good colleagues, so I did not go to more details.
Recently, I began to invest in the completion of the small program development iteration, but found a headache, how to accurately and quickly upload the small program to the background, and let the testers test.
The problem
When confronted with multiple developers parallel development of different functional modules of the same small program, often encounter testers need to test, let developers switch to the test branch, build, compile and upload, and finally the two-dimensional code produced after the upload is provided for testing.
If developers are serious about coding, they are struggling for a feature. A QR code that is suddenly interrupted by someone who tells you that you need to provide them with a test environment… .
Because for this QR code, what you need to do is:
- git stash
- git checkout branch
- npm install
- npm run build
- Click “Preview” to generate the TWO-DIMENSIONAL code, or click upload to update the experience version
After providing two-dimensional code out, restore the state of work just
- git checkout branch
- git stash pop
- npm install
- npm run dev
- Keep thinking back to the development ideas you just had
The ideal process
In order not to make developers suffer for the TWO-DIMENSIONAL code of a test environment, I tried to connect gitLab CI with the capabilities of wechat developer tools.
Next, without too much detail on how to manage the project branch, just set the Develop branch as the goal to automatically trigger continuous integration (install dependencies, build, upload to play version) of the applets.
Wechat developer tools
Wechat Developer tool provides 5 interfaces, and provides cli and HTTP calls:
- Command line startup tool
- Cli Login
- Command line commit preview
- Command line upload code
- Support for automated testing
Since the goal is only to upload the code corresponding to the Develop branch to wechat and update it to the experience version, the main interface capability of wechat developer tools is the fourth one (command line upload code).
If it is a functional branch also need to create preview TWO-DIMENSIONAL code, can be achieved through the third interface ability
What is the difference between cli and HTTP calls
Cli way
You can invoke the tool executable file on the CLI to perform operations such as login, preview, upload, and automatic testing. When the call return code is 0, it is normal; when the call return code is -1, it is incorrect. Command line tools location: macOS: < installation path > / Contents/Resources/app. The nw/bin/cli Windows: < installation path > / cli. Bat
The HTTP method
The HTTP service is automatically enabled after the tool is started. The HTTP port number is recorded in the user directory. You can check whether the tool is installed or started by checking the user directory, checking whether port files exist in the user directory, and trying to connect to the user directory. Port number file location: macOS: ~/Library/Application Support/ wechat Web developer tools /Default/.ide Windows: ~/AppData/Local/ wechat Web developer tools /User Data/Default/.ide
To put it bluntly, the CLI can call a command-line tool directly, whereas HTTP needs to find a port before making an interface call, which is more suitable for cross-machine calls. According to my current situation, I choose cli mode.
Setting up the build machine
The company’s Mac Mini-like machines ran out of resources and had to go back to Windows to set up the build machine. But there are still a lot of pits, may be on the one hand is not familiar with Windows. Finally, I chose to install vmware on Windows and run Mac OS on vmware.
Next you need to install GitLab Runner, which is used to run your customized jobs and return the results to GitLab. GitLab Runner coordinates tasks with GitLab CI (continuous integration service built into GitLab). See the referenced article below for details.
The easiest way to install GitLab Runner on a Mac is to use BREW, but you can also download the application package
Brew install gitlab-runner brew services start gitlab-runner install gitlab-runner brew services start gitlab-runner Only need to run directly (do not need to boot automatic operation)Copy the code
After the installation is complete, can undertake runner configuration, mainly to provide gitlab url, project warehouse token, runner tags, etc., details please refer to the Registering Runners | gitlab Chinese documents
gitlab-runner register
Copy the code
Writing CI files
CI file preparation, the most important is to create a project root directory named.gitlab-ci.yml, each line
stages:
- build The overall CI process has only one job: build
before_script:
- shopt -s expand_aliases # open issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1083 expanded aliases
- alias wxcli="/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli" # name the wechat developer tool CLI wxcli
- type wxcli Verify that the wxcli command exists
- wxcli # Start the wechat Developer tool (actually a bit redundant, because if the wechat developer tool is not currently enabled, it will be enabled in wxCLI -u)
- source ~/.bash_aliases Alias # read characteristics, such as the configuration of NVM, issue at https://gitlab.com/gitlab-org/gitlab-runner/issues/1958
- npm install # install dependencies
# Test environment
test-build:
stage: build # Corresponds to the job name on stages
script:
- npm run build
- curr_commit_content=`git log - 1 --pretty=format:%s` Get the most recently committed Git content
- curr_version=`node -p "require('./package.json').version"` Get the version number of package
- curr_proj_path=`pwd` # Current project path
- wxcli -u $curr_version@$curr_proj_path --upload-desc $curr_commit_content # Submit to wechat developers
- After uploading successfully, you can try to send some notification to remind people to open the new version, such as The Nail webhook
only:
- develop
tags:
- xxx_mp
Copy the code
Viewing build results
It is also easy to view the build results directly on the CI/CD — Pipeline in the GitLab warehouse
Testers and experience personnel can view the latest experience version on the small program development assistant (remember to set the version uploaded by the CI user as the experience version in the background of wechat small program)
Really do not go to do repetitive work, too affect the mood.
reference
GitLab Chinese document
GitLab Runner | GitLab Chinese documents
Whether the small program of wechat can be integrated through Jenkins
How do applets do continuous integration?
How do applets use continuous integration tools
Gitlab-ci wechat applets for continuous integration and continuous deployment
Command line call · applets
draw.io