1.界面交互-loading提示框
loading提示框用于增加用戶體驗， 對應的API有兩個：
- wx.showLoading()顯示loading提示框
- wx.hideLoading()關閉loading提示框
Page({getData () {//顯示loading提示框wx.showLoading({//提示內容不會自動換行，多出來的內容會被隱藏title: '數據加載中...',//展示透明蒙層，防止觸摸穿透mask: true,}),wx.request({// 接口地址url: 'url',//接口方式method: 'GET',//請求參數data: {},//請求頭header: {},// API調用成功以后，執行的回調，res是服務器響應的數據success: (res) => {console.log(res);},// API調用失敗以后，執行的回調fail: (err) => {console.log(err);},// API不管調用成功還是失敗，都會執行執行的回調cpmplete: (res) => {//隱藏效果，和展示配套使用wx.hideLoading()}})}
})2.界面交互-模態對話框-消息提示框
- wx.showModal() :模態對話框，常用于詢問用戶是否執行一些操作。例如：詢問用戶是否退出登錄，是否刪除商品
- wx.showToast() :消息提示框，根據用戶的某些操作來告知操作的結果。例如：退出成功給用戶提示，提示刪除成功等。
Page({async delHandler () {//shouModal顯示模塊對話框const res = await wx.showModal({title: '提示',content: '是否刪除該商品？'})if (confirm) {wx.showToast({title: '刪除成功',icon: none,duration: 2000})}else{wx.showToast({title: '取消刪除',icon: error,duration: 2000})}}
})
3.本地存儲
使用API將數據存儲在用戶的設備上，以便小程序運行時和下次啟動時快速地讀取這些數據
注意：對象類型的數據，可以直接進行存儲獲取，無需使用JSON.stringify()、JSON.parse()轉換
同步API
Page({//將數據存儲到本地setStorage (){wx.setStorageSync('num', 1)wx.setStorageSync( 'obj', {name: 'tom', age: 10 })},//獲取存儲到本地的數據getStorage (){const num = wx.getStorageSync('num')const obj = wx.getStorageSync('obj')console.log(num)console.log(obj);},//刪除本地存儲的數據removeStorage () {wx.removeStorageSync('num')},//清空本地存儲的全部數據clearStorage () {wx.clearStorageSync()}})異步API
Page({//將數據存儲到本地setStorage (){//異步wx.setStorage({key: 'num',data: 1}),wx.setStorage({key: 'obj',data: { name: 'jerry', age:18 }})},//獲取存儲到本地的數據getStorage (){//異步const { data } = await wx.getStorage({key: 'obj'})console.log(data);},//刪除本地存儲的數據removeStorage () {//異步wx.removeStorage({key: 'num'})},//清空本地存儲的全部數據clearStorage () {//異步wx.clearStorage()}})4.路由與通信
實現頁面跳轉的方式
- 聲明式導航：navigator組件
- 編程式導航：使用小程序提供的API
路徑后可以帶參數，參數與路徑之間使用？分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔，例如: path?key=value&key2=value2
參數需要在跳轉到的頁面的 onLoad 鉤子函數中通過形參進行接收
wx.switchTab()方法路徑后面不能帶參數
5.頁面處理函數-上拉加載
上拉加載：當用戶滑動頁面到底部時，會自動加載更多的內容，以便用戶繼續瀏覽
實現方式：
- 在app.json或者page.json中配置距離頁面底部的距離：onReachBottomDistance; 默認 50px
- 在頁面.js中定義onReachBottomDistance事件監聽用戶上拉加載
"onReachBottomDistance": 100
Page({data: {numList: [1, 2, 3, 4]},// 監聽用戶上拉加載onReachBottom () {// console.log('監聽用戶上拉加載');const addList = this.data.numList[this.data.numList.length - 1]const newList = [addList + 1, addList + 2, addList + 3]this.setData({numList : [...this.data.numList, ...newList]})}
})
6.頁面處理函數-下拉刷新
下拉刷新：當用戶下拉頁面時，頁面會自動刷新，以便用戶獲取最新內容。
實現方式：
- 在app.json或者page.json中開啟允許下拉，同時可以配置窗口、loading樣式等
- 在頁面.js中定義onPullDownRefresh事件監聽用戶下拉刷新
{"usingComponents": {},"onReachBottomDistance": 100,"enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle":"light"
}
onPullDownRefresh () {this.setData({newList: [1, 2, 3]})//為了使完成下拉后loading效果回彈if(this.data.numList.length === 3) {wx.stopPullDownRefresh()}}
7.增強 scroll-view
使用scroll-view實現上拉加載更多和下拉刷新功能
<scroll-view scroll-y class="scroll-y"lower-threshold="100"bindscrolltolower="getMore"enable-back-to-top="true"refresher-enabledrefresher-default-style="black"refresher-background="#f7f7f8"bindrefresherrefresh="refreshHnadler"refresher-triggered="{{isTriggered}}"
><view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
</scroll-view>
8.自定義組件-創建和注冊組件
小程序目前已經支持組件化開發，可以將頁面中的功能模塊抽取成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊，有助于代碼維護。
開發中常見的組件有兩種：
- 公共組件：將頁面內的功能模塊抽取成自定義組件，以便在不同的頁面中重復使用
- 頁面組件：將復雜的頁面拆分成多個低耦合的模塊，有助于代碼維護
建議一個組件一個文件夾
公共組件：
放在項目根目錄的components文件夾中
公共組件進行全局注冊：在app.json文件中配置usingComponents進行注冊，注冊后可以在任意頁面使用
頁面組件：
放在對應頁面的目錄下
頁面組件進行局部注冊：在頁面的json中配置usingComponents進行注冊，注冊后只能在當前頁面使用
在usingComponents進行組件注冊時，需要提供自定義組件的組件名和自定義組件文件路徑
在將組件注冊好以后，直接將自定義組件的組件名當成組件標簽名使用即可。
"usingComponents": {"custom-checkbox" : "./components/custom-checkbox/custom-checkbox"}
9.組件的數據以及方法
組件的數據以及方法需要在組件.js的Component方法中進行定義，Component創建自定義組件
- data：定義組件的內部數據
- methods：在組件中事件處理程序需要寫到methods中才行
10.組件的屬性
控制文本信息以及文本顯示的位置
Properties是指組件的對外屬性，主要用來接收組件使用者傳遞給組件內部的數據，和data一同用于組件的模板渲染
<custom-checkbox label="我已閱讀并同意 用戶協議和隱私協議 " position="right" />
