uni-app cli 开发微信小程序自动化编译，启动项目

悠悠 2023-10-11 22:01 10阅读 0赞

最近开发一个uni-app的小程序项目，因为习惯使用vscode 而项目不得不借助hbuderx 运行，微信开发工具调试，偶尔还需要使用 ios模拟器， 8g内存的mac 就变的异常卡顿，所以就研究了下通过npm命令去编译、 运行等工程化配置, 这样就不用运行hbuderx 减少内存使用，顺便 记录下从需求到完善功能的过程，以及遇到的问题，解决的方案。

**一、npm 编译uni-app 代码**

打开uni-app 官方文档寻找工程化相关的文档

![300305d8922e44ed81f2e90f2f3704c9.png][]

比较符合我的需求，按照官方文档下载demo尝试

![65483070d2104ed2a12d2805af4d2af2.png][]

因为之前已经安装过vue-cli 这里我们直接跳过，第二步选择正式版

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

因为网络原因，初始化项目失败![277b406c36424249afa7ce2a24bdbb61.png][]

尝试gitee 直接下载模版， 得到这样一个文件结构的项目

![b32658b8546e45078eaa1208e0285855.png][]

package.json 是这样子的

![6e1b3b2d212d4ee0be9bb57de503f2fe.png][]

尝试运行下命令

npm i
    
    npm run dev:mp-weixin

![29fefa2371f343f7a9cf74c43c0c6fef.png][] 编译成功了，项目根目录下出现了一个dist 文件夹， 显然这是个编译过后的微信小程序项目代码

![7bde0ba075764d78a3af08262bdcc638.png][]

废话不多少 直接使用微信开发工具打开看看

![5213cba5b1b04c168f97eeaad9eee421.png][]

尝试修改下代码

![206b9dc2e0d542e8be17d34705126c0c.png][]

![780642d2c61a498fb10d6f494425a9d2.png][]

我们删除无用的命令得到这样一个package.json

这样我们就实现了通过 npm run dev:mp-weixin 去编译uni-app 开发的微信小程序项目了，接下来查看微信开发工具的自动化api 文档 去实现自动打开我们的dist 目录的项目就ok了

**二、打开微信开发工具**

打开微信开发工具官方api

![cd8d30106ea647f5933950133eeaa707.png][]

按照上面的操作一下

npm i miniprogram-automator --save-dev

编写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()
    
    })

更改项目地址到生成的dist 目录

const automator = require('miniprogram-automator')
    
    
    automator.launch({
    
    cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
    
    projectPath: './dist/dev/mp-weixin', // 项目文件地址
    
    }).then(async miniProgram => {
    
    // 打开后的回掉看自己需求编写
    
    })

执行一下

node openWeixin.js

成功执行了

![780642d2c61a498fb10d6f494425a9d2.png][]

编写package.json script 命令

"scripts": {
    
    "open": "node openWeixin",
    
    "serve": "npm-run-all --parallel dev:mp-weixin open --continue-on-error"
    
    }

执行 npm run serve 就可以了 （npm-run-all 执行多个命令的包，我尝试了&& 发现会报错 所以找到的npm-run-all 来实现， npm-run-all 使用方法同学们自行查询官方文档）

[300305d8922e44ed81f2e90f2f3704c9.png]: https://img-blog.csdnimg.cn/300305d8922e44ed81f2e90f2f3704c9.png
[65483070d2104ed2a12d2805af4d2af2.png]: https://img-blog.csdnimg.cn/65483070d2104ed2a12d2805af4d2af2.png
[277b406c36424249afa7ce2a24bdbb61.png]: https://img-blog.csdnimg.cn/277b406c36424249afa7ce2a24bdbb61.png
[b32658b8546e45078eaa1208e0285855.png]: https://img-blog.csdnimg.cn/b32658b8546e45078eaa1208e0285855.png
[6e1b3b2d212d4ee0be9bb57de503f2fe.png]: https://img-blog.csdnimg.cn/6e1b3b2d212d4ee0be9bb57de503f2fe.png
[29fefa2371f343f7a9cf74c43c0c6fef.png]: https://img-blog.csdnimg.cn/29fefa2371f343f7a9cf74c43c0c6fef.png
[7bde0ba075764d78a3af08262bdcc638.png]: https://img-blog.csdnimg.cn/7bde0ba075764d78a3af08262bdcc638.png
[5213cba5b1b04c168f97eeaad9eee421.png]: https://img-blog.csdnimg.cn/5213cba5b1b04c168f97eeaad9eee421.png
[206b9dc2e0d542e8be17d34705126c0c.png]: https://img-blog.csdnimg.cn/206b9dc2e0d542e8be17d34705126c0c.png
[780642d2c61a498fb10d6f494425a9d2.png]: https://img-blog.csdnimg.cn/780642d2c61a498fb10d6f494425a9d2.png
[cd8d30106ea647f5933950133eeaa707.png]: https://img-blog.csdnimg.cn/cd8d30106ea647f5933950133eeaa707.png