微信小程序学习笔记(二)模板与配置
文章目錄
- 1. WXML 模板語法
- 1.1 數據綁定
- 1.1.1 數據綁定的基本原則
- 1.1.2 在 data 中定義頁面的數據
- 1.1.3 Mustache 語法的格式
- 1.1.4 Mustache 語法的應用場景
- 1.1.5 動態綁定內容
- 1.1.6 動態綁定屬性
- 1.1.7 三元運算
- 1.1.8 算數運算
- 1.2 事件綁定
- 1.2.1 什么是事件
- 1.2.2 小程序中常用的事件
- 1.2.3 事件對象的屬性列表
- 1.2.4 target 和 currentTarget 的區別
- 1.2.5 bindtap 的語法格式
- 1.2.6 在事件處理函數中為 data 中的數據賦值
- 1.2.7 事件傳參
- 1.2.8 bindinput 的語法格式
- 1.2.9 實現文本框和 data 之間的數據同步
- 1.3 條件渲染
- 1.3.1 wx:if
- 1.3.2 結合 `<block>` 使用 wx:if
- 1.3.3 hidden
- 1.3.4 wx:if 與 hidden 的對比
- 1.4 列表渲染
- 1.4.1 wx:for
- 1.4.2 wx:key 的使用
- 2. WXSS 模板樣式
- 2.1 WXSS 和 CSS 的關系
- 2.2 rpx 尺寸單位
- 2.2.1 rpx 的實現原理
- 2.2.2 rpx 與 px 之間的單位換算
- 2.3 樣式導入
- 2.4 全局樣式和局部樣式
- 3. 全局配置
- 3.1 全局配置文件及常用的配置項
- 3.2 window
- 3.2.1 小程序窗口的組成部分
- 3.2.2 了解 window 節點常用的配置項
- 3.2.3 設置導航欄的標題
- 3.2.4 設置導航欄的背景色
- 3.2.5 設置導航欄的標題顏色
- 3.2.6 全局開啟下拉刷新功能
- 3.2.7 設置下拉刷新時窗口的背景色
- 3.2.8 設置下拉刷新時 loading 的樣式
- 3.2.9 設置上拉觸底的距離
- 3.3 tabBar
- 3.3.1 什么是 tabBar
- 3.3.2 tabBar 的 6 個組成部分
- 3.3.3 tabBar 節點的配置項
- 3.3.4 每個 tab 項的配置選項
- 4. 頁面配置
- 4.1 頁面配置和全局配置的關系
- 4.2 頁面配置中常用的配置項
- 5. 網絡數據請求
- 5.1 小程序中網絡數據請求的限制
- 5.2 配置 request 合法域名
- 5.3 發起 GET / POST 請求
- 5.4 在頁面剛加載時請求數據
- 5.5 跳過 request 合法域名校驗
- 5.6 關于跨域和 Ajax 的說明
1. WXML 模板語法
1.1 數據綁定
1.1.1 數據綁定的基本原則
① 在 data 中定義數據
② 在 WXML 中使用數據
1.1.2 在 data 中定義頁面的數據
在頁面對應的 .js 文件中，把數據定義到 data 對象中即可：
Page({/* 頁面的初始數據 */data: {info: "hello world", // 字符串類型arr: ["涼宮", "長門", "阿虛"], // 數組類型}, });1.1.3 Mustache 語法的格式
把 data 中的數據綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量或表達式包起來即可。語法格式為：
<view>{{ 變量或表達式 }}</view>1.1.4 Mustache 語法的應用場景
Mustache 語法的主要應用場景如下：
- 綁定內容
- 綁定屬性
- 運算（三元運算、算術運算等）
1.1.5 動態綁定內容
頁面的數據如下：
Page({data: {info: "hello world",}, });頁面的結構如下：
<view>{{ info }}</view>1.1.6 動態綁定屬性
頁面的數據如下：
Page({data:{imgSrc:'./image/logo.png'} })頁面的結構如下：
<image src="{{imgSrc}}"></image>1.1.7 三元運算
頁面的數據如下：
Page({data:{randomNum: Math.random() * 10, // 生成10以內的隨機數，} })頁面的結構如下：
<view>{{randomNum > 5?'數字大于5': "數字小于等于5"}}</view>1.1.8 算數運算
數據的數據如下：
Page({data:{randomNum: Math.random().toFixed(2),} })頁面的結構如下：
<view>{{randomNum1 * 100}}</view>1.2 事件綁定
1.2.1 什么是事件
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理
1.2.2 小程序中常用的事件
| tap | bindtap 或 bind:tap | 手指觸摸后馬上離開，類似于 HTML 中的 click 事件 |
| input | bindinput 或 bind:input | 文本框的輸入事件 |
| change | bindchange 或 bind:change | 狀態改變時觸發 |
1.2.3 事件對象的屬性列表
當事件回調觸發的時候，會收到一個事件對象 event，它的詳細屬性如下表所示：
| type | String | 事件類型 |
| timeStamp | Integer | 頁面打開到觸發事件所經過的毫秒數 |
| target | Object | 觸發事件的組件的一些屬性值集合 |
| currentTarget | Object | 當前組件的一些屬性值集合 |
| detail | Object | 額外的信息 |
| touches | Array | 觸摸事件，當前停留在屏幕中的觸摸點信息的數組 |
| changedTouches | Array | 觸摸事件，當前變化的觸摸點信息的數組 |
1.2.4 target 和 currentTarget 的區別
target 是觸發該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件。舉例如下：
點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層 view 的 tap 事件處理函數。此時，對于外層的 view 來說：
- e.target 指向的是觸發事件的源頭組件，因此，e.target 是內部的按鈕組件
- e.currentTarget 指向的是當前正在觸發事件的那個組件，因此，e.currentTarget 是當前的 view 組件
1.2.5 bindtap 的語法格式
在小程序中，不存在 HTML 中的 onclick 鼠標點擊事件，而是通過 tap 事件來響應用戶的觸摸行為。
① 通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
<button type="primary" bindtap="btnTapHandler">按鈕</button>② 在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event（一般簡寫成 e） 來接收：
Page({// 定義按鈕的事件處理函數btnTapHandler(e) {console.log(e);}, })1.2.6 在事件處理函數中為 data 中的數據賦值
通過調用 this.setData(dataObject) 方法，可以給頁面 data 中的數據重新賦值，示例如下：
// 頁面的 .js 文件 Page({data:{count:0}// 修改count的值changeNum() {this.setData({count: this.data.count + 1,});}, })1.2.7 事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數。例如，下面的代碼將不能正常工作：
<button bindtap="btnHandler(123)">事件傳參</button>因為小程序會把 bindtap 的屬性值，統一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123) 的事件處理函數。
可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數的名字，示例代碼如下：
<button bindtap="btnHandler" data-info="{{2}}">事件傳參</button>最終： info 會被解析為參數名；數值 2 會被解析為參數的值
在事件處理函數中，通過 event.target.dataset.參數名 即可獲取到具體參數的值，示例代碼如下：
Page({btnHandler(e){// dataset 是一個對象，包含了所有通過 data-* 傳遞過來的參數項console.log(e.target.dataset);// 通過 dataset 可以訪問到具體參數的值console.log(e.target.dataset.info)}, });1.2.8 bindinput 的語法格式
在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：
① 通過 bindinput，可以為文本框綁定輸入事件：
<input type="text" bindinput="inputHandler"/>② 在頁面的 .js 文件中定義事件處理函數：
inputHandler(e) {// e.detail.value 是變化過后，文本框最新的值console.log(e.detail.value); },1.2.9 實現文本框和 data 之間的數據同步
實現步驟：
- ① 定義數據
- ② 渲染結構
- ③ 美化樣式
- ④ 綁定 input 事件處理函數
1、定義數據：
Page({data:{msg:'你好'} })2、渲染結構：
<input type="text" bindinput="inputHandler" value="{{msg}}" />3、美化樣式：
input{border: 1px solid #eee;margin: 5px;padding: 5px;border-radius: 5px; }4、綁定 input 事件處理函數：
// 定義文本框改變的處理事件 inputHandler(e) {this.setData({// 通過 e.detail.value 獲取到文本框最新的值msg: e.detail.value,}); },1.3 條件渲染
1.3.1 wx:if
在小程序中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> true </view>也可以用 wx:elif 和 wx:else 來添加 else 判斷：
<view wx:if="{{type === 1}}">男</view> <view wx:elif="{{type === 2}}">女</view> <view wx:else>保密</view>1.3.2 結合 <block> 使用 wx:if
如果要一次性控制多個組件的展示與隱藏，可以使用一個 <block></block> 標簽將多個組件包裝起來，并在 <block> 標簽上使用 wx:if 控制屬性，示例如下：
<block wx:if="{{false}}"><view>v1</view><view>v2</view> </block>注意： <block> 它只是一個包裹性質的容器，不會在頁面中做任何渲染。
1.3.3 hidden
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：
<!--flag:true --> <view hidden="{{flag}}">是否隱藏</view>1.3.4 wx:if 與 hidden 的對比
① 運行方式不同
- wx:if 以動態創建和移除元素的方式，控制元素的展示與隱藏
- hidden 以切換樣式的方式（display: none / block;），控制元素的顯示與隱藏
② 使用建議
- 頻繁切換時，建議使用 hidden
- 控制條件復雜時，建議使用 wx:if 搭配 wx:elif、wx:else 進行展示與隱藏的切換
1.4 列表渲染
1.4.1 wx:for
通過 wx:for 可以根據指定的數組，循環渲染重復的組件結構，語法示例如下：
<!-- data: {arr: ["涼宮", "長門", "阿虛"], }--> <!-- 列表渲染; arr 已在data中定義 --> <view wx:for="{{arr}}">索引是{{index}}--當前項是：{{item}} </view>默認情況下，當前循環項的索引用 index 表示；當前循環項用 item 表示。但也可以手動指定索引和當前項的變量名
- 使用 wx:for-index 可以指定當前循環項的索引的變量名
- 使用 wx:for-item 可以指定當前項的變量名
示例代碼如下：
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemName">索引是{{idx}},當前項是{{itemName}} </view>1.4.2 wx:key 的使用
類似于 Vue 列表渲染中的 :key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：
// data 數據 data:{userList: [{id: 1, name: "涼宮"},{id: 2, name: "長門"},{id: 3, name: "阿虛"},], } // wxml 結構 <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>2. WXSS 模板樣式
WXSS (WeiXin Style Sheets)是一套樣式語言，用于美化 WXML 的組件樣式，類似于網頁開發中的 CSS。
2.1 WXSS 和 CSS 的關系
WXSS 具有 CSS 大部分特性，同時，WXSS 還對 CSS 進行了擴充以及修改，以適應微信小程序的開發。與 CSS 相比，WXSS 擴展的特性有：
- rpx 尺寸單位
- @import 樣式導入
2.2 rpx 尺寸單位
rpx（responsive pixel）是微信小程序獨有的，用來解決屏適配的尺寸單位。
2.2.1 rpx 的實現原理
rpx 的實現原理非常簡單：鑒于不同設備屏幕的大小不同，為了實現屏幕的自動適配，rpx 把所有設備的屏幕，在寬度上等分為 750 份（即：當前屏幕的總寬度為 750rpx）。
- 在較小的設備上，1rpx 所代表的寬度較小
- 在較大的設備上，1rpx 所代表的寬度較大
小程序在不同設備上運行的時候，會自動把 rpx 的樣式單位換算成對應的像素單位來渲染，從而實現屏幕適配
2.2.2 rpx 與 px 之間的單位換算
在 iPhone6 上，屏幕寬度為375px，共有 750 個物理像素，等分為 750rpx。則：
750rpx = 375px = 750 物理像素 換算為 1rpx = 0.5px = 1物理像素
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
官方建議：開發微信小程序時，設計師可以用 iPhone6 作為視覺稿的標準。
開發舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。
2.3 樣式導入
使用 WXSS 提供的 @import 語法，可以導入外聯的樣式表
@import 后跟需要導入的外聯樣式表的相對路徑，用 ; 表示語句結束。示例如下：
/* common/common.wxss */ view {padding: 5px; } /* pages/home/home.wxss */ @import '../../common/common.wxss';2.4 全局樣式和局部樣式
1、全局樣式：定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。
2、局部樣式：在頁面的 .wxss 文件中定義的樣式為局部樣式，只作用于當前頁面。
3、注意點：
- ① 當局部樣式和全局樣式沖突時，根據就近原則，局部樣式會覆蓋全局樣式
- ② 當局部樣式的權重大于或等于全局樣式的權重時，也會覆蓋全局的樣式
3. 全局配置
3.1 全局配置文件及常用的配置項
小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項如下：
- ① pages：記錄當前小程序所有頁面的存放路徑
- ② window：全局設置小程序窗口的外觀
- ③ tabBar：設置小程序底部的 tabBar 效果
- ④ style：是否啟用新版的組件樣式
3.2 window
3.2.1 小程序窗口的組成部分
3.2.2 了解 window 節點常用的配置項
| navigationBarTitleText | String | 字符串 | 導航欄標題文字內容 |
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000 |
| navigationBarTextStyle | String | white | 導航欄標題顏色，僅支持 black / white |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式，僅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否全局開啟下拉刷新 |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為 px |
3.2.3 設置導航欄的標題
設置步驟：app.json -> window -> navigationBarTitleText
需求：把導航欄上的標題，從默認的 “WeChat” 修改為 “首頁”，效果如圖所示：
3.2.4 設置導航欄的背景色
- 設置步驟：app.json -> window -> navigationBarBackgroundColor
- 需求：把導航欄標題的背景色，從默認的 #fff 修改為 #ee3 ，效果如圖所示：
3.2.5 設置導航欄的標題顏色
-
設置步驟：app.json -> window -> navigationBarTextStyle
-
需求：把導航欄上的標題顏色，從默認的 black 修改為 white ，效果如圖所示：
注意：navigationBarTextStyle 的可選值只有 black 和 white
3.2.6 全局開啟下拉刷新功能
- 概念：下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為。
- 設置步驟：app.json -> window -> enablePullDownRefresh 的值設置為 true
- 注意：在 app.json 中啟用下拉刷新功能，會作用于小程序的每個頁面！
3.2.7 設置下拉刷新時窗口的背景色
- 當全局開啟下拉刷新功能之后，默認的窗口背景為白色。
- 自定義設置下拉刷新窗口背景色步驟：app.json -> window -> backgroundColor 指定16進制的顏色值 #efefef。效果如下：
3.2.8 設置下拉刷新時 loading 的樣式
當全局開啟下拉刷新功能之后，默認窗口的 loading 樣式為白色，如果要更改 loading 樣式的效果，設置步驟為 app.json -> window -> backgroundTextStyle 指定 dark 值。效果如下：
注意： backgroundTextStyle 的可選值只有 light 和 dark
3.2.9 設置上拉觸底的距離
- 概念：上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為。
- 設置步驟： app.json -> window -> onReachBottomDistance 設置新的數值
- 注意：默認距離為50px，如果沒有特殊需求，建議使用默認值即可。
3.3 tabBar
3.3.1 什么是 tabBar
tabBar 是移動端應用常見的頁面效果，用于實現多頁
面的快速切換。小程序中通常將其分為：
- 底部 tabBar
- 頂部 tabBar
注意：
- tabBar中只能配置最少 2 個、最多 5 個 tab 頁簽
- 當渲染頂部 tabBar 時，不顯示 icon，只顯示文本
3.3.2 tabBar 的 6 個組成部分
① backgroundColor：tabBar 的背景色
② selectedIconPath：選中時的圖片路徑
③ borderStyle：tabBar 上邊框的顏色
④ iconPath：未選中時的圖片路徑
⑤ selectedColor：tab 上的文字選中時的顏色
⑥ color：tab 上文字的默認（未選中）顏色
3.3.3 tabBar 節點的配置項
| position | String | 否 | bottom | tabBar 的位置，僅支持 bottom/top |
| borderStyle | String | 否 | black | tabBar 上邊框的顏色，僅支持 black/white |
| color | HexColor | 否 | - | tab 上文字的默認（未選中）顏色 |
| selectedColor | HexColor | 否 | - | tab 上的文字選中時的顏色 |
| backgroundColor | HexColor | 否 | - | tabBar 的背景色 |
| list | Array | 是 | - | tab 頁簽的列表，最少 2 個、最多 5 個 tab |
3.3.4 每個 tab 項的配置選項
| pagePath | String | 是 | 頁面路徑，頁面必須在 pages 中預先定義 |
| text | String | 是 | tab 上顯示的文字 |
| iconPath | String | 否 | 未選中時的圖標路徑；當 postion 為 top 時，不顯示 icon |
| selectedIconPath | String | 否 | 選中時的圖標路徑；當 postion 為 top 時，不顯示 icon |
4. 頁面配置
小程序中，每個頁面都有自己的 .json 配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置。
4.1 頁面配置和全局配置的關系
- 小程序中，app.json 中的 window 節點，可以全局配置小程序中每個頁面的窗口表現。
- 如果某些小程序頁面想要擁有特殊的窗口表現，此時，頁面級別的 .json 配置文件就可以實現這種需求
- 注意：當頁面配置與全局配置沖突時，根據就近原則，最終的效果以頁面配置為準。
4.2 頁面配置中常用的配置項
| navigationBarBackgroundColor | HexColor | #000000 | 當前頁面導航背景顏色，如 #000000 |
| navigationBarTextStyle | String | white | 當前頁面導航欄標題顏色，僅支持 black / white |
| navigationBarTitleText | String | - | 當前頁面導航欄標題文字內容 |
| backgroundColor | HexColor | #ffffff | 當前頁面窗口的背景色 |
| backgroundTextStyle | String | dark | 當前頁面下拉 loading 的樣式，僅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否為當前頁面開啟下拉刷新的效果 |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為 px |
5. 網絡數據請求
5.1 小程序中網絡數據請求的限制
出于安全性方面的考慮，小程序官方對數據接口的請求做出了如下兩個限制：
- ① 只能請求 HTTPS 類型的接口
- ② 必須將接口的域名添加到信任列表中
5.2 配置 request 合法域名
- 需求描述：假設在自己的微信小程序中，希望請求 https://www.escook.cn/ 域名下的接口
- 配置步驟：登錄微信小程序管理后臺 -> 開發 -> 開發設置 -> 服務器域名 -> 修改 request 合法域名
- 注意事項：
① 域名只支持 https 協議
② 域名不能使用 IP 地址或 localhost
③ 域名必須經過 ICP 備案
④ 服務器域名一個月內最多可申請 50 次修改
5.3 發起 GET / POST 請求
調用微信小程序提供的 wx.request() 方法，可以發起 GET 數據請求，示例代碼如下：
wx.request({url: 'https://www.escook.cn/api/get', // 請求的接口地址,必須基于https協議method: 'GET', // 請求的方式data: { // 發送到服務器的數據name: 'zs',age: 20},success: (res) => { // 請求成功之后的回調函數console.log(res.data);} })調用微信小程序提供的 wx.request() 方法，可以發起 POST 數據請求，示例代碼如下：
wx.request({url: 'https://www.escook.cn/api/post',method: 'POST',data: {name: 'suzumiya',age: 14,},success: (res) => {console.log(res)} }); },5.4 在頁面剛加載時請求數據
在很多情況下，我們需要在頁面剛加載的時候，自動請求一些初始化的數據。此時需要在頁面的 onLoad 事件中調用獲取數據的函數，示例代碼如下：
Page({data: {info:{},},// 獲取數據的方法getInfo() {wx.request({url: 'https://www.escook.cn/api/get',method: 'GET',data: {name: 'zs',age: 20},success: (res) => {this.setData({info: res.data,})}})},/* 生命周期函數--監聽頁面加載 */onLoad(options) {this.getInfo();}, })5.5 跳過 request 合法域名校驗
如果后端程序員僅僅提供了 http 協議的接口、暫時沒有提供 https 協議的接口。
此時為了不耽誤開發的進度，我們可以在微信開發者工具中，臨時開啟「開發環境不校驗請求域名、TLS 版本及 HTTPS 證書」選項，跳過 request 合法域名的校驗。
注意：跳過 request 合法域名校驗的選項，僅限在開發與調試階段使用！
5.6 關于跨域和 Ajax 的說明
- 跨域問題只存在于基于瀏覽器的 Web 開發中。由于小程序的宿主環境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問題。
- Ajax 技術的核心是依賴于瀏覽器中的 XMLHttpRequest 這個對象，由于小程序的宿主環境是微信客戶端，所以小程序中不能叫做“發起 Ajax 請求”，而是叫做“發起網絡數據請求”。
總結
以上是生活随笔為你收集整理的微信小程序学习笔记(二)模板与配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 韩泰机器人_韩泰轮胎怎么样？进击的韩泰，
- 下一篇： Java项目：ssm+jsp实现手机WA