02 模板與配置

學習目標

能夠使用 WXML 模板語法渲染頁面結構
能夠使用 WXSS 樣式美化頁面結構
能夠使用 app.json 對小程序進行全局性配置
能夠使用 page.json 對小程序頁面進行個性化配置
能夠知道如何發起網絡數據請求

WXML 模板語法 - 數據綁定

1. 數據綁定的基本原則

① 在 data 中定義數據
② 在 WXML 中使用數據

2. 在 data 中定義頁面的數據

在頁面對應的 .js 文件中，把數據定義到 data 對象中即可：

data: {//字符類型的數據info:"init data",//數組類型的數據msgList:[{msg:'hello',msg:'world'}]},

3. Mustache 語法的格式

把data中的數據綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。語法格式為：

<view>{{ 要綁定的數據 }}</view>

4. Mustache 語法的應用場景

Mustache 語法的主要應用場景如下：

綁定內容
綁定屬性
運算（三元運算、算術運算等）

5. 動態綁定內容

頁面的數據如下：

<view>{{ info }}</view>

6. 動態綁定屬性

頁面的數據如下：

data: {//字符類型的數據info:"init data",//數組類型的數據msgList:[{msg:'hello',msg:'world'}],img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"}, <image src="{{img}}"></image>

7. 三元運算

頁面的數據如下：

data: {//字符類型的數據info:"init data",//數組類型的數據msgList:[{msg:'hello',msg:'world'}],img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",randomNum:Math.random()+10,//生成10以內的隨機數}, <view>{{randomNum >=5? '隨機數大于5':'隨機數小于5'}}</view>

8. 算數運算

頁面的數據如下：

data: {//字符類型的數據info:"init data",//數組類型的數據msgList:[{msg:'hello',msg:'world'}],img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",randomNum:Math.random()+10,//生成10以內的隨機數randomNum2:Math.random().toFixed(2),//生成一個帶兩位小數的隨機數}, <view>生成100以內隨機數:{{randomNum2 * 100}}</view>

---

WXML 模板語法 - 事件綁定

1. 什么是事件

事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理。

2. 小程序中常用的事件

3. 事件對象的屬性列表

當事件回調觸發的時候，會收到一個事件對象 event，它的詳細屬性如下表所示：

4. target 和 currentTarget 的區別

target 是觸發該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件。舉例如下：

<view class="out-view" bindtap="outerHandler"> <button type="primary">primary</button> </view>

點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層 view 的 tap 事件處理函數。
此時，對于外層的 view 來說：

e.target 指向的是觸發事件的源頭組件，因此，e.target 是內部的按鈕組件
e.currentTarget指向的是當前正在觸發事件的那個組件，因此，e.currentTarget 是當前的 view 組件

5. bindtap 的語法格式

在小程序中，不存在 HTML 中的 onclick 鼠標點擊事件，而是通過tap事件來響應用戶的觸摸行為。
① 通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：

<button type="primary" bindtap="tapHandler">primary</button>

② 在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event（一般簡寫成 e） 來接收：

Page({tapHandler(e){//按鈕的tap事件處理函數console.log(e) //事件參數對象e},})

6. 在事件處理函數中為 data 中的數據賦值

通過調用 this.setData(dataObject) 方法，可以給頁面 data 中的數據重新賦值，示例如下：

data: {count:0,},changeCount(){this.setData({count:this.data.count+1})},

7. 事件傳參

可以為組件提供 data-\* 自定義屬性傳參，其中 * 代表的是參數的名字，示例代碼如下： inputHandler(e){ //e.detail.value是變化過后，文本框最新的值 console.log(e.detail.value); },

<button bindtap="btnHandler" data-info="{{2}}">事件傳參</button>

最終：

info會被解析為參數的名字
數值 2 會被解析為參數的值

在事件處理函數中，通過 event.target.dataset.參數名 即可獲取到具體參數的值，示例代碼如下：

btnHandler(event){// dataset是一個對象，包含了所有通過 data-* 傳遞過來的參數項 console.log(event.target.dataset); //通過dataset可以訪問到具體參數的值 console.log(event.target.dataset.info);},

8. bindinput 的語法格式

在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：
① 通過 bindinput，可以為文本框綁定輸入事件：

<input bindinput="inputHandler"></input>

② 在頁面的 .js 文件中定義事件處理函數：

inputHandler(e){//e.detail.value是變化過后，文本框最新的值 console.log(e.detail.value);},

9. 實現文本框和 data 之間的數據同步

實現步驟：
① 定義數據
② 渲染結構
③ 美化樣式
④ 綁定 input 事件處理函數

定義數據：

data: {msg:"你好",},

實現文本框和 data 之間的數據同步

<input value="{{msg}}" bindinput="msghandler"></input>

美化樣式：

input {border: 1px solid #eee;padding: 5px;margin: 5px;border-radius: 3px; }

綁定 input 事件處理函數：

msghandler(e){this.setData({//通過e.deatil.value獲取到文本框最新的值msg:e.detail.value,})

---

WXML 模板語法 - 條件渲染

1. wx:if

在小程序中，使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊：

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

也可以用 wx:elif 和 wx:else 來添加 else 判斷：

<view wx :if="iitype -== 1}}">男</view> <view wx:elif="iitype === 2}}">女</view> <view wx:else>保密</view>

2. 結合 使用 wx:if

如果要一次性控制多個組件的展示與隱藏，可以使用一個\<block>\</block>標簽將多個組件包裝起來，并在\<block> 標簽上使用wx:if控制屬性，示例如下：

<block wx : if="i{true}}"> <view> view1 </view> <view> view2 </view> </block>

注意：\<block> 并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。

3. hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：

<view hidden="{{ condition }}">條件為 true隱藏，條件為 false、顯示</view>

4. wx:if 與 hidden 的對比

① 運行方式不同

wx:if 以動態創建和移除元素的方式，控制元素的展示與隱藏
hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏

② 使用建議

頻繁切換時，建議使用 hidden
控制條件復雜時，建議使用wx:if搭配 wx:elif、wx:else 進行展示與隱藏的切換

---

WXML 模板語法 - 列表渲染

1. wx:for

通過 wx:for 可以根據指定的數組，循環渲染重復的組件結構，語法示例如下：

<view wx : for="i{array}}"> 索引是: {{findex}}當前項是: {{item}} </view>

默認情況下，當前循環項的索引用index表示；當前循環項用 item 表示。

2. 手動指定索引和當前項的變量名*

使用 wx:for-index 可以指定當前循環項的索引的變量名
使用 wx:for-item 可以指定當前項的變量名

<view wx:for="i{array}}" wx:for-index="idx" wx:for-item="itemName">索引是: {{idx}}當前項是:f{itemName}} </view>

3. wx:key 的使用

類似于 Vue 列表渲染中的 :key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的 key 值，
從而提高渲染的效率，示例代碼如下：

//data數據 data: { userList: [ { id: 1,name: '小紅'}，{ id: 2，name: '小黃'}，{ id: 3，name: '小白’}] } <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

---

WXSS 模板樣式

1. 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言，用于美化 WXML 的組件樣式，類似于網頁開發中的 CSS。

2. WXSS 和 CSS 的關系

WXSS 具有 CSS 大部分特性，同時，WXSS 還對 CSS 進行了擴充以及修改，以適應微信小程序的開發。
與 CSS 相比，WXSS 擴展的特性有：

rpx 尺寸單位
@import 樣式導入

WXSS 模板樣式 - rpx

1. 什么是 rpx 尺寸單位

rpx（responsive pixel）是微信小程序獨有的，用來解決屏適配的尺寸單位。

2. rpx 的實現原理

rpx 的實現原理非常簡單：鑒于不同設備屏幕的大小不同，為了實現屏幕的自動適配，rpx 把所有設備的屏幕，
在寬度上等分為750份（即：當前屏幕的總寬度為 750rpx）。

在較小的設備上，1rpx 所代表的寬度較小
在較大的設備上，1rpx 所代表的寬度較大

小程序在不同設備上運行的時候，會自動把 rpx 的樣式單位換算成對應的像素單位來渲染，從而實現屏幕適配。

3. rpx 與 px 之間的單位換算*

在 iPhone6 上，屏幕寬度為375px，共有 750 個物理像素，等分為 750rpx。則：
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素

官方建議：開發微信小程序時，設計師可以用iPhone6作為視覺稿的標準。
開發舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。

---

WXSS 模板樣式 - 樣式導入

1. 什么是樣式導入

使用 WXSS 提供的 @import 語法，可以導入外聯的樣式表

2. @import 的語法格式

@import 后跟需要導入的外聯樣式表的相對路徑，用 ; 表示語句結束。示例如下：

@import "common.wxss";

1. 全局樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。

2. 局部樣式

在頁面的 .wxss 文件中定義的樣式為局部樣式，只作用于當前頁面。
注意：
① 當局部樣式和全局樣式沖突時，根據就近原則，局部樣式會覆蓋全局樣式
② 當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式

---

全局配置

全局配置文件及常用的配置項
小程序根目錄下的app.json文件是小程序的全局配置文件。常用的配置項如下：

① pages

記錄當前小程序所有頁面的存放路徑

② window

全局設置小程序窗口的外觀

③ tabBar

設置小程序底部的 tabBar 效果

④ style

是否啟用新版的組件樣式

全局配置 - window

1. 小程序窗口的組成部分

2. 了解 window 節點常用的配置項

3. 設置導航欄的標題

設置步驟：app.json -> window -> navigationBarTitleText
需求：把導航欄上的標題，從默認的 “WeiXin”修改為“猿白”，效果如圖所示：

4. 設置導航欄的背景色

設置步驟：app.json -> window -> navigationBarBackgroundColor
需求：把導航欄標題的背景色，從默認的 #fff 修改為 #C7EDCC ，效果如圖所示：

5. 設置導航欄的標題顏色

設置步驟：app.json -> window -> navigationBarTextStyle
需求：把導航欄上的標題顏色，從默認的 black 修改為 white ，效果如圖所示：

注意： navigationBarTextStyle 的可選值只有 black 和 white

6. 全局開啟下拉刷新功能

概念：下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為。
設置步驟：app.json -> window -> 把 enablePullDownRefresh 的值設置為 true

注意：在 app.json 中啟用下拉刷新功能，會作用于每個小程序頁面！

7. 設置下拉刷新時窗口的背景色

當全局開啟下拉刷新功能之后，默認的窗口背景為白色。如果自定義下拉刷新窗口背景色，設置步驟為:
app.json -> window -> 為 backgroundColor 指定16進制的顏色值 #efefef。效果如下：

8. 設置下拉刷新時 loading 的樣式

當全局開啟下拉刷新功能之后，默認窗口的 loading 樣式為白色，如果要更改 loading 樣式的效果，設置步
驟為 app.json -> window -> 為 backgroundTextStyle 指定 dark 值。效果如下：

注意： backgroundTextStyle 的可選值只有 light 和 dark

9. 設置上拉觸底的距離

概念：上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為。
設置步驟： app.json -> window -> 為 onReachBottomDistance 設置新的數值
注意：默認距離為50px，如果沒有特殊需求，建議使用默認值即可。

---

全局配置 - tabBar

1. 什么是 tabBar

tabBar 是移動端應用常見的頁面效果，用于實現多頁面的快速切換。小程序中通常將其分為：

底部 tabBar
頂部 tabBar
注意：
tabBar中只能配置最少 2 個、最多 5 個 tab 頁簽
當渲染頂部 tabBar 時，不顯示 icon，只顯示文本

2. tabBar 的 6 個組成部分

① backgroundColor：tabBar 的背景色
② selectedIconPath：選中時的圖片路徑
③ borderStyle：tabBar 上邊框的顏色
④ iconPath：未選中時的圖片路徑
⑤ selectedColor：tab 上的文字選中時的顏色
⑥ color：tab 上文字的默認（未選中）顏色

3. tabBar 節點的配置項

4. 每個 tab 項的配置選項

---

全局配置 - 案例：配置 tabBar

1.尋找素材

來源：阿里圖標

2. 實現步驟

① 拷貝圖標資源
② 新建 3 個對應的 tab 頁面
③ 配置 tabBar 選項

3. 步驟1 - 拷貝圖標資源

① 把資料目錄中的 images 文件夾，拷貝到小程序項目根目錄中
② 將需要用到的小圖標分為 2 組，每組兩個，其中：

圖片名稱中包含 -active 的是選中之后的圖標
圖片名稱中不包含 -active 的是默認圖標

3. 步驟2 - 新建 3 個對應的 tab 頁面

通過app.json文件的pages節點，快速新建 2個對應的 tab 頁面，示例代碼如下：

"pages": ["pages/home/home", "pages/me/me","pages/index/index","pages/logs/logs"],

3. 步驟3 - 配置 tabBar 選項

① 打開 app.json 配置文件，和pages、window平級，新增tabBar節點
② tabBar 節點中，新增list數組，這個數組中存放的，是每個 tab 項的配置對象
③ 在 list 數組中，新增每一個 tab 項的配置對象。對象中包含的屬性如下：

pagePath 指定當前 tab 對應的頁面路徑【必填】
text 指定當前 tab 上按鈕的文字【必填】
iconPath 指定當前 tab 未選中時候的圖片路徑【可選】
selectedIconPath指定當前 tab 被選中后高亮的圖片路徑【可選】

4. 完整的配置代碼

"tabBar" : {"list": [{"pagePath": "pages/home/home","text":"首頁","iconPath" : "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "pages/me/me","text":"我的","iconPath" : "/images/tabs/me.png","selectedIconPath": "/images/tabs/me-active.png"}] },

---

頁面配置

1. 頁面配置文件的作用

小程序中，每個頁面都有自己的 .json 配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置。

2. 頁面配置和全局配置的關系

小程序中，app.json 中的 window 節點，可以全局配置小程序中每個頁面的窗口表現。
如果某些小程序頁面想要擁有特殊的窗口表現，此時，“頁面級別的 .json 配置文件”就可以實現這種需求。
注意：當頁面配置與全局配置沖突時，根據就近原則，最終的效果以頁面配置為準。

3. 頁面配置中常用的配置項

網絡數據請求

1. 小程序中網絡數據請求的限制

出于安全性方面的考慮，小程序官方對數據接口的請求做出了如下兩個限制：
① 只能請求 HTTPS 類型的接口
② 必須將接口的域名添加到信任列表中

2. 配置 request 合法域名

需求描述：假設在自己的微信小程序中，希望請求 https://www.baidu.com/ 域名下的接口
配置步驟：登錄微信小程序管理后臺 -> 開發 -> 開發設置 -> 服務器域名 -> 修改 request 合法域名
注意事項：
① 域名只支持 https 協議
② 域名不能使用 IP 地址或 localhost
③ 域名必須經過 ICP 備案
④ 服務器域名一個月內最多可申請 5 次修改

3. 發起 GET 請求

調用微信小程序提供的 wx.request() 方法，可以發起 GET 數據請求，示例代碼如下：

wx.request({ url: 'https : //www.xxxxx.cn/api/get'，//請求的接口地址，必須基于 https 協議method: 'GET',l/請求的方式 data: { l/發送到服務器的數據 name: 'zs', age: 22 }， success: (res) =→> {l/請求成功之后的回調函數console.log(res) } })

4. 發起 POST 請求

調用微信小程序提供的 wx.request() 方法，可以發起 POST 數據請求，示例代碼如下：

wx.request({ url: 'https :/ /ww.xxxxxx.cn/api/post'，ll請求的接口地址，必須基于 https 協議method: 'POST ',1/請求的方式 data: { 1/發送到服務器的數據 name: 'ls '， gender: '男'}， success: (res) =>{ l/請求成功之后的回調函數console.log(res) } }

5. 在頁面剛加載時請求數據

在很多情況下，我們需要在頁面剛加載的時候，自動請求一些初始化的數據。此時需要在頁面的 onLoad 事件
中調用獲取數據的函數，示例代碼如下：

5. 跳過 request 合法域名校驗

如果后端程序員僅僅提供了 http 協議的接口、暫時沒有提供 https 協議的接口。
此時為了不耽誤開發的進度，我們可以在微信開發者工具中，臨時開啟「開發環境不校驗請求域名、TLS 版本及 HTTPS 證書」選項，跳過 request 合法域名的校驗。

6. 關于跨域和 Ajax 的說明

跨域問題只存在于基于瀏覽器的 Web 開發中。由于小程序的宿主環境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問題。
Ajax 技術的核心是依賴于瀏覽器中的 XMLHttpRequest 這個對象，由于小程序的宿主環境是微信客戶端，所以小程序中不能叫做“發起 Ajax 請求”，而是叫做“發起網絡數據請求”。

總結

以上是生活随笔為你收集整理的微信小程序开发基础（02模板与配置）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。