微信小程序（導(dǎo)航妖异、傳參存炮、生命周期阔籽、WXS腳本）

一壹哺、頁面導(dǎo)航

頁面導(dǎo)航指的是頁面之間的相互跳轉(zhuǎn)。例如艘刚，瀏覽器中實現(xiàn)頁面導(dǎo)航的方式有如下兩種:

<a>鏈接管宵。
locaton.href。
小程序中實現(xiàn)頁面導(dǎo)航的兩種方式:
聲明式導(dǎo)航
在頁面上聲明一個<navigator>導(dǎo)航組件通過點擊 <navigator> 組件實現(xiàn)頁面跳轉(zhuǎn)攀甚。
編程式導(dǎo)航
調(diào)用小程序的導(dǎo)航 API箩朴，實現(xiàn)頁面的跳轉(zhuǎn)。

1.1秋度、導(dǎo)航到 tabBar 頁面

tabBar 頁面指的是被配置為 tabBar 的頁面炸庞。
在使用 <navigator>組件跳轉(zhuǎn)到指定的 tabBar 頁面時，需要指定 url屬性和 open-type 屬性静陈，其中:

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

<navigator url="/pages/home/home" open-type="switchTab">導(dǎo)航到首頁</navigator>

調(diào)用 wx.switchTab(0bject object)方法鲸拥，可以跳轉(zhuǎn)到 tabBar 頁面。

<!--頁面結(jié)構(gòu)-->
<button bindtap="gotoHome">跳轉(zhuǎn)到首頁</button>

  //通過編程式導(dǎo)航 跳轉(zhuǎn)到首頁
  gotoHome(){
   wx.switchTab({
     url: '/pages/home/home',
   })
},

其中 0bject 參數(shù)對象的屬性列表如下:

image.png

1.2僧免、導(dǎo)航到非 tabBar 頁面

非 tabBar 頁面指的是沒有被配置為 tabBar 的頁面刑赶。
在使用<navigator>組件跳轉(zhuǎn)到普通的非 tabBar 頁面時，則需要指定 url屬性和 open-type 屬性懂衩，其中:

url 表示要跳轉(zhuǎn)的頁面的地址撞叨，必須以/開頭。
open-type 表示跳轉(zhuǎn)的方式浊洞，為navigate牵敷。
open-type也可以省略不寫。

<navigator url="/pages/info/info" open-type="navigate">導(dǎo)航到info頁面</navigator>

<navigator url="/pages/info/info">導(dǎo)航到info頁面</navigator>

調(diào)用 wx.navigateTo(0bject object)方法法希，可以跳轉(zhuǎn)到非 tabBar 的頁面枷餐。

<!--頁面結(jié)構(gòu)-->
<button bindtap="gotoInfo">跳轉(zhuǎn)到info頁面</button>

 //通過編程式導(dǎo)航 跳轉(zhuǎn)到info頁面
gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
},

其中 0bject 參數(shù)對象的屬性列表參考上圖。

1.3苫亦、后退導(dǎo)航

如果要后退到上一頁面或多級頁面毛肋，則需要指定 open-type 屬性和 delta 屬性，其中:

open-type 的值必須是 navigateBack屋剑，表示要進行后退導(dǎo)航润匙。
delta 的值必須是數(shù)字，表示要后退的層級唉匾。
為了簡便孕讳，如果只是后退到上一頁面，則可以省略 delta 屬性，因為其默認(rèn)值就是1厂财。

<navigator open-type="navigateBack" delta="1">返回上一頁</navigator>

調(diào)用 wx.navigateBack(0bject object)方法芋簿，可以返回上一頁面或多級頁面。

<!--頁面結(jié)構(gòu)-->
<button bind:tap="goBack">返回上一頁</button>

  //通過編程式導(dǎo)航 返回上一頁
  goBack(){
    wx.navigateBack()
},

其中 0bject 參數(shù)對象的屬性列表如下:

image.png

二蟀苛、導(dǎo)航傳參

navigator 組件的 url屬性用來指定將要跳轉(zhuǎn)到的頁面的路徑益咬。同時，路徑的后面還可以攜帶參數(shù)：

參數(shù)與路徑之間使用?分隔
參數(shù)鍵與參數(shù)值用=相連
不同參數(shù)用 &分隔

<navigator url="/pages/info/info?name=zs&age=18">導(dǎo)航到info頁面</navigator>

 //通過編程式導(dǎo)航 跳轉(zhuǎn)到info頁面并傳參
gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=ls&age=20',
    })
},

2.1帜平、在 onLoad 中接收導(dǎo)航參數(shù)

通過聲明式導(dǎo)航傳參或編程式導(dǎo)航傳參所攜帶的參數(shù)幽告，可以直接在 onLoad 事件中直接獲取到，示例代碼如下:

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    // options 就是導(dǎo)航傳遞過來的參數(shù)對象
    console.log(options)
    this.setData({
        query:options
    })
  },

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    //掛載導(dǎo)航傳遞參數(shù)對象
    query:{}
  },

image.png

三裆甩、頁面事件

3.1冗锁、下拉刷新

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

3.1.1、啟用下拉刷新

全局開啟下拉刷新
在 app.json 的 window節(jié)點中茉帅，將enablePullDownRefresh 設(shè)置為 true局部開啟下拉刷新叨叙。
局部開啟下拉刷新
在頁面的 .json 配置文件中，將 enablePullDownRefresh 設(shè)置為 true

3.1.2堪澎、配置下拉刷新窗口的樣式

在全局或頁面的 .json 配置文件中擂错，通過 backgroundColor 和 backgroundTextstyle 來配置下拉刷新窗口的樣式，其中:

backgroundcolor用來配置下拉刷新窗口的背景顏色,樱蛤，僅支持16 進制的顏色值钮呀。
backgroundTextstyle 用來配置下拉刷新 loading 的樣式，僅支持 dark 和 light昨凡。

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundcolor":"#efefef",
  "backgroundTextstyle":"drak"
}

3.1.3爽醋、監(jiān)聽頁面的下拉刷新事件

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

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    console.log("下拉刷新被觸發(fā)蚂四！")
  },

image.png

3.1.4、停止下拉刷新

當(dāng)處理完下拉刷新后就轧，下拉刷新的loading 效果會一直顯示证杭，不會主動消失，所以需要手動隱藏loading 效果妒御。此時解愤，調(diào)用 wx.stopPullDownRefresh()可以停止當(dāng)前頁面的下拉刷新。

 /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    console.log("下拉刷新被觸發(fā)乎莉！")

    //當(dāng)數(shù)據(jù)被重置后 調(diào)用此函數(shù) 關(guān)閉下拉刷新的效果
    wx.stopPullDownRefresh()
  },

3.2送讲、上拉觸底

上拉觸底是移動端的專有名詞奸笤，通過手指在屏幕上的上拉滑動操作，從而加載更多數(shù)據(jù)的行為哼鬓，實現(xiàn)數(shù)據(jù)的分頁监右。

3.2.1、監(jiān)聽頁面的上拉觸底事件

當(dāng)頁面高度超過屏幕高度時异希，在頁面的 .js 文件中健盒，通過 onReachBottom()函數(shù)即可監(jiān)聽當(dāng)前頁面的上拉觸底事件。示例代碼如下:

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {
  //當(dāng)數(shù)據(jù)被重置后 調(diào)用以下方法可以關(guān)閉下拉刷新的效果
    wx.stopPullDownRefresh()
  },

3.2.2称簿、配置上拉觸底距離

上拉觸底距離指的是觸發(fā)上拉觸底事件時扣癣，滾動條距離頁面底部的距離可以在全局或頁面的 .json 配置文件中，通過 onReachBottomDistance 屬性來配置上拉觸底的距離（默認(rèn)距離為50px）憨降。

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundcolor":"#efefef",
  "backgroundTextstyle":"drak",
  "onReachBottomDistance":100
}

3.3.3父虑、上拉觸底節(jié)流處理

通過節(jié)流閥的方式，控制數(shù)據(jù)加載授药。

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
   isLoading:false,
   listValue:[]
  },


getList(){
    this.setData({isLoading:true})
    wx.showLoading({title: '數(shù)據(jù)加載中...',})
    wx.request({
      url: 'https://127.0.0.1/9191/list',
      method:'GET',
      data:{},
      success:(res)=>{
         this.setData({
             listValue:[...this.data.listValue,...res.data]
         })
      },
      complete:()=>{
        wx.hideLoading()
        this.setData({isLoading:false})
      }
    })
},

/**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    if(this.data.isLoading) return
    this.getList()
  },

四士嚎、生命周期

生命周期(Life Cycle)是指一個對象從創(chuàng)建 ->運行 ->銷毀的整個階段，強調(diào)的是一個時間段悔叽。
我們可以把每個小程序運行的過程莱衩，概括為生命周期:

小程序的啟動，表示生命周期的開始娇澎。
小程序的關(guān)閉膳殷，表示生命周期的結(jié)束。
中間小程序運行的過程九火，就是小程序的生命周期。

4.2册招、生命周期的分類

在小程序中岔激，生命周期分為兩類，分別是:

應(yīng)用生命周期
特指小程序從啟動 ->運行->銷毀的過程是掰。
頁面生命周期
特指小程序中虑鼎，每個頁面的加載 ->渲染->銷毀的過程。

image.png

4.3键痛、什么是生命周期函數(shù)

生命周期函數(shù):是由小程序框架提供的內(nèi)置函數(shù)炫彩，會伴隨著生命周期，自動按次序執(zhí)行絮短。
生命周期函數(shù)的作用:允許程序員在特定的時間點江兢，執(zhí)行某些特定的操作。例如丁频，頁面剛加載的時候杉允，可以在onLoad 生命周期函數(shù)中初始化頁面的數(shù)據(jù)邑贴。

注意
生命周期強調(diào)的是時間段，生命周期函數(shù)強調(diào)的是時間點叔磷。

4.4拢驾、生命周期函數(shù)的分類

小程序中的生命周期函數(shù)分為兩類，分別是:

應(yīng)用的生命周期函數(shù)
特指小程序從啟動 ->運行 ->銷毀期間依次調(diào)用的那些函數(shù)改基。
頁面的生命周期函數(shù)
特指小程序中繁疤，每個頁面從加載 ->渲染->銷毀期間依次調(diào)用的那些函數(shù)。

4.5秕狰、應(yīng)用的生命周期函數(shù)

小程序的應(yīng)用生命周期函數(shù)需要在 app.js 中進行聲明稠腊。

// app.js
App({

  /**
   * 當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
   */
  onLaunch: function () {
     //todo 可以在頁面初始化時讀取本地數(shù)據(jù) 
  },

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

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

  /**
   * 當(dāng)小程序發(fā)生腳本錯誤诺舔，或者 api 調(diào)用失敗時鳖昌，會觸發(fā) onError 并帶上錯誤信息
   */
  onError: function (msg) {}
})

4.6、頁面的生命周期函數(shù)

小程序的頁面生命周期函數(shù)需要在頁面的.js 文件中進行聲明低飒。

// pages.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {},

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {},

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {},

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {},

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {},

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {},

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {},

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {}
})

五许昨、WXS 腳本

WXS(WeiXin Script)是小程序獨有的一套腳本語言，結(jié)合 WXML褥赊，可以構(gòu)建出頁面的結(jié)構(gòu)糕档。
wxml中無法調(diào)用在頁面的 .js 中定義的函數(shù)，但是拌喉，wxml中可以調(diào)用 wxs 中定義的函數(shù)速那。因此，小程序中wxs 的典型應(yīng)用場景就是“過濾器”尿背。

5.1端仰、WXS和JavaScript 的關(guān)系

雖然 wXs 的語法類似于lavaScript，但是 wxs 和lavaScrint 是完全不同的兩種語言:

wxs 有自己的數(shù)據(jù)類型
number 數(shù)值類型田藐、string 字符串類型荔烧、boolean 布爾類型、object 對象類型function 函數(shù)類型汽久、array 數(shù)組類型鹤竭、regexp 正則date 日期類型。
wxs 不支持類似于 ES6 及以上的語法形式
不支持:let景醇、const臀稚、解構(gòu)賦值、展開運算符啡直、箭頭函數(shù)烁涌、對象屬性簡寫苍碟、etc...。
支持:var定義變量撮执、普通 function 函數(shù)等類似于 ES5 的語法微峰。
wxs 遵循 commonls 規(guī)范
module 對象。
require()函數(shù)抒钱。
module.exports 對象蜓肆。

5.2、內(nèi)嵌 WXS腳本

WXS 代碼可以編寫在 wxml文件中的<wxs>標(biāo)簽內(nèi)谋币，就像JavaScript 代碼可以編寫在 html文件中的<script>標(biāo)簽內(nèi)一樣仗扬。
wxml文件中的每個 <wxs></wxs>標(biāo)簽，必須提供 module 屬性蕾额，用來指定當(dāng)前 wxs 的模塊名稱早芭，方便在wxml中訪問模塊中的成員。

<view>{{m.toUpper(username)}}</view>

<!--將數(shù)據(jù)轉(zhuǎn)為大寫-->
<wxs module="m">
    module.exports.toUpper=function(str){
        return str.toUpperCase()
    }
</wxs>

5.3诅蝶、定義外聯(lián)的 wxs 腳本

wxs 代碼還可以編寫在以 .wxs 為后綴名的文件內(nèi)退个，就像 javascript 代碼可以編寫在以 .js 為后綴名的文件中一樣。

//tools.wxs
function toUpper(str){
    return str.toUpperCase()
}
  
module.exports={
    toUpper:toUpper
}

5.4调炬、使用外聯(lián)的 wxs 腳本

在 wxml 中引入外聯(lián)的 wxs 腳本時语盈，必須為 <wxs>標(biāo)簽添加 module 和 src 屬性，其中:

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

<!--調(diào)用模塊中的方法-->
<view>{{m.toUpper(username)}}</view>

<!--引入外聯(lián)的wxs腳本 并命名-->
<wxs src="../../utils/tools.wxs" module="m"></wxs>

5.5棘钞、WXS 的特點

與JavaScript 不同
為了降低 wxs(WeiXin Script)的學(xué)習(xí)成本wxs 語言在設(shè)計時借大量鑒了JavaScript的語法缠借。但是本質(zhì)上wxs 和JavaScript 是完全不同的兩種語言!
不能作為組件的事件回調(diào)
wxs 典型的應(yīng)用場景就是“過濾器”經(jīng)常配合 Mustache 語法進行使用，例如:

<view>{{m.toUpper(username)}}</view>

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

 <button bindtap="m.toUpper">按鈕</button>

隔離性
隔離性指的是 wxs 的運行環(huán)境和其他JavaScript 代碼是隔離的宝恶。體現(xiàn)在如下兩方面：
wxs 不能調(diào)用 js 中定義的函數(shù)。
wxs 不能調(diào)用小程序提供的 API趴捅。
性能好
在 i0s 設(shè)備上垫毙，小程序內(nèi)的 WXS 會比Javascript 代碼快 2~20 倍。
在 android 設(shè)備上拱绑，二者的運行效率無差異综芥。

微信小程序（導(dǎo)航、傳參董瞻、生命周期寞蚌、WXS腳本）

微信小程序（導(dǎo)航田巴、傳參、生命周期挟秤、WXS腳本）

一壹哺、頁面導(dǎo)航

1.1秋度、導(dǎo)航到 tabBar 頁面

1.2僧免、導(dǎo)航到非 tabBar 頁面

1.3苫亦、后退導(dǎo)航

二蟀苛、導(dǎo)航傳參

2.1帜平、在 onLoad 中接收導(dǎo)航參數(shù)

三裆甩、頁面事件

3.1冗锁、下拉刷新

3.1.1、啟用下拉刷新

3.1.2堪澎、配置下拉刷新窗口的樣式

3.1.3爽醋、監(jiān)聽頁面的下拉刷新事件

3.1.4、停止下拉刷新

3.2送讲、上拉觸底

3.2.1、監(jiān)聽頁面的上拉觸底事件

3.2.2称簿、配置上拉觸底距離

3.3.3父虑、上拉觸底節(jié)流處理

四士嚎、生命周期

4.2册招、生命周期的分類

4.3键痛、什么是生命周期函數(shù)

4.4拢驾、生命周期函數(shù)的分類

4.5秕狰、應(yīng)用的生命周期函數(shù)

4.6、頁面的生命周期函數(shù)

五许昨、WXS 腳本

5.1端仰、WXS和JavaScript 的關(guān)系

5.2、內(nèi)嵌 WXS腳本

5.3诅蝶、定義外聯(lián)的 wxs 腳本

5.4调炬、使用外聯(lián)的 wxs 腳本

5.5棘钞、WXS 的特點