模板與配置

(一)WXML模板語法

1.數據綁定

1.1 數據綁定的基本原則

1.2 在data中定義數據

1.3 Mustache語法格式

?1.4?Mustache語法的應用場景

1.5 Mustache動態綁定內容

?1.6 Mustache動態綁定屬性

1.7 Mustache三元運算

?1.8 Mustache算數運算

?2.事件綁定

2.1 事件概述

2.2? 小程序中常用的事件

?2.3事件對象的屬性列表

?2.4 target 和 currentTarget 的區別

2.5?bindtap 的語法格式

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

2.7 事件傳參

2.8 bindinput的語法格式

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

3.條件渲染

3.1 wx:if / wx:elif / wx:else

?3.2 結合使用 wx:if

?3.3 hidden

?3.4 wx:if 與 hidden 的對比 (v-if / v-show)

4. 列表渲染

4.1 wx:for

4.2 手動指定索引和當前項的變量名

?4.3 wx:key 的使用

?(二)WXSS模板語法

1.wxss

1.1.wxss和css的關系

wss與css相比,wxss的擴展特性主要有

2.rpx

2.1 什么是rpx尺寸單位

2.2 rpx的實現原理(解決屏幕適配的方案)

3.樣式導入

3.1 什么是樣式導入

3.2 @import語法

4.全局樣式和局部樣式

4.1 全局樣式

4.2 局部樣式

(三) 全局配置

1.全局配置文件及常用的配置項

1.1 小程序窗口組成部分

2. window節點常用的配置項

2.1?設置導航欄的標題?navigationBarTitleText

2.2 設置導航欄的背景色?navigationBarBackgroundColor

2.3 設置導航欄的標題顏色?navigationBarTextStyle

2.4 全局開啟下拉刷新的功能?enablePullDownRefresh

2.5 設置下拉刷新時窗口的背景顏色?backgroundColor

2.6 設置下拉刷新時loading的樣式?backgroundTextStyle

2.7 設置上拉觸底的距離

3 tabBar?

3.1 tabBar

3.2 tabBar 的6個組成部分

4 tabBar節點的配置項

每個tab項的配置選項

(四) 頁面配置

1.頁面配置文件和全局配置文件的關系

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

(五) 網絡數據請求

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

?2. 配置request合法域名

3.發起get請求

?4.發起post請求

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

6.跳過 request 合法域名校驗

?7.關于跨域和ajax的說明

---

模板與配置

(一)WXML模板語法

1.數據綁定

1.1 數據綁定的基本原則

• 在data中定義數據
• 在wxml中使用數據

1.2 在data中定義數據

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

1.3 Mustache語法格式

在data中的數據綁定到頁面中渲染,使用Mustache語法(雙大括號)將變量包起來即可,語法格式:

注意:?Mustache語法即為vue中的插值表達式

?1.4?Mustache語法的應用場景

• 綁定內容
• 綁定屬性
• 運算( 三元運算 / 算樹運算等 )

1.5 Mustache動態綁定內容

?1.6 Mustache動態綁定屬性

?注意: 在vue中數據的雙向綁定通過 v-bind 實現,但在小程序中不同,綁定內容和綁定屬性都需要使用?Mustache 語法

1.7 Mustache三元運算

?1.8 Mustache算數運算

?2.事件綁定

2.1 事件概述

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

2.2? 小程序中常用的事件

?2.3事件對象的屬性列表

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

?2.4 target 和 currentTarget 的區別

target 是觸發事件的源頭組件 , currentTarget 是當前事件所綁定的組件

點擊內部的按鈕時,點擊時間以冒泡的方式向外擴散,也會觸發外層view?的 tap 事件處理函數

此時對于外部view來說:

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

2.5?bindtap 的語法格式

在小程序中,不存在html中的onclick鼠標點擊事件,而是通過tap事件來響應用戶的觸摸行為

• 通過bindtap可以為組件綁定tap觸摸事件:

• 在頁面的.js文件中定義對應的事件處理函數,事件參數通過形參event(一般寫成e)來接收

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

通過調用 this.setData(dataObject) 方法,可以給頁面data中的數據重新賦值

?

2.7 事件傳參

小程序中的事件傳參比較特殊,不能在綁定事件的同時為事件處理函數傳遞參數

在vue中可以在綁定事件的時候進行傳值:小程序和vue的區別

因為小程序會把bindtap的屬性值統一當作事件名稱來處理,相當于要調用一個名稱為 btnHandler(123)的事件處理函數

可以提供 data-* 自定義屬性傳參,其中 * 代表的是參數的名字,示例:

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

獲取參數的值: 在事件處理函數中,通過event.target.dataset.參數名 即可獲取到具體參數的值,示例:

?注意:傳參時,data-info=" 2 "?代表string類型2 ;data-info=" {{ 2 }}?" 才代表number類型的數字2

2.8 bindinput的語法格式

在小程序中,通過input事件來響應文本輸入框的輸入事件,語法格式為:

• 通過bindinput可以為文本框綁定輸入事件

• 在頁面的js文件中定義事件處理函數

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

實現步驟:

• 定義數據

• 渲染結構

• 美化樣式

• 綁定input事件處理函數

3.條件渲染

3.1 wx:if / wx:elif / wx:else

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

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

wx:if wx:elif都需要添加判斷條件 wx:else表示最后一種情況,不需要添加條件

?

?3.2 結合<block>使用 wx:if

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

注意:<block>并不是一個組件,它只是一個包裹性質的容器,不會在頁面中做任何渲染.?

?3.3 hidden

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

?3.4 wx:if 與 hidden 的對比 (v-if / v-show)

(1)運行方式不同

• wx:if 以動態創建和移除元素的方式控制元素的展示與隱藏
• hidden 以切換樣式的方式 (類似于 display : none/block ;) 控制元素的顯示與隱藏

(2)使用建議

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

4. 列表渲染

4.1 wx:for

通過wx:for可以根據指定的數組,循環渲染重復的數組,語法:

?默認情況下,當前循環項的索引用inndex表示,當前循環項用item表示

4.2 手動指定索引和當前項的變量名

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

示例:

?4.3 wx:key 的使用

類似于vue列表循環中的 :key ,小程序在實現列表渲染時,也建議為渲染出來的列表指定唯一的key值,從而提高渲染效率,代碼示例:

注意:在指定key的時候外面不用包Mustache語法,直接將對應的key值填充就可以,也建議將id或index作為key值

?(二)WXSS模板語法

1.wxss

wxss 是一套樣式語言,用于美化wxml的組件樣式,類似于網頁開發中的css

1.1.wxss和css的關系

wxss具有css大部分特性,同時,wxss還對css進行了擴充以及修改,以適應微信小程序的開發

wss與css相比,wxss的擴展特性主要有

• rpx尺寸單位
• @import樣式導入

2.rpx

2.1 什么是rpx尺寸單位

rpx: 是微信小程序獨有的,用來解決屏適配的尺寸單位

2.2 rpx的實現原理(解決屏幕適配的方案)

rpx的實現原理非常簡單 : 鑒于不同設備屏幕尺寸大小不同,為了實現屏幕的自動適配,rpx把所有設備的屏幕,在寬度上等分750份, ( 即:當前屏幕的總寬度為750rpx? )

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

3.樣式導入

3.1 什么是樣式導入

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

3.2 @import語法

@import ?" 外聯樣式表的相對路徑 "? ;?

4.全局樣式和局部樣式

4.1 全局樣式

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

4.2 局部樣式

在頁面的 .wxss 文件中定義的樣式為局部樣式,只作用于當前頁面

注意:

• 當全局樣式和局部樣式沖突時,根據就近原則,局部樣式會覆蓋全局樣式
• 當局部樣式的權重大于或等于全局樣式的權重時,才會覆蓋全局樣式

注意:

權重比較: !important > 內斂樣式 > id > 類選擇器&屬性選擇器&偽類選擇器 > 元素選擇器&偽類選擇器 > 通配符 > 繼承

app.wxss => view:nth-child(1){ backgroung-color : blue?}

index.wxss => view{ background-color: pink }?

局部樣式不會覆蓋全局樣式,因為全局樣式權重高于局部樣式

(三) 全局配置

微信小程序配置文件_卷心菜007的博客-CSDN博客

1.全局配置文件及常用的配置項

小程序根目錄下的app.json文件就是小程序的全局配置文件,常用的配置項:

• pages : 記錄當前小程序所有頁面的存放路徑
• window : 全局設置小程序窗口的外觀
• tabBar : 設置小程序底部的tabBar效果
• style : 是否啟用新版的組件樣式?

1.1 小程序窗口組成部分

2. window節點常用的配置項

以navigationBar 開頭的配置項 => 配置導航欄

以background 開頭的配置項 => 配置窗口背景樣式

其余樣式配置項 => 用來配置頁面效果的配置項

2.1?設置導航欄的標題?navigationBarTitleText

設置步驟: app.json => window => navigationBarTitleText

"window" :{ "navigationBarTitleText" : "我的應用" }

2.2 設置導航欄的背景色?navigationBarBackgroundColor

設置步驟: app.json => window =>?navigationBarBackgroundColor

"window" :{ "navigationBarBackgroundColor" : "#2b4b6b" }

注意: 導航欄顏色設置只支持十六進制顏色設置

2.3 設置導航欄的標題顏色?navigationBarTextStyle

設置步驟: app.json => window =>?navigationBarTextStyle

"window" :{ "navigationBarTextStyle" : "white" }

注意:?navigationBarTextStyle 導航欄標題顏色的可選值只有black 和 white?

2.4 全局開啟下拉刷新的功能?enablePullDownRefresh

設置步驟 : app.json => window => enablePullDownRefresh 的值設置為 true

"window" :{ "enablePullDownRefresh" : true } //默認為false

注意: 在app.json中開啟下拉刷新功能,會作用于每個小程序頁面, 在模擬器中下拉刷新存在誤差

2.5 設置下拉刷新時窗口的背景顏色?backgroundColor

當全局開啟了下拉刷新的功能后,默認的窗口背景為白色.

設置步驟 : app.json => window => 為backgroundColor指定16進制的顏色值

"window" :{ "backgroundColor" : " #efefef "?}?

2.6 設置下拉刷新時loading的樣式?backgroundTextStyle

當全局開啟了下拉刷新的功能后,默認的窗口的loading 為白色.

設置步驟 : app.json => window => 為backgroundTextStyle指定 dark 值

"window" :{ "backgroundTextStyle" : " dark?"?}?

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

2.7 設置上拉觸底的距離

概念: 上拉觸底是移動端的專有名詞,通過手指在屏幕上的拉滑操作,從而加載更多數據的行為

設置步驟 : app.json => window => 為onReachBottomDistance 設置新的數值

注意: 默認距離為50px,沒有特殊需求時,保持默認值即可

"window" :{ "onReachBottomDistance" : 100}?

3 tabBar?

3.1 tabBar

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

• 底部tabBar
• 頂部tabBar

注意:

• tabBar中只能配置最少2個,最多5個tab標簽
• 當渲染頂部tabBar時,不顯示icon圖標,只顯示文本

3.2 tabBar 的6個組成部分

• backgroundColor : tabBar的背景顏色
• selsctedconPath : 選中時的圖片路徑
• borderStyle : tabBar上邊框的顏色
• iconPath :? 未選中時的圖片路徑
• selectedColor : tab上的文字選中時的顏色
• color : tab 上文字的默認(未選中)顏色

4 tabBar節點的配置項

每個tab項的配置選項

?"tabBar" : {?

"list" :[ { "pagePath":"pages/index/index" , "text":"index" } ,

{?"pagePath":"pages/test/test" , "text":"test" } ]? ?}

(四) 頁面配置

1.頁面配置文件和全局配置文件的關系

• 當全局樣式和局部樣式沖突時,根據就近原則,局部樣式會覆蓋全局樣式
• 當局部樣式的權重大于或等于全局樣式的權重時,才會覆蓋全局樣式

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

?注意: 并不是所有的頁面都是需要下拉刷新,不在app.json中定義下拉刷新,在設計頁面下拉刷新時,將下拉刷新寫在頁面配置中

message.json => { "enablePullDownRefresh" : true }

(五) 網絡數據請求

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

出于安全性方面的考慮,小程序官方對數據接口請求做出了限制:

• 只能請求 HTTPS 類型的接口 , 不能請求HTTP類接口
• 必須將接口的域名添加到信任列表中

?2. 配置request合法域名

?配置步驟:登錄微信小程序管理后臺=>開發=>開發設置=>服務器域名=>修改request合法域名

注意:

• 域名只支持 https 協議
• 域名不能使用 IP 地址或 localhost
• 域名必須經過ICP備案
• 服務器域名一個月內最多可申請五次

3.發起get請求

調用微信小程序官方提供的 wx:request() 方法,可以發起get請求,實例:

home.wxml配置

home.js配置,res.data是最后的真實數據

?4.發起post請求

調用微信小程序提供的 wx.request()方法,可以發起post數據請求,實例:

home.js配置,res.data是最后的真實數據

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

在頁面剛加載的時候,自動請求一些初始化的數據,需要在頁面的onLoad事件中調用獲取數據的函數,實例:

?注意: 通過this調用,this代表當前頁面加載的的實例

6.跳過 request 合法域名校驗

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

跳過request選項.

注意 : 跳過request 合法域名校驗的選項,僅限在來發與調試階段使用

?7.關于跨域和ajax的說明

跨域問題只存在于基于瀏覽器的web開發中,由于小程序的宿主環境不是瀏覽器,而是微信客戶端,所以小程序中不存在跨域問題.

ajax技術的核心是依賴于瀏覽器中的 XMLHTTPRequest 這個對象,由于小程序的宿主環境是微信客戶端,所以小程序中不能叫做 " 發起ajax請求?" ,而是叫做" 發起網絡數據請求 "

總結

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

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