一、小程序注册流程
通过以下几个步骤,进行小程序的注册:
1. 注册方法
在微信公众平台官网首页(https://mp.weixin.qq.com/)点击右上角的“立即注册”按钮。
2. 选择注册的帐号类型
选择“小程序”,点击“查看类型区别”可查看不同类型帐号的区别和优势。
3. 填写邮箱和密码
请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。
4. 激活邮箱
登录邮箱,查收激活邮件,点击激活链接。
5. 填写主体信息
点击激活链接后,继续下一步的注册流程。请选择主体类型选择,完善主体信息和管理员信息。 选择主体类型:
主体类型说明如下:
验证方式说明:
企业类型帐号可选择两种主体验证方式。
方式一:支付验证
需要用公司的对公账户向腾讯公司打款来验证主体身份,打款信息在提交主体信息后可以查看到。
请根据页面提示,向指定的收款帐号汇入指定金额。
温馨提示:请在10天内完成汇款,否则将注册失败。
方式二:微信认证
通过微信认证验证主体身份,需支付300元认证费。认证通过前,小程序部分功能暂无法使用。
如需了解主体验证方式请查看→ “http://kf.qq.com/faq/170109QvMNRB170109nYnYFr.html”
确认主体信息
填写管理员信息并确认主体信息不可变更信息完成注册。
6. 登录获取小程序APPID
登录补填小程序基本信息,管理人员,以及业务域名等,并获取APPID进行开发。
二、小程序原生开发入门
1. 安装开发者工具
下载 开发者工具
打开微信开发者工具,用微信扫码登录开发者工具,确认后会进入选择「小程序项目」出现如下界面:
示例程序
点击「确定」后,出现一个示例项目的预览,点击顶部菜单「编译」就可以在微信开发者工具中预览你的第一个小程序。
2. 代码构成
├── pages 页面目录
| ├── index 首页
| | ├── index.js 页面逻辑
| | ├── index.json 页面配置
| | ├── index.wxss 页面样式表
| | └── index.wxml 页面结构
| ├── logs 日志页
| | ├── logs.js 页面逻辑
| | ├── logs.json 页面配置
| | ├── logs.wxss 页面样式表
| | └── logs.wxml 页面结构
├── utils 工具函数目录
| ├── utils.js 工具函数
├── app.js app入口文件
├── app.json app配置文件
├── app.wxss app样式文件
└── project.config.json 项目配置文件
└── sitemap.json 小程序页面索引配置
├── pages 页面目录
| ├── index 首页
| | ├── index.js 页面逻辑
| | ├── index.json 页面配置
| | ├── index.wxss 页面样式表
| | └── index.wxml 页面结构
| ├── logs 日志页
| | ├── logs.js 页面逻辑
| | ├── logs.json 页面配置
| | ├── logs.wxss 页面样式表
| | └── logs.wxml 页面结构
├── utils 工具函数目录
| ├── utils.js 工具函数
├── app.js app入口文件
├── app.json app配置文件
├── app.wxss app样式文件
└── project.config.json 项目配置文件
└── sitemap.json 小程序页面索引配置
小程序必须要有一个 app.js 入口文件,app.json 配置文件。project.config.json 是工具配置文件,方便你在不同的电脑上开发时,开发者工具能拥有相同的设置。
每个页面上,同样会有 page.json 、page.js 、 page.wxml 、 page.wxss 这四种文件。分别是页面配置,页面逻辑,页面模板和页面样式文件。
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
所有的页面都需要在app.json的pages里面增加入口,这样才能让页面被加载。
index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
可以见到,页面中有一个 Page 包裹着一个对象,页面的 data、一些生命周期、一些方法,都挂载在该对象上。而小程序正是通过这样的方式进行初始化的。
index.wxml
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<block wx:if="{{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
WXML 模板文件里面,提供了数据绑定、列表渲染、条件渲染、模板、事件、引用等功能,有点类似Vue的语法。
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}
WXSS 样式文件和 CSS 别无大异,能支持绝大多数的 CSS 、 CSS3 的语法。
3. 生命周期
小程序的生命周期分为页面的生命周期和整个应用的生命周期。
应用的生命周期 主要有 onLaunch
、onShow
、onHide
页面的生命周期)会比较多一些,有 onLoad
、onReady
、onShow
、onHide
、onUnload
三、框架选型
1. 为什么采用框架
先说结论,推荐使用 uni-app。
使用原生开发的问题:
目前市面上开源的框架可以帮助我们解决上述问题,有些框架还有比较便捷的脚手架工具、以及支持多端的能力。
2. 可选框架
官网
WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。
Mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,Mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
Uni-App 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。
Megalo 是基于 Vue(Vue@2.6.6) 的小程序开发框架,让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案,只需要少量改动即可完成 H5 和小程序之间的代码迁移。
MPX
Nanachi
3. 跨端支持
框架
技术栈
案例
微信小程序
支付宝小程序
百度小程序
头条小程序
H5
App
WePY
Vue
丰富
⭕
❌
❌
❌
❌
❌
mpvue
Vue
丰富
⭕
❌
❌
❌
⭕️
❌
uni-app
Vue
丰富
⭕
⭕️
⭕️
⭕
⭕️
⭕
megalo
Vue
少
⭕
⭕️
⭕️
❌
❌
❌
Mpx
Vue
少
⭕
❌
❌
❌
❌
❌
Taro
React/Vue
丰富
⭕
⭕
⭕
⭕
⭕
⭕
Nanachi
React
少
⭕
⭕️
⭕️
⭕️
⭕️
❌
4. 选择权重
生态:案例多说明使用者多,坑应该都踩得差不多了,有坑也应该是明坑;案例少的话,就要自己上去踩,暗坑多少不清楚;从官网公开案例来看,taro、uni-app、mpvue、wepy公开展示的案例较多
跨端:开发后内容考虑兼顾其他平台,故wepy、mpx这种针对微信小程序的增强型开发框架首先排除,其次mpvue虽支持 H5 平台代码复用,但未跟进其它几家小程序。
技术栈:首选 Vue
5. uni-app or taro
4. 选择权重
生态:案例多说明使用者多,坑应该都踩得差不多了,有坑也应该是明坑;案例少的话,就要自己上去踩,暗坑多少不清楚;从官网公开案例来看,taro、uni-app、mpvue、wepy公开展示的案例较多
跨端:开发后内容考虑兼顾其他平台,故wepy、mpx这种针对微信小程序的增强型开发框架首先排除,其次mpvue虽支持 H5 平台代码复用,但未跟进其它几家小程序。
技术栈:首选 Vue
5. uni-app or taro
由于 Taro 3 开始也支持 Vue,故对于同时满足跨端,生态、技术栈,Taro 和 Uni-app 成为唯二选择。
小公司选择框架首选生态,毕竟趟坑人力有限。
生态
工具
工具属性维度,uni-app明显胜出,其出品公司同时也是HBuilder的出品公司,DCloud.io。 HBuilder/HBuilderX系列是国产开发工具,有300万开发者用户。 HBuilderX为uni-app做了很多优化,故uni-app的开发效率、易用性非其他框架可及。 当然对于不习惯HBuilderX的开发者而言,uni-app的这个优势无法体现。
学习资料
官方文档、搜索系统的完备度方面:uni-app文档内容丰富,示例demo完备,taro相对要弱一些。 教程方面:uni-app官方有视频教程,不少三方专业培训机构也录制的uni-app教程,包括腾讯课堂自家NEXT学院也录制了uni-app培训视频课,公开售卖;taro没有视频教程,但官方发布了掘金小册。 学习成本 uni-app更低。
社区活跃度
Taro 3 才开始支持 Vue,Vue相关案例较少,官网社区不活跃,截止本文2021/9/10,自建社区最新的帖子发布于2021/6/2
多数问题集中在Github issues 及开发群
Uniapp 最新帖子于几分钟前发布
https://ask.dcloud.net.cn/explore/category-12
两个框架都在官网放上了众多案例,taro案例只有微信小程序,uni-app的案例什么平台都有,很多App做了多个平台。 物料市场 Taro 有物料 160件, uni-app 物料 5192件,uni-app 完胜
Taro文档里大量存在只有微信平台打勾的情况,H5和App侧大量的X。这说明跨其他平台很难平滑迁移。
综合,uniapp 社区更为丰富,遇到问题后,有强大的后盾支持,能更快速的解决问题。uniapp 更适合我们进行快速的切换到多端支持的小程序框架上来。
四、uni-app 开发入门
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。
1. 安装开发工具
下载 HBuilder X
打开 HBuilder X,新建项目,选择模板「uni-ui项目」
uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
推荐使用 uni-ui,官方出品,兼容性远大于其他第三方UI框架。
2. 使用方式
在HBuilderX 新建uni-app项目的模板中,选择uni ui模板,可以免引用、注册,直接使用各种符合规则的vue组件。
在代码区键入u,拉出各种内置或uni ui的组件列表,选择其中一个,即可使用该组件。
更多框架配置请参照文档:框架配置说明
更多组件说明请参照文档:组件使用说明
3. 开发调试
微信小程序的开发请确保已经安装 微信开发者工具。
运行微信开发者工具查看代码运行情况
真机调试请设置小程序 APPID,APPID获取来自小程序注册或通过微信开发者工具创建测试项目
真机调试
4. 发行程序
上述运行模式下不压缩代码且含有sourcemap,体积较大;正式发布,请点击发行菜单进行发布
点击发行后打开微信开发者工具,小程序发布请查看下一章。
5. 插件市场
插件市场提供了很多轮子,可酌情选择
首选官网 uni-ui组件库,多端开发中如不考虑使用 nvue,官方组件库找不到满意的组件,推荐 uView组件库
五、小程序发布流程
1. 上传版本
请使用上一章发行操作从 HBuild X 推送代码到微信开发者工具,运行模式下不压缩代码且含有sourcemap
点击上传代码
填写提交信息
2. 查看体验版验证
查看体验版二维码
扫码进入体验版,体验用户需在左侧成员管理中进行设置
3. 提交审核
填写审核信息,可选是否需要加急
提交审核完成等待上线通知
4. 发布上线
审核通过通知,提交发布上线
提交发布,可选全量发布或灰度发布
5. 上线
进入微信所搜相关小程序。
本文链接地址: 微信小程序开发指南