微信 on Liangweidong's blog

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

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

微信公众号注册与基础运营：订阅号 vs 服务号定位与选型

Thu, 15 Dec 2016 00:00:00 +0800

微信生态账号体系

微信公众平台 2012 年上线，10 年演化形成 4 大账号类型：

账号	定位	注册主体
服务号	企业服务、客户管理	企业 / 政府 / 媒体 / 其他组织
订阅号	内容传播、资讯	个人 / 媒体 / 企业 / 政府 / 其他组织
小程序	应用形态、随用随走	个人 / 企业 / 政府 / 媒体 / 其他组织
企业微信	内部办公、上下游连接	企业

重要规则：每个邮箱仅能申请一种账号。

一、服务号（Service Account）

定位

为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似 12315、114、银行，提供绑定信息、服务交互）。

适用人群

媒体、企业、政府或其他组织。

群发次数

服务号 1 个月内（按自然月）可发送 4 条群发消息。

能力

能力	详情
微信支付	✅ 支持
模板消息	✅（后改为订阅消息）
自定义菜单	✅
客服接口	✅
微信小店	✅
会员卡 / 优惠券	✅
开放接口	✅（OAuth、JS-SDK）
高级接口	✅（设备、卡券、微信连 Wi-Fi）

选型建议

如果想用公众号获得更多功能，例如开通微信支付，建议选择服务号。

二、订阅号（Subscription Account）

定位

为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯（功能类似报纸杂志，提供新闻信息或娱乐趣事）。

适用人群

个人、媒体、企业、政府或其他组织。

群发次数

订阅号（认证用户、非认证用户）1 天内可群发 1 条消息。

能力

能力	详情
微信支付	❌（个人订阅号不支持）
模板消息	❌（改为订阅消息后可）
自定义菜单	✅
原创保护	✅（赞赏、留言、原创声明）
文章留言	✅（已认证）
流量主	✅（粉丝 500+）
微信小程序关联	✅

选型建议

如果想用公众平台简单发发消息、做宣传推广服务，建议可选择订阅号。

三、小程序（Mini Program）

定位

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

注册范围

个人、企业、政府、媒体、其他组织。

接入流程

1

注册 → 小程序信息完善 → 开发小程序 → 提交审核和发布

关键规则

每个邮箱仅能申请一个小程序
AppID 是唯一标识
包大小限制：主包 2MB，总包 16MB（小游戏 4MB）

选型建议

适合功能闭环、轻量级、用户高频使用的应用。如电商、工具、内容。

四、企业微信（WeCom）

定位

企业的专业办公管理工具。与微信一致的沟通体验，提供丰富免费的办公应用，并与微信消息、小程序、微信支付等互通，助力企业高效办公和管理。

能力

与个人微信消息互通（2019 起）
上下游连接（供应商 / 经销商）
内部审批、会议、文档、邮件
客户联系、客户群、客户朋友圈

注册流程

1. 准备材料

账号类型	需要的材料
个人订阅号	身份证 + 手机号 + 邮箱
企业服务号	营业执照、法人身份证、对公账户（认证时）
企业订阅号	营业执照
小程序	身份证（个人）/ 营业执照（企业）
企业微信	营业执照 + 管理员授权

2. 注册入口

公众平台：https://mp.weixin.qq.com
小程序后台：https://mp.weixin.qq.com（同公众平台）
企业微信：https://work.weixin.qq.com

3. 邮箱选择

重要：邮箱一旦注册过任一种微信账号，不能再次注册另一种。建议：

个人号：用不重要的邮箱（如 QQ 邮箱、163 邮箱）
企业号：用企业域名邮箱（更专业）
多账号：准备多个邮箱

4. 信息登记

个人订阅号：身份证 + 手机扫码
企业服务号：营业执照（彩色扫描件）+ 法人身份证（正反面）+ 对公账户信息（认证用）

5. 主体认证

个人订阅号：免费
企业账号：300 元/年（认证费）
认证后：获得更多接口权限、显示认证标识

选型决策树

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


我主要想做什么？
├── 内容传播 / 自媒体 / 资讯
│ └── 选订阅号
│ ├── 个人 → 个人订阅号（免费）
│ └── 企业 → 企业订阅号
├── 客户服务 / 客户管理 / 支付
│ └── 选服务号
│ └── 必须是企业主体
├── 轻量应用 / 工具 / 电商
│ └── 选小程序
│ ├── 个人 → 个人小程序
│ └── 企业 → 企业小程序
└── 企业内部办公
 └── 选企业微信
 └── 必须是企业主体

互推联动

四类账号可以互相绑定：

公众号 + 小程序：公众号菜单 → 小程序、小程序 → 公众号文章
公众号 + 企业微信：公众号粉丝 → 引导加企业微信客服
小程序 + 视频号：视频号 → 挂载小程序

常见问题

注册哪个最合适？

90% 情况选订阅号：内容、推广、品牌建设。支付 + 客户管理选服务号。功能型应用选小程序。

个人能注册哪些？

个人订阅号 ✅
个人小程序 ✅（部分类目受限）
个人服务号 ❌

微信认证每年都要做吗？

是的，企业号每年 300 元。过期后部分接口受限（如微信支付）。

一个身份证能注册几个账号？

个人订阅号 / 个人小程序：5 个（2018 后政策）
企业主体：50 个

下一步

想做小程序开发，看 2020-01-15《微信小程序开发入门》
想用企业微信连接客户，看企业微信官方文档
想做内容运营，看订阅号助手 App + 公众平台后台

参考资料

微信公众平台：https://mp.weixin.qq.com
微信小程序文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
企业微信：https://work.weixin.qq.com
微信支付：https://pay.weixin.qq.com