學(xué)習(xí)目標(biāo)

1. 小程序生命周期
2. wxml數(shù)據(jù)渲染，列表渲染岁疼， 條件渲染
3. 組件事件綁定 (bindtap, bindinput)
4. 修改this.data的值
5. Page中的頁面事件
6. 判斷場景值

生命周期

生命周期有程序的生命周期和頁面的生命周期

程序的生命周期

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

在程序入口app.js中調(diào)用App(), 而且必須調(diào)用且只能調(diào)用一次阔涉，然后再App()的參數(shù)中可以聲明生命周期函數(shù)

前臺缆娃，后臺的概念

• 前臺：打開微信就進入小程序前臺
• 后臺：當(dāng)用戶點擊右上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信瑰排，此時小程序并沒有直接銷毀贯要，而是進入了后臺；

常用的生命周期：

注意：小程序的運行機制

• 小程序沒有重啟的概念
• 當(dāng)小程序進入后臺崇渗，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后（目前是5分鐘）會被微信主動銷毀

頁面的生命周期

頁面需要通過Page(Object) 函數(shù)用來注冊一個頁面京郑。接受一個 Object 類型參數(shù)宅广，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)些举、事件處理函數(shù)等跟狱。

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

常用的生命周期：

onLoad
頁面加載時觸發(fā)。一個頁面只會調(diào)用一次户魏，可以在 onLoad 的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)驶臊。

參數(shù)說明, 通過query獲取當(dāng)前頁面路徑中的參數(shù)

注意：頁面需要訪問api接口來初始化頁面， 都可以在onLoad中調(diào)用

總結(jié)：

• 程序的生命周期: app.js中onLaunch在小程序初始化中觸發(fā)
• 頁面的生命周期: onLoad 只在頁面加載的時候執(zhí)行一次, onShow每次訪問頁面都會執(zhí)行, 通常onLoad在onShow之前執(zhí)行

wxml數(shù)據(jù)綁定绪抛，列表渲染资铡，條件渲染

wxml數(shù)據(jù)綁定

基本概念
WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data。

使用方法
數(shù)據(jù)綁定在wxml模板中使用 雙大括號 {{}} 將變量包起來

在組件屬性中綁定數(shù)據(jù)
在組件的屬性中綁定數(shù)據(jù)需要在雙引號中使用大括號

// js
Page({
  data: {
    id: "index"
  }
})

// wxml
<view id="{{id}}"></view>

在組件屬性中綁定布爾值
布爾值關(guān)鍵字,需要在雙引號中使用大括號

<checkbox checked="{{false}}"> </checkbox>

注意：不要直接寫 checked="false"幢码，其計算結(jié)果是一個字符串笤休，轉(zhuǎn)成 boolean 類型后代表真值。

在大括號內(nèi)運算

// 數(shù)字相加
<view>{{1 + 2}}</view>

// 字符串相加
<view>{{"hello" + name}}</view>

列表渲染

重點概念
默認數(shù)組的當(dāng)前項的下標(biāo)變量名默認為 index症副，數(shù)組當(dāng)前項的變量名默認為 item

基本使用

// wxml
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

// js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wx:key的使用
如不提供 wx:key店雅，會報一個 warning，循環(huán)數(shù)組可以把key設(shè)置為下標(biāo)

// wxml
<view wx:for="{{array}}" wx:key="{{index}}">
  {{index}}: {{item.message}}
</view>

for循環(huán)嵌套
當(dāng)for循環(huán)嵌套時候贞铣，會造成index和item沖突闹啦，這時候需要用到以下兩個屬性：

• 使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
• 使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名

例子：

<view wx:for="{{array}}" wx:for-index="subIndex" wx:for-item="subItem">
  {{subIndex}}: {{subItem.message}}
</view>

條件渲染

基本概念
在框架中辕坝，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊

<view wx:if="{{condition}}"> True </view>

wx:elif和wx:else
可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

總結(jié)

1. WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data
2. WXML 大括號內(nèi)可以進行運算
3. wx:for下標(biāo)變量名默認為 index窍奋，數(shù)組當(dāng)前項的默認為 item
4. wx:for需要加上wx:key， 否則報警告
5. 無論是數(shù)據(jù)綁定酱畅、循環(huán)渲染和條件渲染琳袄，都必須使用大括號

事件綁定

• 點擊事件 bindtap
• 表單input監(jiān)聽輸入事件 bindinput

點擊事件 bindtap

bindtap類似于html的onClick事件

<view bindtap="tabClick"> Click me! </view>

事件對象event
?
Page({
tabClick: function(event) {
console.log(event)
}
})

獲取事件參數(shù)
通過data-*給組件綁定需要的參數(shù)，然后再綁定的事件中通過事件對象event.currentTarget.dataset 可以讀取參數(shù)

參考例子:

// wxml
<view bindtap="tabClick" data-name="myName"> Click me! </view>

// js
Page({
  tabClick: function(event) {
    const data = event.currentTarget.dataset;
    console.log(data)
    console.log(data.name)
  }
})

input監(jiān)聽輸入事件 bindinput

bindinput類似于html的oninput事件

bindinput的event事件對象
鍵盤輸入時觸發(fā)纺酸，可以通過訪問event.detail.value獲取input的value
?
// wxml
<input bindinput="bindKeyInput" placeholder="輸入同步到view中"/>

// js
Page({
  bindKeyInput: function(event) {
    console.log(event.detail);
    console.log(event.detail.value);
  },
})

注意： 小程序所有的事件獲取參數(shù)都是上例的bindtap中的一樣窖逗，通過data-*來綁定

總結(jié)

• bindtap類似于html的onClick事件， 普通的點擊事件
• bindinput類似于html的oninput事件餐蔬， 可以通過event
• 獲取input的值

修改page中data的值

使用this.setData修改data的值

基本使用

// wxml
<view>{{text}}</view>
<button bindtap="changeText"> 
    修改 
</button>

// js
Page({
  data: {
    text: '默認的文字',
  },

  changeText: function() {
    // 錯誤使用： this.data.text = '修改后的文字'
    this.setData({
      text: '修改后的文字'
    })
  },
}

this指向問題
注意在某個閉包中使用時候?qū)е聇his沒有指向當(dāng)前的page碎紊，需要先聲明this的變量佑附，供閉包內(nèi)部使用

Page({
    data: {
        text: "默認的文字"
    },
    changeText: function(){
        const that = this;
        setTimeout(function(){
            that.setData({
                text: "修改后的文字"
            })
        },2000)
    }
})

注意：

• 切記不要使用this.data.* = ""的方式修改data的值，一定要是this.setData
• 請不要把 data 中屬性的值設(shè)為 undefined

小程序頁面事件

監(jiān)聽用戶下拉刷新事件

文檔的地址： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onShareAppMessage

Page中設(shè)置onPullDownRefresh函數(shù)

Page({
    onPullDownRefresh: function(){
        console.log("下拉刷新")
    }
})

注意：需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh仗考。

監(jiān)聽用戶上拉觸底事件

文檔的地址： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onShareAppMessage

Page中設(shè)置onReachBottom函數(shù)
?

// wxml 需要高度可以滾動
Page({
    onReachBottom: function(){
        console.log("上拉觸底事件")
    }
})

注意：在觸發(fā)距離內(nèi)滑動期間音同，距離大概是50px以內(nèi)，本事件不會再次出發(fā)

頁面分享事件

文檔的地址： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onShareAppMessage

Page中蛇設(shè)置onShareAppMessage函數(shù),
轉(zhuǎn)發(fā)事件由設(shè)置了 open-type="share" 的按鈕來觸發(fā)

此事件需要 return 一個 Object痴鳄，用于自定義轉(zhuǎn)發(fā)內(nèi)容瘟斜，返回內(nèi)容如下：

Page({
  onShareAppMessage: function (res) {
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/user?id=123'
    }
  }
})

注意：只有定義了此事件處理函數(shù)痪寻，右上角菜單才會顯示“轉(zhuǎn)發(fā)”按鈕

總結(jié)：

• 實現(xiàn)類似微信朋友圈的刷新朋友圈使用onPullDownRefresh
• 無限滾動加載使用 onReachBottom
• 右上角菜單才會顯示“轉(zhuǎn)發(fā)”按鈕需要定義onShareAppMessage

判斷場景值

場景值說明：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html

在 App 的 onLaunch 和 onShow 中獲取上述場景值

tab頁面的路由管理

程序路由的 Tab 切換，Tab 切換頁面全部出棧虽惭，只留下新的 Tab 頁面

vscode開發(fā)小程序

vsCode中安裝wxml和wxss插件橡类，只需要安裝vscode搜索wxml結(jié)果的前兩項就可以了

第二天內(nèi)容知識點總結(jié)：

1. 能通過微信開發(fā)者工具的“預(yù)覽“功能，在自己手機上預(yù)覽小程序
2. 掌握小程序的數(shù)據(jù)綁定語法 {{}}
3. 掌握小程序列表渲染語法 wx:for
4. 掌握小程序條件渲染語法 wx:if芽唇，wx:else
5. 掌握小程序事件綁定 bindtap 基本用法
6. 了解小程序事件傳參 data-* 與 事件對象中 e.currentTarget.dataset 獲取參數(shù)
7. 了解表單事件 bindinput 與普通事件 bindtap 區(qū)別顾画，bindtap 的事件對象不能獲取表單值
8. 掌握通過 this.setData() 接口實現(xiàn)數(shù)據(jù)渲染到視圖層
9. 了解小程序的上拉事件，下拉事件匆笤，分享事件
10. 了解小程序生命周期函數(shù)研侣，能通過控制臺輸出查看各生命周期函數(shù)的執(zhí)行順序
11. 能區(qū)別 onLoad 和 onShow 生命周期函數(shù)，onLoad 只在加載的時候執(zhí)行一次
12. 了解小程序場景值的應(yīng)用場景炮捧，通過判斷場景值庶诡，執(zhí)行不同的 console.log
13. 了解小程序路由的 Tab 切換，Tab 切換頁面全部出棧咆课，只留下新的 Tab 頁面
14. 使用 VSCode 關(guān)聯(lián) wxml末誓，wxss 文件實現(xiàn)語法高亮提示