一、頁面導(dǎo)航

注意：導(dǎo)航的url路徑，都要以 / 開頭。

1. 聲明式導(dǎo)航

在頁面上聲明一個 導(dǎo)航組件，通過點擊 組件實現(xiàn)頁面跳轉(zhuǎn)。（vue中的 router-link標簽）

（1）導(dǎo)航到 tabBar 頁面
在使用 組件跳轉(zhuǎn)到指定的 tabBar 頁面時，需要指定 url 屬性 和 open-type 屬性，其中：

① url 表示要跳轉(zhuǎn)的頁面的地址，必須以 / 開頭
② open-type 表示跳轉(zhuǎn)的方式，必須為 switchTab

<navigator url="/pages/message/message" open-type="switchTab">導(dǎo)航到消息頁面</navigator>

（2）導(dǎo)航到非 tabBar頁面
在使用 組件跳轉(zhuǎn)到普通的非 tabBar 頁面時，則需要指定 url 屬性 和 open-type屬性，其中：

① url 表示要跳轉(zhuǎn)的頁面的地址，必須以 / 開頭
② open-type 表示跳轉(zhuǎn)的方式，必須為 navigate
③ 為了方便, 非tabBar 頁碼的跳轉(zhuǎn)時open-type 也可以省略

<navigator url="/pages/info/info" open-type="navigate">跳轉(zhuǎn)到info頁面</navigator>
<navigator url="/pages/info/info" >跳轉(zhuǎn)到info頁面</navigator>

（3）后退導(dǎo)航
如果要后退到上一頁面或多級頁面，則需要指定 open-type屬性 和 delta 屬性，其中：

① open-type 的值必須是 navigateBack ，表示要進行后退導(dǎo)航
② delta 的值必須是 數(shù)字，表示要后退的層級

<navigator open-type="navigateBack" delta="1">后退</navigator>
 <navigator open-type="navigateBack">后退</navigator>

注意：
① 為了簡便，如果只是后退到上一頁面，則可以省略 delta 屬性因為其默認值就是 1。
② tabBar 頁面是不能實現(xiàn)后退的效果的. 因為, 當我們跳轉(zhuǎn)到tabBar 頁面，會關(guān)閉其他所有非tabBar 頁面,所以當處于tabBar 頁面時, 無頁面可退。

2. 編程式導(dǎo)航

（1）導(dǎo)航到 tabBar 頁面
調(diào)用 wx.switchTab(Object object) 方法，可以跳轉(zhuǎn)到 tabBar 頁面。其中 Object 參數(shù)對象的屬性列表如下：

捕獲.PNG

<button bindtap="gotoMessage">跳轉(zhuǎn)到messae頁面</button>

gotoMessage () {
    wx.switchTab({
      // 代表要跳轉(zhuǎn)的路徑
      url: '/pages/message/message',
    })
  },

（2）導(dǎo)航到非 tabBar 頁面
調(diào)用 wx.navigateTo(Object object) 方法，可以跳轉(zhuǎn)到非 tabBar 的頁面。其中 Object 參數(shù)對象的屬性列表, 如下：

捕獲.PNG

<button bindtap="gotoInfo">跳轉(zhuǎn)到Info頁面</button>

gotoInfo () {
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

（3）后退導(dǎo)航
調(diào)用 wx.navigateBack(Object object) 方法，可以返回上一頁面或多級頁面。其中 Object 參數(shù)對象可選的, 屬性列表如下：

捕獲.PNG

<button bindtap="goBack">編程式導(dǎo)航實現(xiàn)后退</button>

goBack () {
    // 如果不傳遞參數(shù)就是返回上一頁
    // 如果要傳遞參數(shù)則是傳遞 delta數(shù)字型， 代表返回的層級。
    wx.navigateBack()
  },

注意： tabBar 頁面是不能實現(xiàn)后退的效果的. 因為, 當我們跳轉(zhuǎn)到tabBar 頁面，會關(guān)閉其他所有非tabBar 頁面,所以當處于tabBar 頁面時, 無頁面可退。

3. 導(dǎo)航傳參

① 無論是編程式導(dǎo)航還是聲明式導(dǎo)航，都可以用 查詢字符串 的方式傳遞參數(shù)。
② 跳轉(zhuǎn)到 tabBar頁面 時，不能攜帶參數(shù)。

// 聲明式導(dǎo)航
<navigator url="/pages/info/info?name=zs&age=20">跳轉(zhuǎn)至info頁面</navigator>

// 編程式導(dǎo)航
<button bindtap="gotoInfo2">跳轉(zhuǎn)到info頁面</button>

  gotoInfo2 () {
    wx.navigateTo({
      url: '/pages/info/info?name=李&gender=男',
    })
  },

③ 傳遞的參數(shù)可以在 onLoad( ) 生命周期的鉤子函數(shù)中獲取到。

data: {
    // 導(dǎo)航傳遞的參數(shù)
    query: {}
  },

  onLoad: function (options) {
    // 通過聲明式導(dǎo)航和編程式導(dǎo)航 都可以在onLoad生命周期函數(shù)中獲取傳遞的參數(shù)
    console.log(options);
    // 將導(dǎo)航傳遞的參數(shù)轉(zhuǎn)存在data中
    this.setData({
      query: options
    })
  },

二、頁面事件

1. 下拉刷新事件

（1）什么是下拉刷新
下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數(shù)據(jù)的行為。

（2）啟用下拉刷新
啟用下拉刷新有兩種方式：
① 全局開啟下拉刷新
在 app.json 的 window 節(jié)點中，將 enablePullDownRefresh 設(shè)置為 true
② 局部開啟下拉刷新
在頁面的.json 配置文件中，將 enablePullDownRefresh 設(shè)置為 true
在實際開發(fā)中，推薦使用第 2 種方式，為需要的頁面單獨開啟下拉刷新的效果。

（3）配置下拉刷新窗口的樣式
在全局或頁面的 .json 配置文件中，通過 backgroundColor 和 backgroundTextStyle 來配置下拉刷新窗口的樣式，其中：
① backgroundColor 用來配置下拉刷新窗口的背景顏色，僅支持16 進制的顏色值
② backgroundTextStyle 用來配置下拉刷新 loading 的樣式，僅支持 dark 和 light

（4） 監(jiān)聽頁面的下拉刷新事件
在頁面的 .js 文件中，通過 onPullDownRefresh() 函數(shù)即可監(jiān)聽當前頁面的下拉刷新事件。

// 與data同級別的事件函數(shù)，觸發(fā)了下拉刷新事件就會立即調(diào)用該函數(shù)
onPullDownRefresh: function () {
    console.log("觸發(fā)了下拉刷新");
},

（5） 停止下拉刷新的效果
① 當處理完下拉刷新后，下拉刷新的 loading 效果不會主動消失。
② 實際開發(fā)中，我們會在下拉刷新的處理函數(shù)中發(fā)起網(wǎng)絡(luò)請求，在請求的complete回調(diào)函數(shù)中，手動調(diào)用 wx.stopPullDownRefresh() 停止當前頁面的下拉刷新。（或者用async、await修飾）

// 下拉刷新事件
onPullDownRefresh: function () {
    wx.request({
        url: '',
        method: 'GET',
        success: (res) => {},
        fail(){},
        complete(){
            // 無論請求成功還是失敗，結(jié)束時都應(yīng)該關(guān)閉下拉刷新
            wx.stopPullDownRefresh()
        }
    })
},

2. 上拉觸底事件

（1） 什么是上拉觸底
上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數(shù)據(jù)的行為。
（2）監(jiān)聽頁面的上拉觸底事件
在頁面的.js 文件中，通過 onReachBottom() 函數(shù)即可監(jiān)聽當前頁面的上拉觸底事件。示例代碼如下：

onReachBottom: function () {
    /* 
    上拉觸底事件不需要開啟，直接監(jiān)聽就可以
    在全局配置的window節(jié)點中或者頁面的配置文件中可設(shè)置觸底距離：
    上拉觸底的距離：默認50像素，單位省去,我們會在觸發(fā)了上拉觸底事件時獲取下一頁的數(shù)據(jù)
    "onReachBottomDistance": 50
    */
    console.log("觸發(fā)了上拉觸底事件");
    /* 
      在上拉觸底事件中，需要做節(jié)流處理
      防止頻繁觸發(fā)該事件導(dǎo)致頻繁發(fā)起請求
    */
  },

（3）配置上拉觸底距離
上拉觸底距離指的是觸發(fā)上拉觸底事件時，滾動條距離頁面底部的距離。
可以在全局或頁面的 .json 配置文件中，通過 onReachBottomDistance 節(jié)點來配置上拉觸底的距離。小程序默認的觸底距離是 50px。

三、生命周期

1.應(yīng)用的生命周期函數(shù)

① 特指 小程序 從啟動 -> 運行 -> 銷毀期間依次調(diào)用的那些函數(shù)。
② 小程序的應(yīng)用生命周期函數(shù)需要在 app.js 中進行聲明，示例代碼如下：

App({

  /**
   * 當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 當小程序從前臺進入后臺，會觸發(fā) onHide
   */
  onHide: function () {
    
  },
})

2. 頁面的生命周期函數(shù)

① 特指小程序中，每個頁面 從加載 -> 渲染 -> 銷毀期間依次調(diào)用的那些函數(shù)。
② 小程序的頁面生命周期函數(shù)需要在 頁面的.js 文件 中進行聲明，示例代碼如下：

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載,一個頁面只調(diào)用一次
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成，一個頁面只調(diào)用一次
   */
  onReady: function () {
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載，一個頁面只調(diào)用一次
   */
  onUnload: function () {
  },

四、wxs腳本

1. 什么是 wxs

WXS （WeiXin Script ）是小程序獨有的一套腳本語言，結(jié)合 WXML ,可以構(gòu)建出頁面的結(jié)構(gòu)。

2. wxs 的應(yīng)用場景

wxml 中無法調(diào)用在頁面的 .js 中定義的函數(shù)（不包括事件綁定），但是，wxml 中可以調(diào)用 wxs 中定義的函數(shù)。因此，小程序中wxs 的典型應(yīng)用場景就是 “過濾器”。

3. wxs 和 JavaScript 的關(guān)系

雖然 wxs 的語法類似于 JavaScript ，但是wxs 和JavaScript 是完全不同的兩種語言：
① wxs 有自己的數(shù)據(jù)類型
number 數(shù)值類型、string 字符串類型、boolean 布爾類型、object 對象類型、
function 函數(shù)類型、array 數(shù)組類型、 date 日期類型、 regexp 正則
② wxs 不支持類似于 ES6 及以上的語法形式
不支持：let 、const 、解構(gòu)賦值、展開運算符、箭頭函數(shù)、對象屬性簡寫、etc...
支持：var 定義變量、普通 function 函數(shù)等類似于 ES5 的語法
③ wxs 遵循 CommonJS 規(guī)范

module 對象
require() 函數(shù)
module.exports 對象

4. 基礎(chǔ)語法

（1）內(nèi)嵌 wxs 腳本
① wxs 代碼可以編寫在 wxml 文件中的 <wxs></wxs> 標簽內(nèi)，就像 Javascript 代碼可以編寫在 html 文件中的 標簽內(nèi)一樣。
② wxml 文件中的每個<wxs></wxs> 標簽，必須提供 module 屬性，用來指定當前 wxs 的模塊名稱，方便在wxml 中訪問模塊中的成員。

<!-- 定義一個文本，調(diào)用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view>
<!-- 定義一個wxs的標簽，并指定module模塊名稱 -->
<wxs module="m1">
<!-- 向外暴露一個方法 -->
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

（2）外聯(lián)的 wxs 腳本
① wxs 代碼還可以編寫在以 .wxs 為后綴名的文件內(nèi)，就像 Javascript 代碼可以編寫在以 .js 為后綴名的文件中一樣。

// 1.定義方法
function toLower(str) {
  return str.toLowerCase()
}
// 2.暴露成員
module.exports = {
  toLower: toLower
}

② 在 wxml 中引入外聯(lián)的 wxs 腳本時，必須為 標簽添加 module 和 src 屬性，其中：

module 用來指定模塊的名稱
src 用來指定要引入的腳本的路徑，且必須是 相對路徑。

<!-- 1.使用外聯(lián)式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<!-- 2.調(diào)用 m2 模塊的方法 -->
<view>{{ m2.toLower(country) }}</view>

（3）wxs文件的相互導(dǎo)入
① vue中文件的導(dǎo)入導(dǎo)出，用的都是import 和 export。
② 小程序中，在wxs文件中導(dǎo)入其他的wxs文件，使用 require()，路徑必須是 相對路徑。

（4）WXS 的特點
① 不能作為組件的事件回調(diào)
wxs 典型的應(yīng)用場景就是“過濾器”，經(jīng)常配合 Mustache 語法進行使用，例如：

<view>{{ m2.toLower(country) }}</view>

但是，在 wxs 中定義的函數(shù)不能作為組件的事件回調(diào)函數(shù)。例如，下面的用法是錯誤的：

<button bindtap="m2.toLower(country)"></button>

② 隔離性
隔離性指的是 wxs 的運行環(huán)境和其他 JavaScript 代碼是隔離的。體現(xiàn)在如下兩方面：
wxs 不能調(diào)用js 中定義的函數(shù)
wxs 不能調(diào)用小程序提供的API

五、getApp()

① 在 app.js 中定義 屬性和方法，全局頁面都能使用。

App({
  name:"吳磊"
})

② 在頁面的 .js文件 中調(diào)用 getApp()方法，獲取App實例。

Page({
  data: { },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    const app = getApp()
    console.log(app.name);
  },
})