在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。

Page生命周期

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

OBJECT 參數說明：

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

微信小程序小結（5） -- 常用語法