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:

  1. Command line startup tool
  2. Cli Login
  3. Command line commit preview
  4. Command line upload code
  5. 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