注:文中xxx为可自己任意修改的名字。
主要是围绕两个npm包;
小程序自动上传:upload_wx_code;
uni-app自动打包(可配置自动上传):uni-app-smart-build;
两个包的产生背景:
首先公司的项目是做社区电商的系统,每次需要批量更新一些bug的时候,都需要一个一个手动去更新客户站点,同时更新小程序和H5的话,由于站点太多的关系,会因此产生大量的工作量,也不符合程序员身份的重复工作,upload_wx_code 和 uni-app-smart-build因此产生;
upload_wx_code 微信小程序代码自动上传
使用:npm install upload_wx_code
const uploadCode = require('upload_wx_code');
const parmas = {
keyFileListPath:'D:/xxx/xxx',
buildFileListPath:'D:/xxx/xxx'
}
const reslute = uploadCode(parmas);//node xxx.js 执行
console.log(reslute,'返回上传结果')
参数详细介绍
| 字段 | 是否必传 | 参数示例 | 说明 |
|---|---|---|---|
| keyFileListPath | 是 | D:/xxx/xxx | 代码上传秘钥文件 |
| buildFileListPath | 是 | D:/xxx/xxx | 已打包好wx代码 |
keyFileListPath:下载好的微信小程序代码上传秘钥绝对路径
-
代码上传秘钥文件在那里?
微信公众平台 > 登录小程序 > 开发管理 > 开发设置 > 小程序代码上传栏目 > 生成秘钥 > 下载
-
除了代码上传秘钥之外还需要什么么?
关闭你的代码上传白名单设置
微信公众平台 > 登录小程序 > 开发管理 >开发设置 >
小程序代码上传栏目 > 把白名单按钮从绿色变成灰色。
-
注意事项
必须保证 参数里提供的代码上传秘钥在绝对路径里面
buildFileListPath:已打包好wx代码的绝对路径
-
具体的绝对路径
通常来说,一个wx小程序的包打出来的话 在 dist/build/mp-weixin下是最后打包的内容,而我们在取绝对路径参数的时候,需要把mp-weixin去掉,就可以赋值给buildFileListPath
例如:D:/xxx/xxx/dist/build/mp-weixin >> D:/xxx/xxx/dist/build
-
主要事项
包内使用的appid必须和上传秘钥文件一致,否则无法上传;
uni-app-smart-build 微信小程序自动打包
介绍
这个自动打包还是先来个介绍,因为前置条件必不可少。
首先的话,此包只能在 # vue create -p dcloudio/uni-preset-vue 项目名 #安装的cli下去执行,主要原因是HBuilder下限制太多,无法去实现这类功能。
具体使用参考www.jianshu.com/p/74c06e649… 该cli的主要作用是可以在vscode上做一些 Hbuider上才能做的事情,使用vs code开发uni更加方便。
使用 npm install uni-app-smart-build
const build = require('uni-app-smart-build');
const buildPath = {
projectName:'testProject',
wx:true,//是否打包wx
h5:true,//是否打包h5
options:{
log:true,//是否要输出打包完后信息,如果为true,就会在当前执行文件下生成一个 results.json 文件用来展示目录,
wxKeyPath:'D:/xx/xx',//微信上传秘钥文件
H5compressing:true,//是否要压缩打包后的h5
},
};
build(buildPath);//现在你离成功只差 一个node xxx.js
| 字段 | 是否必传 | 示例 | 说明 |
|---|---|---|---|
| projectName | true | testProject | 打包的项目名,最后打包结果会生成在dist/项目名下 |
| wx | true | true | 是否打包微信 |
| h5 | true | true | 是否打包h5 |
| options | false | {} | 关于wx和h5打包后的一些配置 |
| options/log | false | true | 是否生成打包成功后的结果文件 |
| options/wxKeyPath | false | D:/xx/xx | 传路径即为自动上传打包完后的wx小程序代码,不传则跳过wx代码上传步骤 |
| options/H5compressing | false | true | 是否要压缩打包完后的h5代码 |
规则
为了方便理解,下面贴截图解释。
必须在cli的根目录下创建文件夹,然后在新创建的文件夹内创建xxx.js,并根据自己的需求改写示例代码 写入xxx.js,然后在创建的文件夹里打开终端并且node xxx.js。
最后的最后
该篇文章目前只介绍如何成功使用,如果想看如何实现的话,可以去看源码仓库。
微信代码自动上传 :gitee.com/Z2105873459…
uni-app自动打包:gitee.com/Z2105873459…
任何使用问题可添加 wx:Z2105873459 无偿,你的问题就是我的问题,奥利给!
整体来看的话,这两个包使用还是很简单,有需要代码可自己拉下来根据业务需求二开。