一.頁面導航
1.宣告式導航
通過navigator來跳轉
1.1 導航到tabBar頁面
比如跳轉到tabBar頁面就需要navigator來跳轉，要用到他的url和open-type屬性
1.2 導航到非tabBar頁面
非tabBar頁面只是沒有配置為tabBar的頁面，注意還是頁面
配置其他都一樣，將open-type改為navigate即可
為了簡便，當跳轉的為非tabBar頁面可以省略opentype
1.3 后退
點擊實作后退效果，兩個關鍵屬性 opentype為navigateBack，delta為數字表示后退的層級
為了簡便如果只是回傳上一個頁面可以省略，delta
2. 編程式導航
2.1 tabBar
到tabBar需要呼叫 wx.switch(object)方法，里面的物件配置屬性為
2.2 非tabBar
wx.navigateTo（）
里面的物件屬性同上
2.3 后退
wx.navigateBack（）
配置物件為
3. 導航傳參
宣告式導航傳參通過里面的url查詢字串的方式
編程式導航通過物件里面的url來傳參
在onLoad接受導航引數
任何形式導航引數都可以在onLoad鉤子中獲取到，通過他的引數options
二.頁面事件
2.1下拉重繪
實作頁面資料重新加載
-
首先需要開啟下拉重繪
-
配置背景顏色和loading樣式
-
監聽下拉的事件函式 onPullDownRefresh
- 停止下拉重繪效果，因為下拉重繪就是重繪了資料，但是你會發現loading效果還是在繼續，所以這個時候需要手動去取消重繪效果，wx.stopPullDownRefresh（）呼叫這個方法即可停止重繪
2.2 上拉觸底
就是往上波動也就是頁面向下滑動的程序中會到一個程式去重繪下面的資料
通過 onReachBottom（）事件來監聽上拉觸底
是當一頁的高度走完了之后觸發
上拉觸底距離是指觸發上拉觸底事件時，滾動條距離頁面底部的距離
可在全域或者頁面的json檔案配置，通過onReachBottmDistance來配置
不用寫單位，默認px
上拉觸底案例：
首先獲取介面資料，并渲染到頁面，直接通過rgba賦予背景色
然后在上拉觸底事件中，再次獲取資料，關鍵步驟在于獲取資料里面給data賦值，是在重復的用解構賦值，添加值進來
然后添加loading效果查看官方檔案，可看到wx.showloading
獲取值之前就loading
注意一個request的回呼，complete，表示完成資料請求
節流處理：
為什么要進行節流處理，因為當我們上拉觸底的時候，如果瘋狂上拉，會瘋狂獲取資料顯然這樣是不行的
而上拉觸底節流一般分為這幾個步驟，現在data定義節流閥，然后再獲取資料的函式里面修改節流閥，最后在上拉觸底事件里面判斷節流閥
2.3 自定義編譯模式
當我們每次在編輯其他頁面的時候，每次重新編譯都要重新點進這個頁面才能看效果很麻煩
我們可以自定義每次編譯完成都進入自己的頁面
三.生命周期
小程式的生命周期分為應用生命周期和頁面生命周期，其中應用生命周期包含頁面生命周期也就是相當于vm和vc的關系
所以與之對應應用生命周期函式就是小程式從啟動到銷毀的那些函式，而頁面生命周期函式就是一個頁面從加載到銷毀的一些函式
3.1 應用生命周期
應用生命周期函式在app.js中來宣告，分別是onLaunch，onShow，onHide
前臺就是當前在這個小程式里面就是前臺，后臺就是退回桌面，此時小程式后臺運行
可以在開發工具模擬切后臺，沒有在工具，工具列管理打開
3.2 頁面生命周期
頁面周期函式有五個
一般在onLoad初始化資料，在onReady修改頁面內容比如修改當面頁面標題
四.WXS腳本
wsx是小程式獨有的一套腳本語言，wxml無法呼叫頁面js中的函式，需要data來轉換一層，但是可以呼叫wxml定義的函式，wxs典型應用就是過濾器，將資料處理過后再渲染到頁面，wsx的語法跟js一樣，但是遵循的是commonJS語法
4.1 基本用法
跟script標簽一樣有
剛才是內嵌式，還可以外聯
注意沒有物件簡寫形式
如何引入外聯的wxs腳本
4.2 注意
-
雖然跟js很像，但是還是不是js語言
-
wxs典型場景就是過濾器，經常配合插值語法使用，不能作為事件回呼
-
具有隔離性，不能呼叫js里面的函式，也不能呼叫小程式的api
-
在ios設備，wxs會比js快2-20倍
五.本地生活案例完善
繼續本地生活的案例這次做分頁
點擊list每一項應該進入一個新的頁面并且展示他的內容，所以要把這些都改成navigator組件
并且應該把當前的id和name都傳過去
注意引數為變數直接用插值語法
5.1 設定標題內容創建編譯模式
因為我們這里的標題是動態獲取的，不能再json檔案修改，通過檔案可發現 wx.setNavigationBarTitle動態設定標題
又見檔案可知，要修改視圖層的內容比如標題等，應該在onReady生命周期函式中來
但是由于引數要在onLoad獲取
為了方便我們來除錯商鋪串列頁面資料，可以創建編譯模式
5.2 獲取并渲染商鋪串列資料
這里主要注意兩點
一個是我們后面會上拉觸底繼續獲取請求看到更多資料，這個前面也做過的核心就在我們的資料應該是老資料和新資料的一個合并獲取
還有一個點就是我們需要獲取資料里面回傳來的總資料條數，好做分頁功能，具體是個什么作用后面會說，這里主要注意一點物件名如果帶有-這個分隔符就不能用什么.什么來獲取了必須要用【】這個形式而且里面引號包裹
5.3 上拉重繪
首先需要在獲取資料里面開啟關閉loading效果
然后設定一下上拉觸底的距離
然后邏輯就是在上拉觸底事件中將page+1 再獲取資料，這個時候就會融合目前資料和下一頁資料
然后記得還要位元組流
初始為true，在獲取資料里面先判斷是否為true，進來先改為false，然后complete改為true，下拉觸底事件判斷是否為true，true再page+1，否則return
判斷資料是否加載完畢：
為什么要進行判斷，因為當我們資料沒有了，你還繼續下拉重繪，不判斷的話就會繼續去請求資料，回傳一些空資料回來，正常邏輯這個時候不應該再發起請求了
這里有個公式，用到前面說的total，專門用來判斷資料是否記載完畢的公式，當前頁碼乘以每一頁展示的資料>=總資料那么就說明加載完畢了
所以可以在我們上拉觸底再來一個判斷
用微信自帶的彈出提示框
wx.showToast
只不過他要注意的是他默認icon為success，如果不需要要手動修改為none
5.4 下拉重繪
首先應該開啟下拉重繪事件
然后我們下拉重繪主要作用就是回到第一頁的狀態，那就需要重新規劃一些資料
這個時候處理我們的關閉重繪視窗，按理說是放在我們complete回呼里面
但是有個問題就是，這樣一弄不光是下拉重繪，上拉等一系列操作都會去停止一下下拉重繪，顯然不對，這里應該這么做
通過一個回呼，給這個獲取資料的函式傳一個形參回呼函式，然后判斷有回呼就執行回呼
5.5 wxs處理手機號
首先在外面創建一個wxs檔案
里面為一個函式，然后需要使用commonJs語法匯出
注意沒有物件的簡寫形式
然后wxml這邊匯入
注意這里面的，splice方法，如果不洗掉，就第二個引數為0，并且要插入就寫上你要插入的資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/500945.html
標籤：其他