微信小程序小结（5） -- 常用语法

在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

Page生命周期

属性	类型	描述
onLoad	Function	生命周期函数--监听页面加载。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onReady	Function	生命周期函数--监听页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onShow	Function	生命周期函数--监听页面显示。每次打开页面都会调用一次。
onHide	Function	生命周期函数--监听页面隐藏。当navigateTo或底部tab切换时调用。
onUnload	Function	生命周期函数--监听页面卸载。当redirectTo或navigateBack的时候调用。
onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发

setData()

Page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() {
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
//or
var txt = 'array[' + i + '].text';
this.setData({
[txt]: 'adoctors'
}) },
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
})


导航

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。

//使用组件，根据场景改变所需类型
<navigator open-type="navigateTo"/>


导航API

API	说明
wx.navigateTo(OBJECT)	保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT)	关闭当前页面，跳转到应用内的某个页面。
wx.reLaunch(OBJECT)	关闭所有页面，打开到应用内的某个页面。如果跳转的页面路径是 tabBar 页面则不能带参数。
wx.switchTab(OBJECT)	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

OBJECT 参数说明：

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.reLaunch({
url: 'test?id=1'
})//获取
onLoad: function(option){
console.log(option.query)
}
//或
onLoad: function(options) {
console.log(options.id);
}

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

该方法只有一个参数

wx.navigateBack({
delta: 2 //相当于后退两步
})


数据缓存

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。

//设置
wx.setStorage({
key:"key",
data:"value"
})try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
//获取
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}


消息提示（弹窗）

wx.showToast({
title: '成功',
icon: 'success', //success,loading,none
duration: 2000
})


多种配置，详见：https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowtoastobject

设置窗口背景

wx.setBackgroundColor({
backgroundColor: '#ffffff', // 窗口的背景色为白色
})wx.setBackgroundColor({
backgroundColorTop: '#ffffff', // 顶部窗口的背景色为白色
backgroundColorBottom: '#ffffff', // 底部窗口的背景色为白色
})

也可再配置中设置全局的背景色

app.json
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "设置全局的背景色",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}


在此情况下，单独设置某个页面的背景色

demo.wxss
page{background-color:#f5f5f5;}


获取全局变量

//获取
const app = getApp().globalData;console.log(app.baseURL) //改变
app.unionId = res.data.userInfo.unionId;

按条件渲染及获取附带值（传参）

//切换类名
<view class="tp-option1 {{item.checked == true ? 'tp-option1-active' : ''}}" wx:key="item.itemName" data-index="{{index}}" wx:for="{{itemlist}}">//获取点击选项附带的属性值
console.log(e.currentTarget.dataset.index)
//获取输入框输入的值
console.log(e.detail.value)<image src="../../../../img/topic/r0.jpg" class="tp_answer_result" wx:if="{{result==0}}"></image>
<image src="../../../../img/topic/r1.jpg" class="tp_answer_result" wx:else></image>//若直接传值则带上{{}}
ised="{{false}}" //若写成ised="false"，则会因为是非空字符串一直为true