简介

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 转 es5es7: 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 转 es5es7: 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 转 es5es7: 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，解压查看文件内容

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

微信小程序入门（四）：miniprogram-ci + Jenkins + git 实现小程序代码的上传等操作
目录 1. 实现要求 2. 实现方式一 2.1 Jenkins中其他配置这里不重复了,重点说构建部分的命令 2.2 Jenkins中运行构建任务,在小程序页面检查上传结果,没问题 3. 实现方式二 3 ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...

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

简介