一、導(dǎo)入小程序

• 選擇代碼目錄

• 項(xiàng)目配置文件

  • appid 當(dāng)前小程序的 AppID
  • projectname 當(dāng)前小程序的項(xiàng)目名稱

• 變更AppID（視情況而定，如果沒有開發(fā)權(quán)限時(shí)需要變更成個(gè)人的 AppID）

二、模板語法

在頁面中渲染數(shù)據(jù)時(shí)所用到的一系列語法叫做模板語法，對(duì)應(yīng)到 Vue 中就是指令的概念。

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

• 插值 {{}}

  小程序中使用 {{}} 實(shí)現(xiàn)數(shù)據(jù)與模板的綁定，與 Vue 中不同的是無論是屬性的綁定還是內(nèi)容的綁定都必須要使用 {{}}。

  <!-- 此處的 false 是字符串的 'false'，因此布爾結(jié)果為 true -->
  <switch checked="false" />
  <!-- 如下才是正確表示布爾值 false 的方法 -->
  <switch checked="{{false}}" />
  

• 簡易數(shù)據(jù)綁定

  小程序中提供了 model:value="{{數(shù)據(jù)名}}" 語法來實(shí)現(xiàn)雙向的數(shù)據(jù)綁定，但是目前只能用在 input 和 textarea 組件中。

本節(jié)中用到的演示代碼如下：

<!-- 數(shù)據(jù)綁定 -->
<view class="binding"><!-- 開關(guān)組件 --><switch checked="{{ isOpen }}"/><!-- 雙向數(shù)據(jù)綁定 --><input type="text" model:value="{{ message }}" /><view class="message">{{ message }}</view>
</view>

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

2.2 條件渲染

• 控制屬性：相當(dāng)于 Vue 中指令的概念，在小程序中做控制屬性
  • wx:if 根據(jù)表達(dá)式的值渲染內(nèi)容，值為真時(shí)顯示
  • wx:else 用在 wx:else 的后面，不可單獨(dú)使用，wx:if 表達(dá)式值為假時(shí)顯示
• 組件屬性：
  • hidden 根據(jù)表達(dá)式的值渲染內(nèi)容，值為真時(shí)隱藏
  • 通過 [hidden] { display: none; } 來實(shí)現(xiàn)內(nèi)容的隱藏

本節(jié)中用到的演示代碼如下：

<!-- 條件渲染 wx:if 和 wx:else -->
<view class="welcome"><text wx:if="{{ isLogin }}">大師兄</text><text wx:else>游客</text>你好:
</view><!-- 條件渲染 hidden -->
<view class="loading"><!-- 可以單獨(dú)使用 --><!-- <text wx:if="{{ !loaded }}">正在加載...</text> --><text hidden="{{ loaded }}">正在加載...</text>
</view>

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

2.3 列表渲染

• wx:for 根據(jù)數(shù)組重復(fù)渲染組件內(nèi)容
  • index 默認(rèn)值，訪問數(shù)組的索引值
  • item 默認(rèn)值，訪問數(shù)組的單元值
• wx:key 列表項(xiàng)的唯一標(biāo)識(shí)符（不使用 {{}}）
  • 數(shù)組單元是對(duì)象時(shí)，只需要寫屬性名
  • 數(shù)組單元是簡單類型時(shí)，推薦使用 *this
• wx:for-index 自定義訪問數(shù)組索引的變量名
• wx:for-item 自定義訪問數(shù)組單元的變量名

本節(jié)中用到的演示代碼如下：

<!-- 列表渲染 -->
<view class="students"><view class="item"><text>序號(hào)</text><text>姓名</text><text>年齡</text><text>性別</text><text>級(jí)別</text></view><view class="item"><text>1</text><text>賀洋</text><text>20</text><text>男</text><text>菜鳥</text></view>
</view>
<!-- 簡單數(shù)組 -->
<view class="history"><text>小米</text>
</view>

Page({data: {isOpen: true,message: 'hello world!',isLogin: true,loaded: false,students: [{id: 1, name: '賀洋', age: 20, gender: '男', level: '菜鳥'},{id: 2, name: '唐剛', age: 18, gender: '女', level: '笨鳥'},{id: 3, name: '常超', age: 20, gender: '女', level: '老鳥'}],history: ['蘋果', '華為', 'OPPO', '三星']}
})

三、內(nèi)置API

內(nèi)置 API 實(shí)際上就是小程序提供的一系列的方法，這些方法都封裝在了全局對(duì)象 wx 下，調(diào)用這些方法實(shí)現(xiàn)小程序提供的各種功能，如網(wǎng)絡(luò)請(qǐng)求、本地存儲(chǔ)、拍照、錄音等。

3.1 網(wǎng)絡(luò)請(qǐng)求

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

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

本節(jié)中用到的演示代碼如下：

<button class="button" size="mini" type="primary">查詢書單</button>
<view class="books"><view class="item"><text>序號(hào)</text><text>名稱</text><text>作者</text><text>出版社</text><text>操作</text></view><view class="item"><text>1</text><text>西游記</text><text>吳承恩</text><text>人民文學(xué)出版社</text><text>刪除</text></view>
</view>

Page({data: {books: []},// 調(diào)用數(shù)據(jù)接口的方法getBooks() {// 調(diào)用小程序的 API 發(fā)起請(qǐng)求wx.request({url: 'https://hmajax.itheima.net/api/books',method: 'GET',data: {creator: 'zhangsan'},success: (result) => {// 更新數(shù)據(jù)，渲染頁面this.setData({ books: result.data.data })}})}
})

3.2 界面交互

• wx.showLoading 顯示 loading 提示框

  • title 文字提示內(nèi)容

  • mask 是否顯示透明蒙層，防止觸摸穿透

• wx.hideLoading 隱藏 loading 提示框

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

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

3.3 本地存儲(chǔ)

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

本節(jié)中用到的演示代碼如下：

<!-- 本地存儲(chǔ) -->
<view class="storage"><button size="mini" type="primary">存數(shù)據(jù)</button><button size="mini" type="primary">讀數(shù)據(jù)</button><button size="mini" type="primary">刪數(shù)據(jù)</button><button size="mini" type="primary">清數(shù)據(jù)</button>
</view>

3.4 API 特征

小程序中提供的 API 數(shù)量相當(dāng)?shù)凝嫶?#xff0c;很難也沒有必要將所有的 API 全部掌握，但是這些 API 具有一些共有的特征：

• 異步 API：絕大部分的 API 都是異步方式，通過回調(diào)函數(shù)獲取 API 執(zhí)行的結(jié)果
  • success API 調(diào)用成功時(shí)執(zhí)行的回調(diào)
  • fail API 調(diào)用失敗時(shí)執(zhí)行的回調(diào)
  • complete API 調(diào)用結(jié)束時(shí)執(zhí)行的回調(diào)（無論成功或失敗）
• 同步 API：部分 API 支持以同步方式獲取結(jié)果，這些 API 的名稱都以 Sync 結(jié)尾，如 wx.getStorageSync 等
• Promise：部分異步的 API 也支持以 Promise 方式返回結(jié)果，此時(shí)可以配合 asyc/await 來使用

3.5 相冊(cè)/拍照

wx.chooseMedia 調(diào)起攝像頭拍照或讀取相冊(cè)內(nèi)容，該 API 既支持回調(diào)方式獲取結(jié)果，也支持 Promise 方式返回結(jié)果：

<view class="preview" bind:tap="onChoose"><image src="{{ avatar }}" mode="aspectFill" />
</view>Page({// 用于頁面渲染的數(shù)據(jù)data: {avatar: ''},// 選擇圖片async onChoose() {// 推薦使用 async await 的寫法，減少不必要的回調(diào)地獄const res = await wx.chooseMedia({mediaType: ['image'],count: 1})this.setData({avatar: res.tempFiles[0].tempFilePath})}
})

3.6 小練習(xí)

本節(jié)搜索歷史練習(xí)用到的演示代碼如下：

<!-- 搜索歷史 -->
<view class="history"><view class="search-bar"><input type="text" /><text class="label">搜索</text></view><view class="title">歷史搜索 <text class="icon-delete">x</text></view><view class="keywords"><navigator url="/pages/test/index">小米</navigator><navigator url="/pages/test/index">蘋果</navigator><navigator url="/pages/test/index">華為</navigator></view>
</view>

四、事件處理

4.1 事件對(duì)象

前面已經(jīng)介紹過小程序事件監(jiān)聽的語法：bind:事件類型=事件回調(diào)，但是小程序的事件回調(diào)不支持傳參數(shù)，因此要將模板中的數(shù)據(jù)傳遞到事件回調(diào)中就必須要通過事件對(duì)象來實(shí)現(xiàn)。

小程序事件回調(diào)函數(shù)的第1個(gè)參數(shù)即為事件對(duì)象，事件對(duì)象中包括了一些有用的信息：

Page({eventHandler(ev) {// 查看事件對(duì)象console.log(ev)}
})

本節(jié)練習(xí)用到的演示代碼如下：

<!-- 搜索框 -->
<view class="search-bar"><input type="text" placeholder="輸入搜索關(guān)鍵字" />
</view>
<!-- 頁面主體 -->
<view class="page-body"><scroll-view scroll-y class="aside"><view wx:for="{{6}}" wx:key="*this" class="item"></view></scroll-view><scroll-view scroll-y refresher-enabled class="content"><view wx:for="{{6}}" wx:key="*this" class="item"></view></scroll-view>
</view>

4.2 組件事件

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

scroll-view 組件中的事件：

• bind:scrolltolower 當(dāng)滾動(dòng)內(nèi)容到達(dá)底部或最右側(cè)時(shí)觸發(fā)
• bind:refresherrefresh 執(zhí)行下拉操作時(shí)觸發(fā)
• refresher-enable 啟用自定義下拉刷新

本節(jié)練習(xí)用到的演示代碼如下：

Page({data: {isPulling: false},onScrollPulling() {// 請(qǐng)求最新的數(shù)據(jù)wx.request({url: 'https://hmajax.itheima.net/api/books',data: {creator: 'zhangsan'},success: (result) => {},complete: () => {// 停止下拉刷新this.setData({isPulling: false})}})}
})

表單組件中的事件：

• change 表單數(shù)據(jù)發(fā)生改變時(shí)觸發(fā)（input 不支持）
• submit 表單提交時(shí)觸發(fā)，button 按鈕必須指定 form-type 屬性

本節(jié)練習(xí)用到的演示代碼如下：

<!-- 用戶信息 -->
<view class="register"><form><view class="form-field"><label for="">姓名:</label><view class="field"><input type="text" placeholder="請(qǐng)輸入您的姓名" /></view></view><view class="form-field"><label for="">性別:</label><view class="field"><radio-group><radio value="男" checked />男<radio value="女" />女</radio-group></view></view><view class="form-field"><label for="">愛好:</label><view class="field"><checkbox-group><checkbox value="寫代碼" checked />寫代碼<checkbox value="睡大覺" />睡大覺</checkbox-group></view></view><view class="form-field"><label for="">籍貫:</label><view class="field"><picker mode="region">請(qǐng)選擇籍貫</picker></view></view><button size="mini" type="primary">保存</button></form>
</view>

五、生命周期

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

5.1 頁面生命周期

• onLoad 在頁面加載完成時(shí)執(zhí)行，只會(huì)執(zhí)行 1 次，常用于獲取地址參數(shù)和網(wǎng)絡(luò)請(qǐng)求
• onShow 在頁面處于可見狀態(tài)時(shí)執(zhí)行，常用于動(dòng)態(tài)更新數(shù)據(jù)或狀態(tài)
• onReady 在頁面初次渲染完成時(shí)執(zhí)行，只會(huì)執(zhí)行 1 次，常用于節(jié)點(diǎn)操作或動(dòng)畫交互等場景
• onHide 在頁面處于不見狀態(tài)時(shí)執(zhí)行，常用于銷毀長時(shí)間運(yùn)行的任務(wù)，如定時(shí)器

本節(jié)練習(xí)用到的演示代碼如下：

<view class="history"><view class="title">歷史搜索</view><view class="keywords"><navigatorwx:for="{{history}}"wx:key="*this"url="/pages/test/index">{{item}}</navigator></view>
</view><view class="form-field"><input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" /><textwx:if="{{time === 0}}"bind:tap="getSMSCode"class="label">獲取短信驗(yàn)證碼</text><text wx:else class="label">{{time}}后重新獲取</text>
</view>

// 定時(shí)器ID
let timer = null
Page({data: {history: [],time: 0},getSMSCode() {let time = 60 // 初始數(shù)據(jù)// 倒計(jì)時(shí)timer = setInterval(() => {// 停止定時(shí)器if(--time < 0) return clearInterval(timer)this.setData({time}) // 渲染結(jié)果}, 1000)},
})

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

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

本節(jié)練習(xí)用到的演示代碼如下：

// 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'}}
})