微信小程式學習小結

最近做了個微信小程式的小專案，類似於聽歌識曲的小遊戲。由於專案很緊，邊學邊用，現在有空了打算做個學習小結，這裡總結小程式的整體框架，生命週期，路由，還有傳值等，歡迎互相學習。

檔案格式

.js： JS 檔案，用於書寫邏輯

.json： 設定檔案

.wxss： 類似 Css 檔案，用於設定樣式

.wxml： 類似 Html 檔案，用於設定結構

目錄結構

一個小程式的目錄分為主體，頁面以及其他資源

（1）主體：專案根目錄，用於整個小程式的初始化

（2）頁面：每個頁面都有自己的結構、邏輯和資料

（3）其他資源：可放置外掛或者圖片等資源

生命週期

（1）主體週期

onLaunch – 監聽小程式初始化

onShow – 監聽小程式顯示(當小程式啟動，或從後臺進入前臺顯示，會觸發)

onHide – 監聽小程式隱藏(小程式從前臺進入後臺，會觸發)

onError – 錯誤監聽函式

（2）頁面生命週期

data –頁面的初始資料

onLoad –監聽頁面載入

onReady –監聽頁面初次渲染完成

onShow –監聽頁面顯示

onHide –監聽頁面隱藏

onUnload –監聽頁面解除安裝

（3）小程式生命週期完整版

路由

（1）頁面棧

小程式的路由以棧的方式管理，後進先出

（2）跳轉

1.wx.navigateTo({url:’./../XXX’}),保留當前頁面，跳轉到應用內的某個頁面

2.wx.redirectTo({url:’./../XXX’}),關閉當前頁面，跳轉到應用內的某個頁面

3.wx.navigateBack({ delta: X}),關閉當前頁面，返回上一頁面或多級頁面

getCurrentPages() 函式用於獲取當前頁面棧的例項

例子（跳轉新頁面後，之前頁面重新整理）：

//在頁面onLoad中
//使上一個頁面重新整理
var pages = getCurrentPages();
if (pages.length > 1) {
  //上一個頁面例項物件  
  var prePage = pages[pages.length - 2];
  //觸發上個介面， changeData為自己封裝的重新整理函式
  prePage.changeData()
} 
 

傳值

（1）跨頁面傳值

1.使用 navigator 標籤或者 wx.navigator

1.1 navigator 標籤(在url的頁面地址後面加上“？”和引數)

<navigator url="/page/navigate/navigate?title=navigate&id=123456" hover-class="navigator-hover">跳轉到新頁面</navigator>

傳遞了引數： {title:’navigate’,id=’123456’}

在下個頁面 onLoad 中獲取

onLoad:function(options){
    this.setData({
        title:options.title,
        id：options.id
    })
}

i1.2 wx.navigator

wx.navigateTo({
  url: "/page/navigate/navigate?title=" + 引數
})

如果要傳陣列, 字典等複雜型別, 要先用 JSON.stringify() 把引數轉成字串傳遞

2.用 getCurrentPages() 獲取棧中全部頁面的, 然後把資料寫入相應頁面(只適合已生成的頁面)

var pages = getCurrentPages();
wx.navigateBack({
  delta: 1，
  success:function(){
    var userInfo = {
      niceName: _this.data.niceName,
      avatarUrl: _this.data.avatarUrl
    }
    pages[pages.length - 2].setData({ userInfo: userInfo })
  } 
})

3.寫入本地, 跨頁面取出來

//當前頁面
wx.setStorageSync({ 'niceName',_this.data.niceName})
wx.setStorageSync({ 'avatarUrl',_this.data.avatarUrl})

//下一頁面
var niceName = wx.getSystemInfo({ 'niceName',_this.data.niceName})
var avatarUrl = wx.getSystemInfo({ 'avatarUrl',_this.data.avatarUrl})

（2）頁面間傳值

設定 id 或者 data-xx 傳遞

//.wxml
<view bindtap="bindTap" id="XXX" data-name="XXX"></view>

//.js
bindTap:function(e){
    //id
    var id = e.currentTarget.id
    //data-xx
    var name = e.currentTarget.dataset.name 
}