使用 miniprogram-ci 进行小程序代码的上传、预览等操作

简介

miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。

开发者可不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

详见微信官方文档.小程序 > 开发辅助 > CI

准备工作

使用 miniprogram-ci 前应在微信公众平台登录小程序，访问“开发-开发管理-开发设置”后下载“代码上传密钥”，并配置 IP 白名单。

开发者可选择打开 IP 白名单，打开后只有白名单中的 IP 才能调用相关接口。

代码上传密钥拥有预览、上传代码的权限，密钥不会明文存储在微信公众平台上，一旦遗失必须重置，请开发者妥善保管

nodejs脚本方式实现上传

1. 创建目录

新建文件夹minitool，并将代码上传密钥文件private.wxxxxxxxxxxx.key复制到该目录

2. 安装 miniprogram-ci

进入目录minitool，执行以下命令，为项目安装miniprogram-ci模块

npm install miniprogram-ci --save

3. 实现上传功能

3.1 编写upload.js代码

const ci = require('miniprogram-ci')
;(async () => {
    const project = new ci.Project({
	    appid: 'wxxxxxxxxxxxxxx',
	    type: 'miniProgram',
	    projectPath: 'D:\\workspace\\project',
	    privateKeyPath: 'private.wxxxxxxxxxxx.key',
	    ignores: ['node_modules/**/*'],
    })
    const uploadResult = await ci.upload({
        project,
        version: '1.0.0',
        desc: '第1版',
        setting: {
            es6: true, // es6 转 es5
            es7: true, // 增强编译
            disableUseStrict: true,
            autoPrefixWXSS: true, // 上传时样式自动补全
            minifyJS: true,
            minifyWXML: true,
            minifyWXSS: true,
        },
    })
    console.log(uploadResult)
})()

3.2 通过node命令执行upload.js

node upload.js

3.3 检查代码是否已顺利上传

在小程序页面 > 管理 > 版本管理中，检查代码是否顺利上传

4. 实现预览功能

4.1 编写preview.js代码

const ci = require('miniprogram-ci')
;(async () => {
    const project = new ci.Project({
	    appid: 'wxxxxxxxxxxxxxx',
	    type: 'miniProgram',
	    projectPath: 'D:\\workspace\\project',
	    privateKeyPath: 'private.wxxxxxxxxxxx.key',
	    ignores: ['node_modules/**/*'],
    })
    const uploadResult = await ci.upload({
        project,
        version: '1.0.0',
        desc: '第1版',
        setting: {
            es6: true, // es6 转 es5
            es7: true, // 增强编译
            disableUseStrict: true,
            autoPrefixWXSS: true, // 上传时样式自动补全
            minifyJS: true,
            minifyWXML: true,
            minifyWXSS: true,
        },
        qrcodeFormat: 'image',
        qrcodeOutputDest: 'destination.jpg',
        // pagePath: 'pages/index/index', // 预览页面
        // searchQuery: 'a=1&b=2',  // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
        // scene: 1011, // 场景值
    })
    console.log(previewResult)
})()

4.2 通过node命令执行preview.js

node preview.js

4.3 预览小程序

打开destination.jpg，扫码查看。

5. 获取本地编译后的代码包

5.1 编写compile.js代码

const ci = require('miniprogram-ci')
const path = require('path')
;(async () => {
    const project = new ci.Project({
        appid: 'wxxxxxxxxxxx',
        type: 'miniProgram',
        projectPath: 'D:\\workspace\\project',
        privateKeyPath: 'private.wxxxxxxxxxxx.key',
        ignores: ['node_modules/**/*'],
    })

    // zip 文件保存位置
    const saveZipPath = path.join(__dirname, 'compiledResult.zip')

    const compiledResult = await ci.getCompiledResult({
        project,
        version: '1.0.0',
        desc: '第1版',
        setting: {
            es6: true, // es6 转 es5
            es7: true, // 增强编译
            disableUseStrict: true,
            autoPrefixWXSS: true, // 上传时样式自动补全
            minifyJS: true,
            minifyWXML: true,
            minifyWXSS: true,
        },
    }, saveZipPath)

    console.log(compiledResult)
})()

5.2 通过node命令执行compile.js

node compile.js

5.3 检查代码是否已顺利上传

确认根目录中是否存在compiledResult.zip，解压查看文件内容