微信小程序小结 -- 常用语法

Posted 2020-12-27 adoctors

在 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