微信小程序自动上传代码&uni-app自动打包

3,439 阅读4分钟

注:文中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,'返回上传结果')

参数详细介绍

字段是否必传参数示例说明
keyFileListPathD:/xxx/xxx代码上传秘钥文件
buildFileListPathD:/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
字段是否必传示例说明
projectNametruetestProject打包的项目名,最后打包结果会生成在dist/项目名下
wxtruetrue是否打包微信
h5truetrue是否打包h5
optionsfalse{}关于wx和h5打包后的一些配置
options/logfalsetrue是否生成打包成功后的结果文件
options/wxKeyPathfalseD:/xx/xx传路径即为自动上传打包完后的wx小程序代码,不传则跳过wx代码上传步骤
options/H5compressingfalsetrue是否要压缩打包完后的h5代码

规则

为了方便理解,下面贴截图解释。

image.png

必须在cli的根目录下创建文件夹,然后在新创建的文件夹内创建xxx.js,并根据自己的需求改写示例代码 写入xxx.js,然后在创建的文件夹里打开终端并且node xxx.js。

最后的最后

该篇文章目前只介绍如何成功使用,如果想看如何实现的话,可以去看源码仓库。

微信代码自动上传 :gitee.com/Z2105873459…

uni-app自动打包:gitee.com/Z2105873459…

任何使用问题可添加 wx:Z2105873459 无偿,你的问题就是我的问题,奥利给!

整体来看的话,这两个包使用还是很简单,有需要代码可自己拉下来根据业务需求二开。