微信小程序发布​

微信小程序发布 ​介绍 ​微信小程序是腾讯推出的轻量级应用形态,无需下载安装即可使用,具有接近原生应用的体验。RuoYi-Plus-UniApp 通过 UniApp 框架实现一套代码编译为微信小程序,提供完整的开发、调试、发布流程支持。本文档详细介绍从开发环境准备到正式发布上线的完整部署流程。

核心特性:

完整工具链 - 微信开发者工具集成,支持预览、调试、上传多环境支持 - 开发版、体验版、正式版三个版本管理快速构建 - Vite 构建工具,编译速度快,支持增量更新代码优化 - 自动分包、Tree-shaking、代码压缩等优化策略安全保障 - API 加密传输、权限配置、域名白名单管理自动化发布 - 支持 CI/CD 自动化发布流程前置准备 ​注册小程序账号 ​1. 注册流程 ​访问微信公众平台: https://mp.weixin.qq.com/点击"立即注册" → 选择"小程序"填写邮箱、密码、验证码邮箱激活验证选择主体类型(个人/企业/政府/媒体)主体信息登记(企业需营业执照、对公账户)管理员微信扫码验证注意事项:

一个邮箱只能注册一个小程序个人主体小程序无法开通支付功能企业主体需要对公账户打款验证或微信认证(300元/年)2. 获取小程序信息 ​注册完成后,在小程序管理后台获取关键信息:

开发设置 → 开发者ID:

textAppID(小程序ID): wx1234567890abcdef

AppSecret(小程序密钥): a1b2c3d4e5f678901234567890123456712⚠️ 重要:

AppID 用于小程序身份标识,需要配置到项目中AppSecret 用于服务端 API 调用,务必保密,不要提交到代码仓库安装微信开发者工具 ​1. 下载安装 ​官方下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

支持平台: Windows (64位) / macOS (Intel/Apple Silicon) / Linux (Ubuntu/Debian)

版本要求: 稳定版(Stable),最低版本 v1.06.0+

2. 登录开发者工具 ​启动微信开发者工具使用小程序管理员/开发者微信扫码登录选择"小程序项目"角色权限:

角色开发权限上传代码发布体验版提交审核发布正式版管理员✅✅✅✅✅开发者✅✅✅❌❌体验者❌❌❌❌❌开发环境准备 ​1. 安装 Node.js 和 pnpm ​bash# 检查 Node.js 版本(需要 ≥18.0.0)

node -v

# 安装 pnpm(需要 ≥7.30)

npm install -g pnpm123452. 克隆项目代码 ​bashgit clone https://gitee.com/bkywksj/ruoyi-plus-uniapp-workflow.git

cd ruoyi-plus-uniapp-workflow/plus-app

pnpm install1233. 配置小程序 AppID ​编辑 manifest.json 文件:

json{

"mp-weixin": {

"appid": "wx1234567890abcdef",

"setting": {

"urlCheck": false,

"es6": true,

"postcss": true,

"minified": true

},

"usingComponents": true,

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于小程序位置服务"

}

}

}

}12345678910111213141516174. 配置环境变量 ​开发环境 env/.env.development:

bashVITE_APP_ENV='development'

VITE_APP_BASE_API='http://127.0.0.1:5500'

VITE_APP_PLATFORM='mp-weixin'

VITE_DELETE_CONSOLE=false

VITE_SHOW_SOURCEMAP=true12345生产环境 env/.env.production:

bashVITE_APP_ENV='production'

VITE_APP_BASE_API='https://api.example.com'

VITE_APP_PLATFORM='mp-weixin'

VITE_DELETE_CONSOLE=true

VITE_SHOW_SOURCEMAP=false12345公共配置 env/.env:

bashVITE_APP_ID='ryplus_uni_workflow'

VITE_APP_TITLE='RuoYi-Plus'

VITE_APP_API_ENCRYPT='true'

VITE_APP_RSA_PUBLIC_KEY='MFwwDQYJKoZIhvcNAQEBBQAD...'

VITE_APP_RSA_PRIVATE_KEY='MIIBOwIBAAJBAIrZxEhzVAHK...'12345本地开发 ​启动开发服务器 ​bashcd ruoyi-plus-uniapp-workflow/plus-app

pnpm dev:mp-weixin12输出信息:

textvite v6.3.5 building for development...

✓ built in 3.2s

小程序开发目录: dist/dev/mp-weixin123微信开发者工具导入项目 ​打开微信开发者工具点击"+"或"导入项目"项目目录: 选择 dist/dev/mp-weixin 目录AppID: 选择你的小程序 AppID点击"导入"开发者工具配置:

详情 → 本地设置:

✅ 不校验合法域名、web-view、TLS版本✅ 启用调试(显示 vConsole)✅ 开启热重载调试方式 ​1. 模拟器调试 ​支持多种机型切换和场景值模拟,启动快速。

typescript// 查看 console 输出

console.log('调试信息', data)

// 查看页面栈

const pages = getCurrentPages()

console.log('当前页面', pages[pages.length - 1])1234562. 真机调试 ​工具栏 → 预览 → 真机调试手机微信扫码允许调试授权调试技巧:

typescript// 条件编译:仅小程序输出日志

// #ifdef MP-WEIXIN

console.log('微信小程序专用日志')

// #endif12343. 预览二维码 ​工具栏 → 预览 → 生成预览二维码,微信扫码直接体验,无需上传代码,二维码有效期 24 小时。

热更新开发 ​Vite 构建工具支持热模块替换(HMR),修改代码后自动编译刷新。

修改类型刷新方式保留状态JS/TS 逻辑热更新✅ 保留Vue 模板热更新✅ 保留CSS 样式热更新✅ 保留配置文件完全刷新❌ 重置生产构建 ​构建命令 ​bashpnpm build:mp-weixin1构建流程:

text1. 加载生产环境变量(.env.production)

2. TypeScript 类型检查

3. Vite 编译打包

4. 条件编译处理(仅保留 MP-WEIXIN 代码)

5. Tree-shaking 移除未使用代码

6. 代码压缩混淆(esbuild)

7. 移除 console 和 debugger

8. 生成构建产物(dist/build/mp-weixin)12345678构建产物结构 ​textdist/build/mp-weixin/

├── app.js # 小程序主逻辑

├── app.json # 小程序配置

├── app.wxss # 全局样式

├── project.config.json # 项目配置

├── pages/ # 页面目录

├── components/ # 组件目录

├── static/ # 静态资源

└── common/ # 公共资源

├── vendor.js # 第三方库

└── runtime.js # 运行时代码1234567891011分包配置 ​json{

"pages": [

"pages/index/index",

"pages/login/index"

],

"subPackages": [

{

"root": "pages-sub/user",

"pages": ["profile/index", "settings/index"]

},

{

"root": "pages-sub/order",

"pages": ["list/index", "detail/index"]

}

]

}12345678910111213141516分包优势:

主包体积更小,首屏加载快按需加载分包,节省流量突破主包 2MB 限制,分包可达 20MB代码质量检查 ​bash# 类型检查

pnpm type-check

# 代码检查

pnpm lint

# 自动修复

pnpm lint:fix12345678构建前检查清单:

[ ] TypeScript 类型检查通过[ ] ESLint 代码检查通过[ ] API 接口地址正确(生产环境)[ ] AppID 配置正确[ ] console 已移除(生产环境)上传代码 ​使用开发者工具上传 ​bash# 确保已完成生产构建

pnpm build:mp-weixin12操作步骤:

工具栏 → 上传填写版本号(如 1.0.0)和项目备注点击"上传"等待上传成功版本号规范:

text主版本号.次版本号.修订号

1.0.0 - 初始版本

1.1.0 - 新增功能

1.1.1 - 修复 Bug

2.0.0 - 重大更新123456上传限制:

主包大小: ≤ 2MB分包大小: 单个 ≤ 2MB小程序总大小: ≤ 20MB使用命令行上传 ​1. 安装 miniprogram-ci ​bashnpm install -g miniprogram-ci12. 获取上传密钥 ​小程序管理后台 → 开发设置 → 小程序代码上传密钥生成密钥 → 下载 private.key保存到项目根目录(不要提交到 Git)3. 创建上传脚本 ​创建 scripts/upload-weixin.js:

javascriptconst ci = require('miniprogram-ci')

const path = require('path')

const package = require('../package.json')

;(async () => {

const project = new ci.Project({

appid: 'wx1234567890abcdef',

type: 'miniProgram',

projectPath: path.resolve(__dirname, '../dist/build/mp-weixin'),

privateKeyPath: path.resolve(__dirname, '../private.key'),

ignores: ['node_modules/**/*'],

})

try {

console.log('开始上传小程序代码...')

const uploadResult = await ci.upload({

project,

version: package.version,

desc: `版本${package.version}`,

setting: {

es6: true, es7: true, minify: true,

minifyJS: true, minifyWXML: true, minifyWXSS: true,

},

})

console.log('上传成功!', uploadResult.version)

} catch (error) {

console.error('上传失败:', error)

process.exit(1)

}

})()1234567891011121314151617181920212223242526272829304. 添加上传命令 ​json{

"scripts": {

"upload:weixin": "node scripts/upload-weixin.js",

"deploy:weixin": "pnpm build:mp-weixin && pnpm upload:weixin"

}

}123456CI/CD 自动化上传 ​GitHub Actions ​创建 .github/workflows/deploy-weixin.yml:

yamlname: 微信小程序自动部署

on:

push:

tags:

- 'v*'

jobs:

deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

- uses: actions/setup-node@v3

with:

node-version: '18'

- run: npm install -g pnpm

- run: cd plus-app && pnpm install

- run: cd plus-app && pnpm build:mp-weixin

- name: Upload to WeChat

env:

PRIVATE_KEY: ${{ secrets.WEIXIN_PRIVATE_KEY }}

run: |

cd plus-app

echo "$PRIVATE_KEY" > private.key

pnpm upload:weixin12345678910111213141516171819202122232425配置 Secrets:

GitHub 仓库 → Settings → Secrets → 添加 WEIXIN_PRIVATE_KEY

触发部署:

bashgit tag v1.0.0 && git push origin v1.0.01GitLab CI/CD ​创建 .gitlab-ci.yml:

yamlstages:

- build

- deploy

build-weixin:

stage: build

image: node:18

script:

- npm install -g pnpm

- cd plus-app && pnpm install && pnpm build:mp-weixin

artifacts:

paths:

- plus-app/dist/build/mp-weixin

only:

- tags

deploy-weixin:

stage: deploy

image: node:18

dependencies:

- build-weixin

script:

- npm install -g miniprogram-ci

- cd plus-app

- echo "$WEIXIN_PRIVATE_KEY" > private.key

- node scripts/upload-weixin.js

only:

- tags12345678910111213141516171819202122232425262728版本管理 ​开发版本 ​上传后默认的版本状态,仅开发者可见。

使用场景: 开发过程中的临时版本、功能测试、Bug修复验证

管理操作: 版本管理 → 开发版本 → 预览二维码/设为体验版/提交审核/删除

体验版本 ​供指定的体验者测试,验证功能是否正常。

设置体验版:

版本管理 → 开发版本 → 选择版本点击"设为体验版"生成体验版二维码体验者管理:

成员管理 → 添加成员 → 选择"体验者"角色 → 输入微信号

特点: 同时只能有一个体验版,二维码长期有效

审核版本 ​提交审核后进入审核队列,由微信官方审核。

提交审核:

版本管理 → 开发版本 → 提交审核填写审核信息:功能页面、测试账号、权限配置、补充说明审核时长:

一般审核: 1-3 个工作日加急审核: 2-12 小时(企业每月 3 次)审核状态: 审核中(可撤回) → 审核通过(可发布) / 审核拒绝(修改后重新提交)

线上版本 ​审核通过后可发布为线上版本,所有用户可见。

发布上线: 版本管理 → 审核通过的版本 → 发布 → 确认

版本回退: 版本管理 → 历史版本 → 选择稳定版本 → 回退(每月3次)

版本号管理 ​bash# 自动递增版本号

pnpm version patch # 2.11.0 → 2.11.1

pnpm version minor # 2.11.0 → 2.12.0

pnpm version major # 2.11.0 → 3.0.01234域名配置 ​服务器域名配置 ​小程序只能访问配置的合法域名,需要在管理后台配置白名单。

配置步骤: 开发设置 → 服务器域名 → 修改

域名类型:

类型用途示例request 合法域名API 接口https://api.example.comsocket 合法域名WebSocketwss://ws.example.comuploadFile 合法域名文件上传https://upload.example.comdownloadFile 合法域名文件下载https://cdn.example.com域名要求:

✅ 必须使用 HTTPS/WSS 协议✅ 必须备案(中国大陆域名)✅ 不支持 IP 地址和端口号✅ 每月可修改 5 次,每种类型最多 20 个域名业务域名配置 ​如果小程序中使用 组件嵌入H5页面,需要配置业务域名。

配置步骤:

开发设置 → 业务域名 → 添加输入域名,下载校验文件将校验文件上传到域名根目录保存SSL 证书配置 ​域名必须配置 SSL 证书才能使用 HTTPS。

获取免费 SSL 证书:

Let's Encrypt - 免费,90天有效期,支持自动续期阿里云 SSL 证书 - 免费,1年有效期腾讯云 SSL 证书 - 免费,1年有效期Nginx 配置 SSL:

nginxserver {

listen 443 ssl http2;

server_name api.example.com;

ssl_certificate /etc/ssl/certs/fullchain.pem;

ssl_certificate_key /etc/ssl/private/privkey.pem;

ssl_protocols TLSv1.2 TLSv1.3;

location / {

proxy_pass http://127.0.0.1:5500;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

}

}1234567891011121314权限配置 ​用户信息权限 ​vue

1234567891011121314151617位置权限 ​需要在 manifest.json 中声明:

json{

"mp-weixin": {

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于附近门店查询"

}

}

}

}123456789typescriptuni.getLocation({

type: 'gcj02',

success: (res) => {

console.log('经度', res.longitude, '纬度', res.latitude)

},

fail: (err) => {

if (err.errMsg.includes('auth deny')) {

uni.showModal({

title: '需要位置权限',

content: '请允许访问你的位置信息',

success: (res) => {

if (res.confirm) uni.openSetting()

}

})

}

}

})1234567891011121314151617手机号获取 ​vue

12345678910111213141516171819相机和相册权限 ​typescriptuni.chooseImage({

count: 1,

sizeType: ['compressed'],

sourceType: ['camera', 'album'],

success: (res) => {

const tempFilePath = res.tempFilePaths[0]

// 上传图片

uni.uploadFile({

url: 'https://api.example.com/upload',

filePath: tempFilePath,

name: 'file'

})

}

})1234567891011121314审核规范 ​审核要点 ​必须满足的条件:

功能完整 - 所有功能可正常使用,无死链接信息真实 - 小程序信息与实际功能一致内容合规 - 不涉及违法违规内容隐私保护 - 明确告知用户信息收集用途支付规范 - 使用微信支付,不跳转外部支付不诱导分享/关注 - 不强制用户分享或关注公众号常见拒绝原因:

原因解决方案功能无法使用确保所有功能正常,提供可用测试账号缺少用户协议添加用户协议和隐私政策页面诱导分享移除强制分享逻辑支付不规范接入微信支付,移除第三方支付域名未配置配置服务器域名用户协议和隐私政策 ​小程序必须提供完整的用户协议和隐私政策。

创建协议页面:

textpages/agreement/

├── user-agreement.vue # 用户协议

└── privacy-policy.vue # 隐私政策123用户协议要点:

服务条款的确认服务内容说明用户义务知识产权声明免责声明联系方式隐私政策要点:

信息收集(基本信息、联系方式、位置信息)信息使用(服务提供、体验改善)信息保护(加密传输、访问控制)信息共享(明确不出售用户信息)用户权利(查询、更正、删除、注销)政策更新说明在登录页面引用:

vue

123456789101112131415161718192021222324测试账号准备 ​提交审核时必须提供可用的测试账号。

要求:

可正常登录,无验证码限制权限完整,可访问所有审核功能数据充足,有足够的测试数据长期有效(至少7天以上)审核加急 ​企业认证小程序每月有 3 次加急机会,加急审核时长 2-12 小时。

性能优化 ​包体积优化 ​体积限制: 主包 ≤ 2MB,分包单个 ≤ 2MB,总包 ≤ 20MB

优化策略:

1. 图片优化

场景推荐格式说明图标SVG/IconFont矢量,体积小背景图WebP体积小,质量高照片JPG压缩率高透明背景PNG8比PNG24小2. 代码优化

typescript// ✅ 按需导入

import { ref, computed } from 'vue'

// ❌ 全量导入

import * as Vue from 'vue'123453. 分包预加载

json{

"preloadRule": {

"pages/index/index": {

"network": "all",

"packages": ["pages-sub/user"]

}

}

}123456784. 静态资源 CDN

大图片使用 CDN,小图标可内联 Base64。

加载速度优化 ​1. 骨架屏

vue123456782. 图片懒加载

vue13. 数据预加载

typescript// app.ts

export default {

onLaunch() {

// 预加载用户信息和配置

this.loadUserInfo()

this.loadConfig()

}

}12345678渲染性能优化 ​1. 虚拟列表

对于长列表使用虚拟滚动,只渲染可见区域的元素。

2. 条件渲染

vue

模态框

用户面板123453. 事件节流防抖

typescript// 防抖:搜索输入

const handleSearch = debounce((keyword: string) => {

// 执行搜索

}, 500)

// 节流:滚动事件

const handleScroll = throttle((e: any) => {

// 处理滚动

}, 200)123456789常见问题 ​1. 上传代码失败 ​问题原因: 网络问题、包体积超限、代码错误、权限不足

解决方案:

bash# 检查包体积

pnpm build:mp-weixin

# 清理重新构建

rm -rf dist node_modules/.vite

pnpm install && pnpm build:mp-weixin

# 确认有上传权限(管理后台 → 成员管理)123456782. 真机调试白屏 ​问题原因: API 域名未配置、代码语法错误、网络请求失败

解决方案:

json// 开启 vConsole 查看错误

{

"mp-weixin": {

"setting": {

"debug": true

}

}

}12345678检查域名配置(管理后台 → 服务器域名)查看 vConsole → Network 失败请求3. 审核被拒 ​常见原因及解决:

拒绝原因解决方案功能无法使用检查测试账号、API域名配置缺少用户协议添加协议页面,登录时需勾选同意诱导分享移除强制分享逻辑支付不规范接入微信支付重新提交时填写修改说明:

text已根据审核意见进行如下修改:

1. 添加了用户协议和隐私政策页面

2. 移除了强制分享功能

3. 提供了可用的测试账号12344. 接口请求失败 ​解决方案:

typescriptconst request = (options: any) => {

return new Promise((resolve, reject) => {

uni.request({

...options,

success: (res) => {

if (res.statusCode === 200) resolve(res.data)

else reject(new Error(`HTTP ${res.statusCode}`))

},

fail: (err) => {

let message = '网络请求失败'

if (err.errMsg.includes('timeout')) message = '请求超时'

uni.showToast({ title: message, icon: 'none' })

reject(err)

}

})

})

}12345678910111213141516175. 本地存储数据丢失 ​原因: 超出存储限制(10MB)、用户清理缓存

解决方案:

typescriptconst storage = {

set(key: string, value: any) {

try {

uni.setStorageSync(key, value)

return true

} catch (error) {

// 存储空间不足时清理过期数据

this.clearExpired()

return false

}

},

get(key: string, defaultValue: any = null) {

try {

return uni.getStorageSync(key) || defaultValue

} catch {

return defaultValue

}

}

}

// 重要数据使用服务器存储1234567891011121314151617181920216. 分包加载失败 ​解决方案:

json{

"subPackages": [

{

"root": "pages-sub/user",

"pages": ["profile/index", "settings/index"]

}

]

}12345678确保分包目录存在,单个分包不超过 2MB。

7. 支付失败 ​typescriptconst pay = async (orderId: string) => {

try {

// 后端生成支付参数

const res = await uni.request({

url: 'https://api.example.com/pay/prepay',

method: 'POST',

data: { orderId }

})

const payParams = res.data

// 调起微信支付

await uni.requestPayment({

provider: 'wxpay',

timeStamp: payParams.timeStamp,

nonceStr: payParams.nonceStr,

package: payParams.package,

signType: payParams.signType,

paySign: payParams.paySign,

})

console.log('支付成功')

} catch (error) {

if (error.errMsg.includes('cancel')) {

uni.showToast({ title: '已取消支付', icon: 'none' })

} else {

uni.showToast({ title: '支付失败', icon: 'none' })

}

}

}123456789101112131415161718192021222324252627288. 小程序更新失败 ​typescript// app.ts

export default {

onLaunch() {

this.checkUpdate()

},

checkUpdate() {

const updateManager = uni.getUpdateManager()

updateManager.onUpdateReady(() => {

uni.showModal({

title: '更新提示',

content: '新版本已准备好,是否重启应用?',

success: (res) => {

if (res.confirm) updateManager.applyUpdate()

}

})

})

updateManager.onUpdateFailed(() => {

uni.showModal({

title: '更新失败',

content: '请检查网络后重试',

showCancel: false

})

})

}

}12345678910111213141516171819202122232425262728最佳实践 ​1. 版本发布流程 ​text1. 开发新功能 → 本地调试 → 代码Review → 合并主分支

2. 测试验证 → 构建开发版 → 设为体验版 → 团队测试

3. 发布准备 → 更新版本号 → 检查配置 → 生产构建

4. 提交审核 → 上传代码 → 填写审核信息 → 等待审核

5. 正式发布 → 发布上线 → 监控数据 → 收集反馈123452. 环境管理 ​textenv/

├── .env # 公共配置

├── .env.development # 开发环境

├── .env.test # 测试环境

├── .env.production # 生产环境12345json{

"scripts": {

"build:test": "uni build -p mp-weixin --mode test",

"build:prod": "uni build -p mp-weixin --mode production"

}

}1234563. 代码质量保证 ​bash# 提交前检查

pnpm type-check && pnpm lint:fix && pnpm build:mp-weixin124. 错误监控 ​typescript// app.ts

export default {

onError(error: string) {

console.error('全局错误', error)

// 上报错误

uni.request({

url: 'https://api.example.com/log/error',

method: 'POST',

data: {

message: error,

page: getCurrentPages().pop()?.route,

timestamp: new Date().toISOString()

}

})

}

}123456789101112131415165. 性能监控 ​typescriptconst performanceMonitor = {

pageLoad(pageName: string, startTime: number) {

const loadTime = Date.now() - startTime

this.report('page_load', { page: pageName, duration: loadTime })

},

report(event: string, data: any) {

uni.request({

url: 'https://api.example.com/monitor/report',

method: 'POST',

data: { event, data, timestamp: Date.now() }

})

}

}123456789101112136. 友好的错误提示 ​typescriptconst handleError = (error: any) => {

const messages: Record = {

'NETWORK_ERROR': '网络连接失败,请检查网络',

'TIMEOUT': '请求超时,请稍后重试',

'UNAUTHORIZED': '登录已过期,请重新登录',

'SERVER_ERROR': '服务器错误,请稍后重试'

}

uni.showToast({

title: messages[error.code] || '操作失败',

icon: 'none'

})

}123456789101112总结 ​微信小程序发布是一个完整的流程,涉及开发、测试、审核、发布等多个环节。

核心流程:

前置准备 - 注册账号、安装工具、配置环境本地开发 - 开发调试、真机预览、热更新生产构建 - 代码编译、优化压缩、质量检查上传代码 - 开发者工具上传、命令行上传、CI/CD自动化版本管理 - 开发版、体验版、审核版、线上版域名配置 - 服务器域名、业务域名、SSL证书权限配置 - 用户信息、位置、相机等权限审核发布 - 审核规范、用户协议、测试账号性能优化 - 包体积、加载速度、渲染性能最佳实践:

严格遵循审核规范,避免被拒做好版本管理和发布流程持续优化性能和用户体验建立完善的监控和错误追踪