blog
blog copied to clipboard
yanyue404
原生微信小程序开发简明教程
目录
- 1.生命周期
- 2.路由
- 3.重要组件
- 4.数据交互
- 5.授权登录与用户信息
- 6.调试
- 7.周边
- 8.参考链接
生命周期
App
// app.js
App({
onLaunch(options) {
// 小程序初始化启动时先做一些事情，如：扩展 wx 对象
},
onShow(options) {
// 小程序启动，或从后台进入前台显示时触发
},
onHide() {
// 小程序从前台进入后台时触发
},
onError(msg) {
// 小程序发生脚本错误或 API 调用报错时触发
},
globalData: 'I am global data',
});
Page
Page({
data: {
text: 'This is page data.',
},
onLoad: function (options) {
// 页面创建时执行，一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
},
onShow: function () {
// 页面显示/切入前台时触发
},
onReady: function () {
// 页面首次渲染完毕时执行，一个页面只会调用一次，代表页面已经准备妥当（可以操作 Dom）
// ! 如果需要获取 ajax 动态渲染的 dom 元素，可以在获取数据后设置 setData 时的回调中获取
},
onHide: function () {
// 页面从前台变为后台时执行
},
onUnload: function () {
// 页面销毁时执行
},
onPullDownRefresh: function () {
// 触发下拉刷新时执行
},
onReachBottom: function () {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function () {
// 页面滚动时执行
},
});
Component
Component({
// 在组件中是否使用全局 css 样式
options: {
addGlobalClass: true,
},
// 组件的属性列表（从父接收）
properties: {
paramA: Number,
paramB: String,
},
data: {
text: 'This is page data.',
},
created() {
// 在组件实例刚刚被创建时执行，注意此时不能调用 setData
},
attached() {
// 在组件实例进入页面节点树时执行
},
ready() {
// 在组件布局完成后执行
},
detached() {
// 在组件实例被从页面节点树移除时执行
},
methods: {
// 事件响应函数
viewTap: function () {
// ...
},
},
});
路由
跳转到其他页面
// 跳转至非 tabbar 页面（ 保留当前页面，可以返回到本页面）
wx.navigateTo({
url: '../articleDetail/articleDetail?id=7',
});
// 关闭当前的页面再跳转，不可返回
wx.navigateTo({
url: `../mediaCoverage_detail/mediaCoverage_detail?id=${data.id}`,
});
// 关闭所有页面，打开到应用内的某个页面(支持所有页面)
wx.reLaunch({
url: '../sort/sort',
});
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '../whereCanSearch/whereCanSearch',
});
返回页面
// 返回上一页
wx.navigateBack({ delta: 1 });
页面栈
getCurrentPages();
Page({
click_address() {
let pages = getCurrentPages(); // 获取页面栈
let current = pages[pages.length - 1]; // 当前页面
let url = current.route; //当前页面url
let options = current.options; //如果要获取url中所带的参数可以查看options
let prevpage = pages[pages.length - 2]; // 上一个页面
let data = prevpage.data; // 获取上一页data里的数据
if (prevPage) {
//存在上一页
prevPage.changeDataPageA('load'); // 调用上一页的函数
prevPage.setData({ address_id: id }); // 修改上一页的数据
wx.navigateBack(); // 返回上一页
}
},
});
重要组件
布局元素
- image
- view，text
- picker
- video
开放能力
web-view
承载网页的容器。会自动铺满整个小程序页面。
配置：src 属性 为webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 调试：微信开发者工具最新版本， 在web-view页面点击鼠标右键可出现调试按钮。 其他接口：
- web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面，支持大部分路由接口。
- web-view网页中仅支持部分JSSDK接口。
- 用户分享时可获取当前web-view的URL，即在onShareAppMessage回调中返回webViewUrl参数。
数据交互
模板
（1）动态 class
<view
wx:for="{{mediaData}}"
class="coverageBox {{(index < mediaData.length -1) ? 'border_bottom':'' }}"
data-index="{{index}}"
></view>
（2）列表渲染
wx:for 控制属性绑定一个数组，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="id">
{{idx}}: {{itemName.message}}
</view>
（3）条件渲染
wx:if，来判断是否需要渲染该代码块：
<view wx:if="{{condition}}">True</view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
block wx:if
是一个包装元素，并不会展示。如果要一次性判断多个组件标签，可以使用 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
wx:if vs hidden
频繁切换：用 hidden，逻辑切换：用 wx:if，类似于 v-if 与 v-show。
<view hidden="{{true}}">show</view>
setData
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
this.setData(
{
text: 'changed data',
},
function () {
// setData引起的界面更新渲染完毕后的回调函数
},
);
changeItemInArray() {
// 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text': 'changed data'
})
},
changeItemInObject() {
this.setData({
'object.text': 'changed data'
})
},
跨页面传值
- onLoad 的参数中获取打开当前页面路径中的参数。
- app.globalData
- wx.Storage
- 组件 triggerEvent(eventName, detail)
授权登录与用户信息
获取用户信息（昵称、头像等）
获取用户信息有两种方式。一种是通过 wx.getUserInfo() ，静默获取用户信息，但是需要用户之前授过权，否则拿不到信息。另一种方式是通过微信开放能力，通过 <button class="agree-btn" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">微信授权登录</button> 的方式由用户主动触发，一定能拿到用户信息（昵称、头像、性别、地区..）。
登录凭证
前端开发者调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。开发者服务器接收到 code，结合 appid、appsecret，通过后台服务调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key，如果用户已满足 UnionID 下发条件的情况下会返回开放平台唯一标识 unionId。（UnionID 机制说明）
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。
注意：
- 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
- 临时登录凭证 code 只能使用一次
获取手机号
通过微信开放能力 <button class="agree-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权绑定手机号</button> 获取到加密数据 encryptedData 和初始向量 iv，后端结合 session_key 可 解密出手机号。
注意：
在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
调试
开发者工具
（1）断点调试
打开调试器工具，按下快捷键 contrl+p，输入搜索的文件名，例如：home.js，而后打断点进行调试。
（2）真机调试
（3）自定义编译
scene 扫码的参数可以使用 escape 加密， unescape 解析。
{
"file": "project.config.json",
"miniprogram": {
"current": -1,
"list": [
{
"id": -1,
"name": "首页分享给代理人 yanyue404",
"pathName": "pages/auth_login/auth_login",
"query": "homePage=true&accountId=172",
"scene": null
},
{
"id": -1,
"name": "点亮星星扫码进入代理人",
"pathName": "pages/auth_login/auth_login",
"query": "scene=a%3D172%26t%3Dhome_foreign",
"scene": ""
}
]
}
}
| query 解密 （escape） | query 加密（unescape） |
|---|---|
| "query": "scene=a=172&t=personalCard" | "query": "scene=a%3D172%26t%3DpersonalCard" |
（4）弱网调试
借助调试器 Network 选项，可选择Fast 3G网络进行调试。
真机
以下的方法都借助 vConsole:
（1）体验版调试
点击右上角...图标，开启调试模式，查看 vConsole 输出面板。
建议将所有的请求都进行打印：
// 成功日志输出
console.log('Request Successful', {
url,
params,
result,
});
// 失败日志输出
console.log('Request Error', {
url,
params,
result,
});
（2）线上版本调试
先在体验版或开发版打开调试，再切到正式版就能看到 vConsole。
周边
- taro - 多端开发框架
- ColorUI - 鲜亮的高饱和色彩，专注视觉的小程序组件库
- wxParse - 微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析
- wemark - 小程序中的 Markdown 渲染仓库
- vant-weapp - 轻量、可靠的小程序 UI 组件库
- demos-weChatApp - 微信小程序版知乎
- qjbike_wxapp - 🛴 仿改青桔单车小程序
- mini-github - GitHub WeChat Mini Program
- miniprogram-demo - 微信小程序组件 / API / 云开发示例
- awesome-github-wechat-weapp - 微信小程序开源项目库汇总
参考资料
- 微信官方文档 · 小程序
- 开放能力-用户信息-小程序登录
- 从零开始一个微信小程序版知乎
- 开发版 Nightly Build 微信开发者工具 The text was updated successfully, but these errors were encountered:
