小程序代码一键上传,告别慢吞吞的开发者工具

·  阅读 1419
小程序代码一键上传,告别慢吞吞的开发者工具

image.png

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

我们现在还能借助微信开发者工具提供的 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 白名单。

image (1).png

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

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

node upload.js
复制代码

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

image (2).png

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

image (8).png

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

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

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

image (3).png

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

image (4).png

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

我们注意到,uploadAPI有提供一个上传进度更新监听函数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,
})
复制代码

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

image (5).png

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

image (6).png

最后

我们来看下完整的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);
    }
})()
复制代码

整个目录结构

image (7).png

工程也已上传到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 \
复制代码

来波点赞、关注呗。欢迎加微信交流。🤡

WechatIMG502.jpeg

分类:
前端
收藏成功!
已添加到「」, 点击更改