夜雨聆风
UniApp微信小程序全流程指南:从开发到上架,小白也能轻松搞定
书接上篇，我们今天来聊聊一个非常实用的话题：如何用UniApp开发、打包、上线《微信小程序》。从开发到线上发布，手把手教你搞定。附带实现思路和所有源码示例，以及常见避坑指南和开发实践。
此系列文章将带领你从移动端跨平台开发入门到精通，如果你也喜欢关注APP、小程序、公众号、H5等等应用的开发，可以持续关注后续更新，避免错过宝贵的知识分享。
你可能会说：“微信小程序不是有自己的一套吗？为什么用UniApp？” 答案很简单：一套代码，多端运行。用UniApp写的小程序，稍作调整就能发布到H5、App，甚至其他小程序平台。但是，从开发到上架，中间有许多坑：开发环境、云函数对接、分包策略、审核资质……今天我就带你走一遍完整流程，让你少踩坑，顺利上线。
一、开发前准备
1.1 注册微信小程序账号
-
访问 微信公众平台 ，点击“立即注册”，选择“小程序”。
-
填写邮箱、密码，激活账号。
-
完善小程序信息（名称、头像、介绍）。
-
获取AppID（在“开发” -> “开发设置”中），这个后续要用。
1.2 安装开发工具
-
HBuilderX：UniApp官方IDE，用于编写代码。
-
微信开发者工具：用于预览、调试、上传小程序。
1.3 创建UniApp项目
打开HBuilderX，点击“文件 -> 新建 -> 项目”，选择“uni-app”，填写项目名称，选择模板（默认模板即可），点击创建。
二、开发小程序：基础与进阶
2.1 项目结构介绍
my-miniapp/
├── pages/ # 页面文件夹
│ ├── index/
│ │ └── index.vue # 首页
│ └── ...
├── static/ # 静态资源（图片等）
├── App.vue # 应用入口
├── main.js # 主入口
├── manifest.json # 应用配置（重要！）
├── pages.json # 页面路由配置
└── uni.scss # 全局样式变量
2.2 配置小程序相关（manifest.json）
在manifest.json中，找到mp-weixin节点，配置AppID和其他选项。
{
"mp-weixin": {
"appid": "你的小程序AppID",
"setting": {
"urlCheck": false, // 开发时关闭域名校验
"es6": true,
"minified": true,
"postcss": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于查找附近门店"
}
}
}
}
2.3 编写一个简单的商品列表页（pages/index/index.vue）
<template>
<view class="container">
<view class="goods-list">
<view v-for="item in goodsList" :key="item.id" class="goods-item" @click="toDetail(item.id)">
<image :src="item.image" mode="aspectFill" class="goods-img" />
<view class="goods-info">
<text class="goods-name">{{ item.name }}</text>
<text class="goods-price">¥{{ item.price }}</text>
</view>
</view>
</view>
<button type="primary" @click="loadMore" :disabled="loading">加载更多</button>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const goodsList = ref([])
const page = ref(1)
const loading = ref(false)
const fetchGoods = async () => {
loading.value = true
// 模拟请求
const res = await uni.request({
url: 'https://your-api.com/goods',
data: { page: page.value, pageSize: 10 }
})
if (res.data.code === 200) {
goodsList.value.push(...res.data.data)
}
loading.value = false
}
const loadMore = () => {
page.value++
fetchGoods()
}
const toDetail = (id) => {
uni.navigateTo({ url: `/pages/detail/detail?id=${id}` })
}
onMounted(() => {
fetchGoods()
})
</script>
<style scoped>
.goods-item {
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
}
.goods-img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.goods-info {
flex: 1;
}
.goods-name {
font-size: 28rpx;
}
.goods-price {
font-size: 32rpx;
color: #ff5500;
}
</style>
2.4 对接云函数（可选，推荐）
微信小程序提供了云开发能力，UniApp也支持。使用云函数可以免去自己搭建后端。
步骤：
-
在微信开发者工具中，点击“云开发”开通环境。
-
在项目根目录创建
cloudfunctions文件夹。 -
编写云函数（如
getGoods），右键上传部署。
在UniApp中调用云函数：
wx.cloud.callFunction({
name: 'getGoods',
data: { page: 1 }
}).then(res => {
console.log(res.result)
})
注意：需要先初始化云开发：
// 在App.vue的onLaunch中
wx.cloud.init({
env: '你的环境ID'
})
三、分包策略：优化加载速度
小程序主包不能超过2MB，当页面和资源较多时，必须使用分包。
3.1 配置分包（pages.json）
{
"pages": [
"pages/index/index",
"pages/login/login"
],
"subPackages": [
{
"root": "packageGoods",
"pages": [
"pages/list/list",
"pages/detail/detail"
]
},
{
"root": "packageUser",
"pages": [
"pages/profile/profile",
"pages/order/order"
]
}
],
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["packageGoods"]
}
}
}
3.2 分包注意事项
-
每个分包不超过2MB。
-
分包内不能引用主包外的资源（如图片）。
-
公共组件放在主包或独立分包中。
3.3 独立分包（可选）
独立分包可以不依赖主包运行，适合功能独立的模块（如活动页面）。
{
"root": "packageActivity",
"pages": ["pages/coupon/coupon"],
"independent": true
}
四、测试与调试
4.1 使用微信开发者工具
-
在HBuilderX中，点击“运行 -> 运行到小程序模拟器”，会自动打开微信开发者工具。
-
在开发者工具中，可以查看控制台、网络请求、Storage、AppData等。
-
真机调试：点击“真机调试”，扫码即可在手机上预览，方便测试。
4.2 模拟不同环境
-
开发版：代码未上传，可随时修改。
-
体验版：上传后，可设置体验成员，用于内部测试。
-
正式版：审核通过后发布。
4.3 性能检测
-
使用性能面板（Audits）分析页面加载速度、setData频率等。
-
使用代码依赖分析查看包体积分布。
五、上传与提交审核
5.1 代码上传
-
在HBuilderX中，点击“发行 -> 小程序-微信”，填写版本号、版本描述。
-
等待编译，会自动打开微信开发者工具。
-
在开发者工具中，点击“上传”按钮，输入版本号，确认上传。
5.2 提交审核
-
登录微信公众平台，进入“管理 -> 版本管理”。
-
在“开发版本”中找到刚上传的版本，点击“提交审核”。
-
填写审核信息：
-
功能页面截图
-
隐私协议（必填，需要在小程序内展示）
-
测试账号（如果需要）
-
提交后，等待审核（通常1-7天）。
5.3 常见审核驳回原因及解决方案
-
用户隐私未说明：在小程序内必须展示隐私政策，并在后台配置隐私接口。
-
功能不完整：确保所有页面都可正常访问，没有占位内容。
-
涉及支付但无资质：个体户/企业需要营业执照，个人无法申请支付。
-
诱导分享：不能强制用户分享才能使用功能。
六、发布与推广
6.1 发布上线
审核通过后，在“版本管理”中点击“发布”，即正式上线。用户可通过搜索、扫码等方式访问。
6.2 推广方式
-
微信搜索：优化小程序名称和描述，提高搜索排名。
-
公众号关联：在公众号菜单、文章中插入小程序卡片。
-
二维码：生成小程序码，贴到线下门店、海报。
-
社交分享：引导用户分享给好友或群。
-
广告投放：微信广告、朋友圈广告。
6.3 数据监控
在公众平台“数据分析”中，可以查看访问量、用户画像、留存率等，用于后续优化。
七、资质要求（常见行业）
| 行业 | 所需资质 | 说明 |
|---|---|---|
| 电商 | 营业执照、ICP备案 | 必须企业主体 |
| 餐饮 | 食品经营许可证 | 外卖类需要 |
| 教育 | 办学许可证 | 在线培训类 |
| 医疗 | 医疗机构执业许可证 | 健康咨询类 |
| 社交 | 增值电信业务经营许可证 | 含UGC内容 |
个人开发者限制：
-
不能使用支付功能。
-
不能涉及商业交易。
-
类目受限（如医疗、金融等）。
建议：如果要做商业应用，注册企业主体。
八、完整代码示例：一个带分包和云函数的小程序
下面我们搭建一个完整的小程序，包含：首页（主包）、商品列表页（分包）、云函数。
8.1 项目结构
my-mall/
├── pages/
│ ├── index/
│ │ └── index.vue # 首页
│ └── login/
│ └── login.vue # 登录页（主包）
├── packageGoods/
│ ├── pages/
│ │ ├── list/
│ │ │ └── list.vue # 商品列表
│ │ └── detail/
│ │ └── detail.vue # 商品详情
├── cloudfunctions/
│ ├── getGoods/
│ │ └── index.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss
8.2 pages.json配置
{
"pages": [
{"path": "pages/index/index", "style": {"navigationBarTitleText": "首页"}},
{"path": "pages/login/login", "style": {"navigationBarTitleText": "登录"}}
],
"subPackages": [
{
"root": "packageGoods",
"pages": [
{"path": "pages/list/list", "style": {"navigationBarTitleText": "商品列表"}},
{"path": "pages/detail/detail", "style": {"navigationBarTitleText": "商品详情"}}
]
}
],
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["packageGoods"]
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的商城",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
8.3 首页代码（pages/index/index.vue）
<template>
<view class="index">
<button @click="goToGoodsList">进入商品列表</button>
</view>
</template>
<script setup>
const goToGoodsList = () => {
uni.navigateTo({ url: '/packageGoods/pages/list/list' })
}
</script>
8.4 商品列表页（packageGoods/pages/list/list.vue）
<template>
<view class="list">
<view v-for="item in goods" :key="item.id" class="item" @click="toDetail(item.id)">
<text>{{ item.name }}</text>
<text>¥{{ item.price }}</text>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const goods = ref([])
const loadGoods = async () => {
// 调用云函数
const res = await wx.cloud.callFunction({ name: 'getGoods' })
goods.value = res.result.data
}
const toDetail = (id) => {
uni.navigateTo({ url: `/packageGoods/pages/detail/detail?id=${id}` })
}
onMounted(() => {
loadGoods()
})
</script>
8.5 云函数（cloudfunctions/getGoods/index.js）
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
const { data } = await db.collection('goods').get()
return {
code: 200,
data
}
}
8.6 App.vue中初始化云开发
<script>
export default {
onLaunch() {
wx.cloud.init({
env: 'your-env-id'
})
}
}
</script>
九、常见打包/上传错误及解决方案
❌ 错误1：上传时提示“代码包超过2MB”
原因：主包太大。 解决：使用分包，将非首页页面移到分包，图片尽量用CDN。
❌ 错误2：预览时白屏，控制台报“request:fail url not in domain list”
原因：请求的域名未添加到白名单。 解决：在公众平台“开发设置”中添加服务器域名，或开发时关闭域名校验。
❌ 错误3：云函数调用失败“missing env”
原因：未初始化云开发或环境ID错误。 解决：在wx.cloud.init中正确填写环境ID。
❌ 错误4：上传时提示“未配置appid”
原因：manifest.json中未填写AppID。 解决：填写正确的小程序AppID。
❌ 错误5：审核被拒“小程序内容与服务类别不一致”
原因：选择的服务类目与实际功能不符。 解决：在公众平台“设置 -> 服务类目”中选择正确的类目。
十、总结
今天我们完整地学习了UniApp开发微信小程序的全部流程：
-
开发：配置AppID，编写页面，对接云函数。
-
分包：优化主包大小，提高加载速度。
-
测试：使用开发者工具和真机调试。
-
上传：通过HBuilderX发行，提交审核。
-
发布：审核通过后发布上线。
-
推广：利用微信生态获取流量。
-
资质：了解不同行业的要求。
最后送你一句话：小程序的开发不是终点，而是起点。上线后持续优化、迭代、推广，才能让它真正发挥价值。
如果在开发、打包或上架过程中遇到问题，欢迎带着你的代码来问我。
—— 一个上线过几十个小程序的老前辈 🚀
加油，未来的全栈大佬！💪如果你也对移动端跨端开发感兴趣，关注我，后续还有更多优质文章分享！
往期相关文章推荐