微信小程序开发入门：账号注册到提交审核完整流程

Wed, 15 Jan 2020 00:00:00 +0800

什么是微信小程序

微信小程序（Mini Program）是 2017-01 正式上线的随用随走应用形态：

无需下载安装，扫码即用
微信生态闭环：支付、分享、客服、模板消息
体验接近原生 App
包大小限制：主包 2MB，分包 16MB 总

完整开发流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


注册小程序账号
 ↓ 获取 AppID
安装微信开发者工具
 ↓ 创建项目（填 AppID）
开发小程序
 ↓ wxml + wxss + js + json
真机预览
 ↓ 体验码 / 体验成员
上传代码
 ↓ 后台提交审核
审核通过
 ↓ 全量发布 / 分阶段发布

一、注册小程序账号

访问 https://mp.weixin.qq.com
右上角"立即注册"→ 选择"小程序"
填写：
- 邮箱（未被微信注册过）
- 密码
- 验证码
邮箱激活
主体信息登记：
- 个人：身份证 + 微信扫码
- 企业：营业执照 + 法人身份证
主体认证（300 元/年，企业必做）
后台 → 开发管理 → 开发设置 → 获得 AppID（小程序 ID） + AppSecret（密钥）

二、AppID 分类

类型	用途
AppID	小程序唯一标识，公开
AppSecret	调用 wx.* 服务端 API 凭证，保密
微信小程序后台 Token	服务端接口（access_token）

重要：AppSecret 一旦泄漏，立即重置。重置不影响已上线版本。

三、安装开发者工具

官方下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
支持 Windows / macOS

四、创建项目

打开微信开发者工具
+ → 新建项目
填写：
- 项目名称
- 目录
- AppID：填刚获取的
- 后端服务：选择"不使用云服务"（或"微信云开发"）
选择模板：推荐"JS + 不使用云服务"
创建

五、四件套：wxml / wxss / js / json

小程序每个页面有 4 个文件：

1
2
3
4
5
6


pages/
├── index/
│ ├── index.wxml # 模板（类 HTML）
│ ├── index.wxss # 样式（类 CSS）
│ ├── index.js # 逻辑
│ └── index.json # 配置

1. wxml（类似 HTML）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!-- pages/index/index.wxml -->
<view class="container">
 <text>{{message}}</text>
 <button bindtap="onTap">点击</button>

 <!-- 条件渲染 -->
 <view wx:if="{{loading}}">加载中...</view>

 <!-- 列表渲染 -->
 <view wx:for="{{items}}" wx:key="id">
 {{item.name}}
 </view>
</view>

标签差异：

HTML	小程序
`<div>`	`<view>`
`<span>`	`<text>`
`<img>`	`<image>`
`<a>`	`<navigator>`

2. wxss（类似 CSS）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* pages/index/index.wxss */
.container {
 padding: 20rpx;
}

text {
 font-size: 32rpx;
 color: #333;
}

button {
 background: #1aad19;
 color: white;
}

rpx 单位：1rpx = 屏幕宽度 / 750，自动适配不同设备（iPhone 6 屏宽 375px，1rpx = 0.5px）。

3. js（页面逻辑）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


// pages/index/index.js
Page({
 data: {
 message: 'Hello',
 items: [],
 loading: false,
 },

 onLoad() {
 this.loadData();
 },

 onTap() {
 wx.showToast({ title: '点击了' });
 },

 async loadData() {
 this.setData({ loading: true });
 try {
 const res = await wx.request({
 url: 'https://api.example.com/items',
 });
 this.setData({ items: res.data });
 } finally {
 this.setData({ loading: false });
 }
 },
});

4. json（页面配置）

1
2
3
4
5
6
7


{
 "navigationBarTitleText": "首页",
 "enablePullDownRefresh": true,
 "usingComponents": {
 "van-button": "@vant/weapp/button/index"
 }
}

六、app.json 全局配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


{
 "pages": [
 "pages/index/index",
 "pages/user/user",
 "pages/logs/logs"
 ],
 "window": {
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "我的小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
 },
 "tabBar": {
 "color": "#999",
 "selectedColor": "#1aad19",
 "backgroundColor": "#ffffff",
 "list": [
 { "pagePath": "pages/index/index", "text": "首页" },
 { "pagePath": "pages/user/user", "text": "我的" }
 ]
 },
 "networkTimeout": {
 "request": 10000
 },
 "sitemapLocation": "sitemap.json"
}

七、常用 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


// 网络请求
wx.request({ url, method, data, header, success, fail })

// 弹窗
wx.showToast({ title: '成功', icon: 'success' })
wx.showModal({ title: '提示', content: '是否删除' })

// 路由
wx.navigateTo({ url: '/pages/detail/detail?id=123' })
wx.redirectTo({ url: '/pages/login/login' })
wx.switchTab({ url: '/pages/index/index' })
wx.navigateBack({ delta: 1 })

// 存储
wx.setStorageSync('key', 'value')
wx.getStorageSync('key')

// 登录
wx.login({
 success: (res) => {
 console.log(res.code) // 发送到后端换 session
 }
})

// 获取用户信息
wx.getUserProfile({
 desc: '用于完善资料',
 success: (res) => console.log(res.userInfo)
})

// 位置
wx.getLocation({
 type: 'gcj02',
 success: (res) => console.log(res.latitude, res.longitude)
})

// 支付
wx.requestPayment({
 timeStamp, nonceStr, package, signType, paySign,
 success, fail
})

// 分享
onShareAppMessage() {
 return { title: '分享标题', path: '/pages/index/index' }
}

八、生命周期

App 生命周期（app.js）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


App({
 onLaunch() {
 // 启动时执行一次
 },
 onShow() {
 // 从后台进入前台
 },
 onHide() {
 // 从前台进入后台
 },
 globalData: {
 userInfo: null,
 },
});

Page 生命周期

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Page({
 onLoad(options) { /* 加载 */ },
 onShow() { /* 显示 */ },
 onReady() { /* 首次渲染完 */ },
 onHide() { /* 隐藏 */ },
 onUnload() { /* 卸载 */ },
 onPullDownRefresh() { /* 下拉刷新 */ },
 onReachBottom() { /* 上拉触底 */ },
 onShareAppMessage() { /* 分享 */ },
});

九、组件库

Vant Weapp（有赞）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


# 1. npm init
npm init

# 2. 安装
npm i @vant/weapp -S --production

# 3. 构建 npm
# 开发者工具 -> 工具 -> 构建 npm

# 4. 使用
# app.json 或页面 json
{
 "usingComponents": {
 "van-button": "@vant/weapp/button/index"
 }
}

1

<van-button type="primary">按钮</van-button>

TDesign（腾讯）

1

npm i tdesign-miniprogram -S --production

uni-app / Taro 跨端框架

1
2
3
4
5
6
7


# uni-app
npm init vue@latest
# 安装 uni-app 模板

# Taro
npm i -g @tarojs/cli
taro init myApp

十、上传与审核

上传代码

开发者工具 → 右上角上传
填写版本号（如 1.0.0）和项目备注
上传成功

提交审核

公众平台 → 版本管理
找到刚上传的版本 → 提交审核
填写：
- 功能页面截图
- 测试账号
- 审核备注
等待审核（1~7 天）

发布

审核通过后 → 发布 → 全网用户可访问。

十一、常用限制

限制	值
主包大小	2 MB
分包总大小	16 MB（主包+所有分包）
单个分包	2 MB（普通小程序）/ 4 MB（小游戏）
TabBar 数量	2~5 个
页面层级	最多 10 层
网络请求域名	需在小程序后台配置合法域名

十二、上线检查清单

所有业务域名已在小程序后台配置
没有用 wx.request 调 http（必须 https）
个人信息 / 授权用 button + open-type
关键操作有错误兜底
真机调试（iOS + Android 都跑过）
包大小检查
性能：setData 数据量、避免大图

下一步

想做电商小程序，看微信支付 + 云开发
想用跨端框架（uni-app / Taro），看各自官方文档
想要完整产品设计 + 上架流程，看 2017-08-15《iOS 应用开发与证书管理》

参考资料

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
Vant Weapp：https://youzan.github.io/vant-weapp/
TDesign：https://tdesign.tencent.com/miniprogram/overview

Wxss on Liangweidong's blog

微信小程序开发入门：账号注册到提交审核完整流程

什么是微信小程序

完整开发流程

一、注册小程序账号

二、AppID 分类

三、安装开发者工具

四、创建项目

五、四件套：wxml / wxss / js / json

1. wxml（类似 HTML）

2. wxss（类似 CSS）

3. js（页面逻辑）

4. json（页面配置）

六、app.json 全局配置

七、常用 API

八、生命周期

App 生命周期（app.js）

Page 生命周期

九、组件库

Vant Weapp（有赞）

TDesign（腾讯）

uni-app / Taro 跨端框架

十、上传与审核

上传代码

提交审核

发布

十一、常用限制

十二、上线检查清单

下一步

参考资料