小程序代码一键上传，告别慢吞吞的开发者工具 - WXOPEN Club

如上，除了在开发者工具里上传代码，

我们现在还能借助微信开发者工具提供的 miniprogram-ci 库，实现一键上传。

这对需要批量上传多个工程代码，提供了极大的便捷。

我们来尝试下。

新建一个upload.js文件，存放我们的上传脚本

touch upload.js

引入miniprogram-ci库

npm i miniprogram-ci --save

在代码里引入

const ci = require('miniprogram-ci');

借助miniprogram-ci库提供的uploadAPI，我们来写下：

; (async () => {
    const project = new ci.Project({
        appid: 'xxx',
        type: 'miniProgram',
        projectPath: 'the/path/to/project',
        privateKeyPath: 'the/path/to/privatekey',
        ignores: ['node_modules/**/*'],
    })
    const uploadResult = await ci.upload({
        project,
        version: '版本号',
        desc: '项目备注',
        setting: {
            es6: true,
        },
        onProgressUpdate: console.log,
    })
    console.log('uploadResult:', uploadResult);
})()

这里有几个参数需要说明下：

appid是需要上传的小程序的appid
projectPath填写工程所在的目录
privateKeyPath填写秘钥所在目录
version和desc对应图一截图里的版本号和项目备注

到这一步，我们上传代码的脚本，已经万事俱备了，还差一阵东风。

我们需要搞到，上传的秘钥，也就是上文提到的privateKeyPath。

使用小程序管理员身份访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单。

这里我不开启ip白名单，方便测试，但您务必明白风险。

OK，我们来执行下uplaod.js脚本。

node upload.js

当看到控制台输出如下信息后，即表示已成功上传。

登录小程序后台，我们也能看到本次的提交记录了。

至此，我们已初步跑通小程序代码上传的脚本。

执行上传脚本的过程，实际是会对工程代码做 预编译检查。

比如我们在工程代码里，故意定义两个同名的变量。

会在执行脚本的时候报错如下：

回看之前的上传脚本，有一个细节还是可以值得优化下。

我们注意到，upload的API有提供一个上传进度更新监听函数onProgressUpdate。

上述的代码，只是简单接入console.log，把进度输出到控制台。

我们可以优化下：

定义一个回调函数cb，实现两个功能：

对过回调里的字符串做过滤，记录上传的“文件名”。
如有报错，标识出来

来看代码（其中借助kuler库做字符串着色）：

const uploadSucFiles = [];
let haveError = false;

const cb = output => {
    if (haveError) return;

    if (!!output.code) {
        haveError = true;
        console.log(output);
        console.log(kuler('something wrong is happened.pleace check.', '#ff4d4f'));
        return;
    }

    const allowSuffixs = ['js', 'json', 'wxml', 'wxss', 'ts', 'less', 'sass'];
    const curSuffix = output._msg.slice(output._msg.lastIndexOf('.') + 1);

    // 按后缀筛选 _msg
    if (
        allowSuffixs.indexOf(curSuffix) >= 0
        &&
        output._status === 'done'
    ) {
        uploadSucFiles.push(`${output._msg} ${kuler('is uploaded.', '#2da44e')}`);
        // clear terminal output
        console.clear();
        console.log(uploadSucFiles.join('\n'));
    }
};

// 调用
const uploadResult = await ci.upload({
    project,
    version: '版本号',
    desc: '项目备注',
    setting: {
        es6: true,
    },
    onProgressUpdate: cb,
})

修饰后的控制台输出，如下截图，有点打包上传的那味了😛。

出错时，直接打印调用栈，红色提示

最后

我们来看下完整的upload.js文件。

const ci = require('miniprogram-ci');
const kuler = require('kuler');

const uploadSucFiles = [];
let haveError = false;

const cb = output => {
    if (haveError) return;

    if (!!output.code) {
        haveError = true;
        console.log(output);
        console.log(kuler('something wrong is happened.pleace check.', '#ff4d4f'));
        return;
    }

    const allowSuffixs = ['js', 'json', 'wxml', 'wxss', 'ts', 'less', 'sass'];
    const curSuffix = output._msg.slice(output._msg.lastIndexOf('.') + 1);

    // 按后缀筛选 _msg
    if (
        allowSuffixs.indexOf(curSuffix) >= 0
        &&
        output._status === 'done'
    ) {
        uploadSucFiles.push(`${output._msg} ${kuler('is uploaded.', '#2da44e')}`);
        // clear terminal output
        console.clear();
        console.log(uploadSucFiles.join('\n'));
    }
};

; (async () => {
    try {
        const project = new ci.Project({
            appid: 'wx202120212021',
            type: 'miniProgram',
            projectPath: './wx202120212021',
            privateKeyPath: './private.wx202120212021.key',
            ignores: ['node_modules/**/*'],
        })
        const uploadResult = await ci.upload({
            project,
            version: '版本号',
            desc: '项目备注',
            setting: {
                es6: true,
            },
            onProgressUpdate: cb,
        })
        // console.log('uploadResult:', uploadResult);
        console.log('\n');
        console.log(`${kuler('upload success~', '#ff5722')} 🎉🥳`);
    } catch (error) {
        cb(error);
    }
})()

整个目录结构

工程也已上传到github了，看这里miniprogram-ci-onestep。

clone下来后，需要自行替换对应的文件名和上传秘钥。

另外

miniprogram-ci库除了支持 node 脚本调用方式，还支持命令行调用。

安装

npm install -g miniprogram-ci

示例

miniprogram-ci \
  upload \
  --pp ./demo-proj/ \
  --pkp ./private.YOUR_APPID.key \
  --appid YOUR_APPID \
  --uv PACKAGE_VERSION \
  -r 1 \
  --enable-es6 true \