微信小程序学习笔记(二)模板与配置
文章目錄
- 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