版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hyupeng1006/article/details/83825463
1. 生命周期和相关函数
Page({
data: {},
// Page 实例的生命周期函数
onLoad: (option) => { // 页面初次加载时候触发,只会触发一次
console.log(option.id) // 1
},
onReady: () => {}, // 页面初次渲染完毕,只会触发一次(页面已经准备妥当,在逻辑层可以和视图层进行交互了)
onShow: () => {}, // 从别的页面进入到当前页面时调用
onHide: () => {}, // wx.navigateTo 切换到其他页面或者底部tab切换时触发
onUnload: () => {}, // 使用 wx.redirectTo 或者 wx.navigateBack 返回其他页面时候触发,当前页面会被销毁
// 页面用户行为
onPullDownRefresh: () => {}, // 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
onReachBottom: () => {}, // 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
onShareAppMessage: () => {
// 此事件需要 return 一个 Object,用于自定义转发内容
return {
title: 'xxx',
path: '/yyy',
}
},
onPageScroll: (obj) => {
console.log(obj.scrollTop) // 页面在垂直方向已滚动的距离(单位px)
},
// 其他自定义函数
getData: () => {
this.formatDate() // 用 this.func 来访问实例中的函数
},
formatDate: () => {},
})
2. this.setDate
this.setDate({
key: value
}, callback)
key 的值非常灵活,可以以数据路径的形式给出(字符串形式),示例:
data: {
myInfo: {
name: 'wangxi',
age: '26'
},
user: [{
nickName: 'Tony'
gender: 'male'
}]
}
this.setData({
'userInfo.name': 'Raychan'
'user[0].gender': 'female'
})
setDate会更新 this.data 中对应的值(同步的过程)
并且把数据从逻辑层传递给渲染层,从而达到更新页面的目的(异步的过程)
回调函数在setDate 对界面渲染完成后触发
不要直接修改 this.data (注意和 vue 中修改数据的方式加以区别)
综上,下面的代码是可以获取到到对应的data值的(和 React 中的 setState 不同)
data: {
name: 'wangxi'
}
this.setData({
name: 'Raychan'
})
console.log(this.data.name) // Raychan
3. 路由
getCurrentPages() // 获取当前页面栈的实例
4. 模块化
// 公共代码导出
module.export.funcName = funcName
// 引用
var name = require('funcName')
5. 模板
// define
<template name='tpl'></template>
// usage
<template is='tpl'></template>
6. 运行机制
小程序没有重启的概念
当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁
当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁
7. 请求API
wx.request({
url: 'test.php',
data: {},
header: { 'content-type': 'application/json' },
success: function(res) {
// 收到https服务成功后返回
console.log(res.data)
},
fail: function() {
// 发生网络错误等情况触发
},
complete: function() {
// 成功或者失败后触发
}
})
8. 获取系统信息
wx.getSystemInfoSync()
9. 页面交互反馈
// view 容器和 button 组件提供了 hover-class 属性,触摸时会在该组件上加上对一个的样式
<view hover-class="clsName"></view>
// 在耗时操作时加上 loading 属性
<button loading="{{loading}}" bindtap="tap"></button>
data: { loading: false }
tap: () => {
this.setData({
loading: true
})
// ajax etc...
}
10. 显示隐藏 toast
wx.showToast({
title: 'xxx',
icon: 'success',
duration: 1500, // 1.5 秒后消失
})
wx.hideToast()
11. modal
wx.showModal({
title: '标题',
content: '告知当前状态,信息和解决方法',
confirmText: '主操作',
cancelText: '次要操作',
success: function(res) {
if (res.confirm) {
console.log('用户点击主操作')
} else if (res.cancel) {
console.log('用户点击次要操作')
}
}
})
12. HTTP 请求
var hasClick = false;
Page({
tap: function() {
if (hasClick) {
return
}
hasClick = true
wx.showLoading()
wx.request({
url: 'https://test.com/getinfo',
method: 'POST',
header: { 'content-type':'application/json' },
data: { },
success: function (res) {
if (res.statusCode === 200) {
console.log(res.data)// 服务器回包内容
}
},
fail: function (res) {
wx.showToast({ title: '系统错误' })
},
complete: function (res) {
wx.hideLoading()
hasClick = false
}
})
}
})
13. 排查异常的方法
在使用wx.request接口我们会经常遇到无法发起请求或者服务器无法收到请求的情况,我们罗列排查这个问题的一般方法:
- 检查手机网络状态以及wifi连接点是否工作正常。
- 检查小程序是否为开发版或者体验版,因为开发版和体验版的小程序不会校验域名。
- 检查对应请求的HTTPS证书是否有效,同时TLS的版本必须支持1.2及以上版本,可以在开发者工具的console面板输入showRequestInfo()查看相关信息。
- 域名不要使用IP地址或者localhost,并且不能带端口号,同时域名需要经过ICP备案。
- 检查app.json配置的超时时间配置是否太短,超时时间太短会导致还没收到回报就触发fail回调。
- 检查发出去的请求是否302到其他域名的接口,这种302的情况会被视为请求别的域名接口导致无法发起请求。
14. 缓存
- wx.getStorage()
- wx.getStorageSync()
- wx.setStorage()
- wx.setStorageSync()
wx.getStorage({
key: 'key1',
success: res => {
console.log(res)
},
fail: (err) => {
console.log(err)
}
})
try {
const value = wx.getStorageSync('key2')
} catch (e) {
console.log(e)
}
// 写缓存
wx.setStorage({
key: 'key1',
data: 'value1'
success: res => {
console.log(res)
},
fail: (err) => {
console.log(err)
}
})
利用本地缓存提前渲染界面
Page({
onLoad: function() {
var that = this
var list =wx.getStorageSync("list")
if (list) { // 本地如果有缓存列表,提前渲染
that.setData({ list })
}
wx.request({
url: 'https://test.com/getproductlist',
success: function (res) {
if (res.statusCode === 200) {
list = res.data.list
that.setData({ list }) // 再次渲染列表
wx.setStorageSync("list", list) // 覆盖缓存数据
}
}
})
}
})