微信小程序小結（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