uni-app cli develops automatic compilation of WeChat applets and starts projects

  I recently developed a uni-app small program project. Because I am used to using vscode, the project has to use hbuderx to run, WeChat development tools to debug, and occasionally I need to use the ios simulator. The mac with 8g memory becomes abnormally stuck, so I studied it Under the command of npm to compile, run and other engineering configurations, so that there is no need to run hbuderx to reduce memory usage, by the way, record the process from requirements to perfect functions, as well as problems encountered and solutions.

1. Npm compiles uni-app code 

Open the uni-app official document to find engineering-related documents

 It is more in line with my needs, download the demo according to the official document and try

Because vue-cli has been installed before, we skip it here, and choose the official version in the second step

vue create -p dcloudio/uni-preset-vue my-project

 Failed to initialize the project due to network reasons

 Try gitee to download the template directly to get a project with such a file structure 

package.json looks like this

 try to run the following command

npm i

npm run dev:mp-weixin

 The compilation is successful, and a dist folder appears in the root directory of the project. Obviously this is the compiled WeChat applet project code 

Not much nonsense, just use WeChat development tools to open it

 Try to modify the code

 We delete useless commands to get such a package.json

In this way, we have implemented the WeChat applet project developed by uni-app through npm run dev:mp-weixin, and then check the automation api documentation of the WeChat development tool to realize the project that automatically opens our dist directory.

2. Open the WeChat development tool

Open the official api of WeChat development tools

 Follow the above operation

npm i miniprogram-automator --save-dev

Write openWeixin.js

const automator = require('miniprogram-automator')


automator.launch({

cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项

projectPath: 'path/to/project', // 项目文件地址

}).then(async miniProgram => {

const page = await miniProgram.reLaunch('/page/component/index')

await page.waitFor(500)

const element = await page.$('.kind-list-item-hd')

console.log(await element.attribute('class'))

await element.tap()


await miniProgram.close()

})

Change the project address to the generated dist directory

const automator = require('miniprogram-automator')


automator.launch({

cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项

projectPath: './dist/dev/mp-weixin', // 项目文件地址

}).then(async miniProgram => {

// 打开后的回掉看自己需求编写

})

execute it

node openWeixin.js

successfully executed

Write package.json script command

"scripts": {

"open": "node openWeixin",

"serve": "npm-run-all --parallel dev:mp-weixin open --continue-on-error"

}

Execute npm run serve (npm-run-all is a package that executes multiple commands. I tried && and found that it will report an error, so I found npm-run-all to achieve it. How to use npm-run-all, students can check the official website by themselves document)