小程序基本使用-請求數(shù)據(jù)并渲染

小程序模板語法-數(shù)據(jù)綁定

在js中定義數(shù)據(jù)

Page({data: {isOpen: true,message: 'hello world!'}
})

小程序的data是一個對象，不同于vue的data是一個函數(shù)

在模塊中獲取使用數(shù)據(jù)

小程序中使用 {{}} 實現(xiàn)數(shù)據(jù)與模板的綁定

1. 內(nèi)容綁定：<view>{{ 屬性名 }}</view>
2. 屬性綁定: <input value="{{屬性名}}" />

{{}} 內(nèi)寫的是表達(dá)式

簡易雙向綁定

1. 小程序中提供了 model:value="{{數(shù)據(jù)名}}" 語法來實現(xiàn)雙向的數(shù)據(jù)綁定

2. 目前只能用在 input 和 textarea 組件中。

   只能是一個單一字段的綁定,不能嵌套對象.否則出現(xiàn)以下報錯:

   [pages/index/index] Two-way binding does not support complex data paths currently. This two-way binding is ignored.

   雙向綁定目前不支持復(fù)雜的數(shù)據(jù)路徑。這種雙向綁定將被忽略。

小程序修改數(shù)據(jù)

格式：

<元素 bind:事件名="處理函數(shù)">

this.setData({屬性名1： 新值1，屬性名2： 新值2
})this.setData({"屬性1.屬性2": 值
})

模板語法—條件渲染

小程序中的條件渲染的方式有兩種

1.wx:if

• • 在小程序中，使用wx:if="{{條件}}"來判斷是否需要渲染該代碼塊
  • 也可以用wx:elif 和 wx:else來添加else判斷

2.hidden

• • 在小程序中，使用hidden="{{條件}}"也能控制元素的顯示與隱藏
  • 條件為true則隱藏，否則則顯示

wx:if 與 hidden區(qū)別

1.區(qū)別

1. 1. wx:if是通過動態(tài)創(chuàng)建或移除元素來控制元素是否可見
   2. hidden 是通過樣式(none/block)來控制元素是否可見

2.要點(diǎn)

• 如果一個標(biāo)簽頻繁切換顯示，建議使用 hidden。例如：折疊面板，抽屜面板等等
• 如果不頻繁切換，建議使用wx:if，它有更好的初始化性能。

模板語法—列表渲染—基礎(chǔ)

格式

<元素 wx:for="{{列表數(shù)據(jù)}}" ><!--  wx:for 結(jié)構(gòu)內(nèi)可以使用兩個變量（1）item：循環(huán)項（2）index：循環(huán)索引 -->{{item}}, {{index}}
</元素>

手動指定索引名和當(dāng)前項的變量名

<view wx:for="{{list}}" wx:for-item="value" wx:for-index="key">{{key}}-{{value}}
</view>

模板語法-列表渲染-wx:key

wx:key 針對不同的數(shù)組類型有不同的寫法

• 普通數(shù)組 wx:key=“*this”
• 數(shù)組對象 wx:key=“具有唯一性的某個屬性名”

小程序內(nèi)置API-網(wǎng)絡(luò)請求

網(wǎng)絡(luò)請求

調(diào)用 wx.request 能夠在小程序中發(fā)起網(wǎng)絡(luò)請求與后端接口進(jìn)行數(shù)據(jù)的交互，其語法格式如下：

wx.request({url: '這里是接口的地址',method: '這里是請求的方法',data: '請求時提交的數(shù)據(jù)',header: {/* 請求頭信息 */},success: () => {/* 成功的回調(diào) */},fail: () => {/* 失敗的回調(diào) */},complete: () => {/* 成功或失敗的回調(diào) */}
})

配置網(wǎng)絡(luò)請求合法域名

域名必須是https

小程序內(nèi)置api-界面交互

showLoading效果

配合網(wǎng)絡(luò)請求來使用

wx.showLoading 顯示 loading 提示框

• title 文字提示內(nèi)容
• mask 是否顯示透明蒙層，防止觸摸穿透

hideLoading

• wx.hideLoading 隱藏 loading 提示框

showToast

wx.showToast 消息提示框（輕提示）

• title 提示的標(biāo)題
• mask 是否顯示透明蒙層，防止觸摸穿透
• duration 延遲時間（提示框顯示多久，單位是毫秒）
• icon 指定圖標(biāo)，none 不使用圖標(biāo)

操作注意:

1. 發(fā)請求之前，showLoading
2. 請求結(jié)束之后（無論成敗），hideLoading
3. 數(shù)據(jù)渲染成功之后，showToast

微信小程序本地存儲

• wx.setStorageSync(key, value) 存入一個數(shù)據(jù)，復(fù)雜類型數(shù)據(jù)不需要 JSON.stringify 處理
• wx.getStorageSync(key) 讀取本地key數(shù)據(jù)，復(fù)雜類型數(shù)據(jù)不需要 JSON.parse 處理
• wx.removeStorageSync(key) 刪除本地key數(shù)據(jù)
• wx.clearStorageSync()清空本地全部數(shù)據(jù)

微信小程序API的特征

API的用法分類三類：

1. 異步的api
2. 同步的api
3. 支持promise的api

異步 API

絕大部分的 API 都是異步方式，通過回調(diào)函數(shù)獲取 API 執(zhí)行的結(jié)果

• success API 調(diào)用成功時執(zhí)行的回調(diào)
• fail API 調(diào)用失敗時執(zhí)行的回調(diào)
• complete API 調(diào)用結(jié)束時執(zhí)行的回調(diào)（無論成功或失敗）

基本格式：

wx.api名稱({success(res){ console.log(成功執(zhí)行api的結(jié)果) }})

支持promise的api

部分異步的 API 也支持以 Promise 方式返回結(jié)果，此時可以配合 asyc/await 來使用。

例如：支持Promise格式的異步api有：

• wx.getSystemInfoSync()
• wx.getStorage

支持Promise格式的異步api有：

• wx.request()

同步 API

部分 API 支持以同步方式獲取結(jié)果，這些 API 的名稱都以 **Sync** 結(jié)尾。如

• wx.getStorageSync : 獲取本地存儲
• wx.getSystemInfoSync: 獲取系統(tǒng)信息

基本格式：

const result = wx.api名稱()

事件處理-事件對象&傳參

事件對象

bind:事件類型=事件回調(diào) //回調(diào)函數(shù)第1個參數(shù)即為事件對象

事件回調(diào)傳參

小程序的事件回調(diào)不支持傳參數(shù)

因此要將模板中的數(shù)據(jù)傳遞到事件回調(diào)中就必須要通過事件對象來實現(xiàn)。

方式1：

• 補(bǔ)充參數(shù):

   <button bind:tap="eventHandler" **mark:屬性名="值"**>點(diǎn)擊我看看</button>
  

• 獲取值：

  eventHandler(ev){ console.log(**ev.mark.屬性名**) 
  

方式2：

• 補(bǔ)充參數(shù) :

  <button bind:tap="eventHandler" **data-屬性名="值"** >點(diǎn)擊我看看</button>
  

• 獲取值：

  eventHandler(ev){ console.log(**ev.target.dataset.屬性名**) }
  

事件處理-組件事件

事件類型只屬于某個組件，我們將其稱為組件事件

前面介紹的 tap 事件可以在絕大部分組件是監(jiān)聽，我們可以將其理解為通用事件類型，然而也有事件類型只屬于某個組件，我們將其稱為組件事件。

組件不同，支持的事件也不同

scroll-view組件中的事件

1. bind:scrolltolower 當(dāng)滾動內(nèi)容到達(dá)底部或最右側(cè)時觸發(fā)
2. bind:refresherrefresh 執(zhí)行下拉操作時觸發(fā)

另外，還有注意一個特別的屬性

refresher-triggered 用它來控制下拉刷新狀態(tài)

事件處理-表單組件中的事件

如何獲取表單中，用戶選擇的值？

1. input: 簡易雙向綁定
2. radioGroup: 綁定change事件，在事件對象中detail.value拿到值
3. checkboxGroup: 綁定change事件，在事件對象中detail.value拿到值
4. picker: 綁定change事件，在事件對象中detail.value拿到值

• change 表單數(shù)據(jù)發(fā)生改變時觸發(fā)（input 不支持）

? 5.整體表單提交

• form: submit事件 表單提交時觸發(fā)，button 按鈕必須指定 form-type 屬性

生命周期-頁面生命周期

• 分類

• • 應(yīng)用生命周期
  • 頁面生命周期
  • 組件生命周期

生命周期是一些名稱固定，會自動執(zhí)行的函數(shù)。

頁面生命周期-基本使用

• onLoad 在頁面加載完成時執(zhí)行，只會執(zhí)行 1 次，常用于獲取地址參數(shù)和網(wǎng)絡(luò)請求

• onReady頁面初次渲染完成

• onShow 在頁面處于可見狀態(tài)時執(zhí)行，常用于動態(tài)更新數(shù)據(jù)或狀態(tài)

• onHide 在頁面處于不見狀態(tài)時執(zhí)行，常用于銷毀長時間運(yùn)行的任務(wù)，如定時器

  頁面生命周期-應(yīng)用場景

onLoad(){ // 發(fā)起請求 }

onShow(){ // 動態(tài)更新數(shù)據(jù)或狀態(tài) }

onHide 在頁面處于不見狀態(tài)時執(zhí)行，常用于銷毀長時間運(yùn)行的任務(wù)，如定時器

onReady 在頁面初次渲染完成時執(zhí)行，只會執(zhí)行 1 次，常用于節(jié)點(diǎn)操作或動畫交互等場景

生命周期-應(yīng)用生命周期

app.js

• onLaunch 小程序啟動時執(zhí)行1次，常用于獲取場景值或者啟動時的一些參數(shù)（如自定義分享）
• onShow 小程序前臺運(yùn)行時執(zhí)行，常用于更新數(shù)據(jù)或狀態(tài)
• onHide 小程序后臺運(yùn)行時執(zhí)地，常用于銷毀長時間運(yùn)行的任務(wù)，如定時器。

// pages/lifetimes/index.js
Page({// 小程序轉(zhuǎn)發(fā)/分享onShareAppMessage() {return {title: '小程序?qū)W習(xí)',path: '/pages/index/index?test=測試數(shù)據(jù)',imageUrl: '/static/images/cover.png'}}
})

執(zhí)行1次，常用于獲取場景值或者啟動時的一些參數(shù)（如自定義分享）

• onShow 小程序前臺運(yùn)行時執(zhí)行，常用于更新數(shù)據(jù)或狀態(tài)
• onHide 小程序后臺運(yùn)行時執(zhí)地，常用于銷毀長時間運(yùn)行的任務(wù)，如定時器。

// pages/lifetimes/index.js
Page({// 小程序轉(zhuǎn)發(fā)/分享onShareAppMessage() {return {title: '小程序?qū)W習(xí)',path: '/pages/index/index?test=測試數(shù)據(jù)',imageUrl: '/static/images/cover.png'}}
})