小程式小結之框架
檔案格式
.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 }