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

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

一、npm 编译uni-app 代码

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

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

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

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

因为网络原因，初始化项目失败

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

package.json 是这样子的

尝试运行下命令

npm i
npm run dev:mp-weixin

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

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

尝试修改下代码

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

{"name": "uni-preset-vue","version": "0.0.0","scripts": {"dev:mp-weixin": "uni -p mp-weixin","build:mp-weixin": "uni build -p mp-weixin"},"dependencies": {"@dcloudio/uni-app": "^3.0.0-alpha-3041820220630001","@dcloudio/uni-app-plus": "^3.0.0-alpha-3041820220630001","@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3041820220630001","vue": "^3.2.33","vue-i18n": "^9.1.9","vuex": "^4.0.2"},"devDependencies": {"@dcloudio/types": "^3.0.4","@dcloudio/uni-automator": "^3.0.0-alpha-3041820220630001","@dcloudio/uni-cli-shared": "^3.0.0-alpha-3041820220630001","@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3041820220630001","vite": "^2.9.6"}
}

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

二、打开微信开发工具

打开微信开发工具官方api

按照上面的操作一下

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

成功执行了

编写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 使用方法同学们自行查询官方文档）

uni-app 开发微信小程序自动化编译，启动项目相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
uni.app开发物联网小程序
1.当切换页面的时候,容易与mqtt服务器断开连接,并报错原因:在onLoad事件中,获取参数的时候使用异步获取,但是在事件里面还使用了这个参数,导致mqtt发布的时候,发了一个空主题,导致连接被断 ...
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
开发APP、微信小程序、网页,都需要什么？
开发APP,微信小程序,网页都需要什么? 准备工作前端开发后端开发技术整合打包上线结语在开始介绍之前,我先罗列一下APP,微信小程序,网页的大比较准备工作云服务器,域名(需备案),SS ...
uniapp一套代码开发app和微信小程序
为什么选择uniapp开发? 为什么选择uniapp进行开发? 1.uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的 ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...

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

uni-app 开发微信小程序自动化编译，启动项目相关推荐

最新文章

热门文章

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

uni-app 开发微信小程序 自动化编译，启动项目相关推荐

最新文章

热门文章

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

uni-app 开发微信小程序自动化编译，启动项目相关推荐