模板與配置

(一)WXML模板語法

1.數(shù)據(jù)綁定

1.1 數(shù)據(jù)綁定的基本原則

1.2 在data中定義數(shù)據(jù)

1.3 Mustache語法格式

?1.4?Mustache語法的應(yīng)用場景

1.5 Mustache動態(tài)綁定內(nèi)容

?1.6 Mustache動態(tài)綁定屬性

1.7 Mustache三元運算

?1.8 Mustache算數(shù)運算

?2.事件綁定

2.1 事件概述

2.2? 小程序中常用的事件

?2.3事件對象的屬性列表

?2.4 target 和 currentTarget 的區(qū)別

2.5?bindtap 的語法格式

2.6 在事件處理函數(shù)中為data中的數(shù)據(jù)賦值

2.7 事件傳參

2.8 bindinput的語法格式

?2.9實現(xiàn)文本框和data之間的數(shù)據(jù)同步

3.條件渲染

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

?3.2 結(jié)合使用 wx:if

?3.3 hidden

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

4. 列表渲染

4.1 wx:for

4.2 手動指定索引和當(dāng)前項的變量名

?4.3 wx:key 的使用

?(二)WXSS模板語法

1.wxss

1.1.wxss和css的關(guān)系

wss與css相比,wxss的擴(kuò)展特性主要有

2.rpx

2.1 什么是rpx尺寸單位

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

3.樣式導(dǎo)入

3.1 什么是樣式導(dǎo)入

3.2 @import語法

4.全局樣式和局部樣式

4.1 全局樣式

4.2 局部樣式

(三) 全局配置

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

1.1 小程序窗口組成部分

2. window節(jié)點常用的配置項

2.1?設(shè)置導(dǎo)航欄的標(biāo)題?navigationBarTitleText

2.2 設(shè)置導(dǎo)航欄的背景色?navigationBarBackgroundColor

2.3 設(shè)置導(dǎo)航欄的標(biāo)題顏色?navigationBarTextStyle

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

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

2.6 設(shè)置下拉刷新時loading的樣式?backgroundTextStyle

2.7 設(shè)置上拉觸底的距離

3 tabBar?

3.1 tabBar

3.2 tabBar 的6個組成部分

4 tabBar節(jié)點的配置項

每個tab項的配置選項

(四) 頁面配置

1.頁面配置文件和全局配置文件的關(guān)系

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

(五) 網(wǎng)絡(luò)數(shù)據(jù)請求

1. 小程序中網(wǎng)絡(luò)數(shù)據(jù)請求的限制

?2. 配置request合法域名

3.發(fā)起get請求

?4.發(fā)起post請求

?5.在頁面剛加載時請求數(shù)據(jù)

6.跳過 request 合法域名校驗

?7.關(guān)于跨域和ajax的說明

---

模板與配置

(一)WXML模板語法

1.數(shù)據(jù)綁定

1.1 數(shù)據(jù)綁定的基本原則

• 在data中定義數(shù)據(jù)
• 在wxml中使用數(shù)據(jù)

1.2 在data中定義數(shù)據(jù)

在頁面對應(yīng)的.js文件中,把數(shù)據(jù)定義到data對象即可

1.3 Mustache語法格式

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

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

?1.4?Mustache語法的應(yīng)用場景

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

1.5 Mustache動態(tài)綁定內(nèi)容

?1.6 Mustache動態(tài)綁定屬性

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

1.7 Mustache三元運算

?1.8 Mustache算數(shù)運算

?2.事件綁定

2.1 事件概述

事件是渲染層到邏輯層的通訊方式,通過事件可以將用戶在 渲染層產(chǎn)生的行為,反饋到邏輯層進(jìn)行業(yè)務(wù)的處理

2.2? 小程序中常用的事件

?2.3事件對象的屬性列表

當(dāng)事件回調(diào)出發(fā)的時候,會收到一個事件對象event,它的詳細(xì)屬性如下表所示:

?2.4 target 和 currentTarget 的區(qū)別

target 是觸發(fā)事件的源頭組件 , currentTarget 是當(dāng)前事件所綁定的組件

點擊內(nèi)部的按鈕時,點擊時間以冒泡的方式向外擴(kuò)散,也會觸發(fā)外層view?的 tap 事件處理函數(shù)

此時對于外部view來說:

• e.target 指向的是觸發(fā)事件的源頭組件,因此,e.target 是內(nèi)部的按鈕組件
• e.currentTarget 指向當(dāng)前正在出發(fā)事件的那個組件,因此,e.currentTarget 是當(dāng)前的view組件

2.5?bindtap 的語法格式

在小程序中,不存在html中的onclick鼠標(biāo)點擊事件,而是通過tap事件來響應(yīng)用戶的觸摸行為

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

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

2.6 在事件處理函數(shù)中為data中的數(shù)據(jù)賦值

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

?

2.7 事件傳參

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

在vue中可以在綁定事件的時候進(jìn)行傳值:小程序和vue的區(qū)別

因為小程序會把bindtap的屬性值統(tǒng)一當(dāng)作事件名稱來處理,相當(dāng)于要調(diào)用一個名稱為 btnHandler(123)的事件處理函數(shù)

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

info會被解析為參數(shù)的名字 ; 數(shù)值2會被解析為參數(shù)的值

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

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

2.8 bindinput的語法格式

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

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

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

?2.9實現(xiàn)文本框和data之間的數(shù)據(jù)同步

實現(xiàn)步驟:

• 定義數(shù)據(jù)

• 渲染結(jié)構(gòu)

• 美化樣式

• 綁定input事件處理函數(shù)

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 結(jié)合<block>使用 wx:if

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

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

?3.3 hidden

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

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

(1)運行方式不同

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

(2)使用建議

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

4. 列表渲染

4.1 wx:for

通過wx:for可以根據(jù)指定的數(shù)組,循環(huán)渲染重復(fù)的數(shù)組,語法:

?默認(rèn)情況下,當(dāng)前循環(huán)項的索引用inndex表示,當(dāng)前循環(huán)項用item表示

4.2 手動指定索引和當(dāng)前項的變量名

• 使用 wx:for-index 可以指定當(dāng)前循環(huán)項的索引的變量名
• 使用 wx:for-item 可以指定當(dāng)前項的變量名

示例:

?4.3 wx:key 的使用

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

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

?(二)WXSS模板語法

1.wxss

wxss 是一套樣式語言,用于美化wxml的組件樣式,類似于網(wǎng)頁開發(fā)中的css

1.1.wxss和css的關(guān)系

wxss具有css大部分特性,同時,wxss還對css進(jìn)行了擴(kuò)充以及修改,以適應(yīng)微信小程序的開發(fā)

wss與css相比,wxss的擴(kuò)展特性主要有

• rpx尺寸單位
• @import樣式導(dǎo)入

2.rpx

2.1 什么是rpx尺寸單位

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

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

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

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

3.樣式導(dǎo)入

3.1 什么是樣式導(dǎo)入

使用wxss提供的@import語法,可以導(dǎo)入外聯(lián)樣式表

3.2 @import語法

@import ?" 外聯(lián)樣式表的相對路徑 "? ;?

4.全局樣式和局部樣式

4.1 全局樣式

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

4.2 局部樣式

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

注意:

• 當(dāng)全局樣式和局部樣式?jīng)_突時,根據(jù)就近原則,局部樣式會覆蓋全局樣式
• 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時,才會覆蓋全局樣式

注意:

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

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

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

局部樣式不會覆蓋全局樣式,因為全局樣式權(quán)重高于局部樣式

(三) 全局配置

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

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

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

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

1.1 小程序窗口組成部分

2. window節(jié)點常用的配置項

以navigationBar 開頭的配置項 => 配置導(dǎo)航欄

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

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

2.1?設(shè)置導(dǎo)航欄的標(biāo)題?navigationBarTitleText

設(shè)置步驟: app.json => window => navigationBarTitleText

"window" :{ "navigationBarTitleText" : "我的應(yīng)用" }

2.2 設(shè)置導(dǎo)航欄的背景色?navigationBarBackgroundColor

設(shè)置步驟: app.json => window =>?navigationBarBackgroundColor

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

注意: 導(dǎo)航欄顏色設(shè)置只支持十六進(jìn)制顏色設(shè)置

2.3 設(shè)置導(dǎo)航欄的標(biāo)題顏色?navigationBarTextStyle

設(shè)置步驟: app.json => window =>?navigationBarTextStyle

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

注意:?navigationBarTextStyle 導(dǎo)航欄標(biāo)題顏色的可選值只有black 和 white?

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

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

"window" :{ "enablePullDownRefresh" : true } //默認(rèn)為false

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

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

當(dāng)全局開啟了下拉刷新的功能后,默認(rèn)的窗口背景為白色.

設(shè)置步驟 : app.json => window => 為backgroundColor指定16進(jìn)制的顏色值

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

2.6 設(shè)置下拉刷新時loading的樣式?backgroundTextStyle

當(dāng)全局開啟了下拉刷新的功能后,默認(rèn)的窗口的loading 為白色.

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

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

注意 :?backgroundTextStyle的可選值只有l(wèi)ight 和 dark?

2.7 設(shè)置上拉觸底的距離

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

設(shè)置步驟 : app.json => window => 為onReachBottomDistance 設(shè)置新的數(shù)值

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

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

3 tabBar?

3.1 tabBar

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

• 底部tabBar
• 頂部tabBar

注意:

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

3.2 tabBar 的6個組成部分

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

4 tabBar節(jié)點的配置項

每個tab項的配置選項

?"tabBar" : {?

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

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

(四) 頁面配置

1.頁面配置文件和全局配置文件的關(guān)系

• 當(dāng)全局樣式和局部樣式?jīng)_突時,根據(jù)就近原則,局部樣式會覆蓋全局樣式
• 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時,才會覆蓋全局樣式

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

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

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

(五) 網(wǎng)絡(luò)數(shù)據(jù)請求

1. 小程序中網(wǎng)絡(luò)數(shù)據(jù)請求的限制

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

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

?2. 配置request合法域名

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

注意:

• 域名只支持 https 協(xié)議
• 域名不能使用 IP 地址或 localhost
• 域名必須經(jīng)過ICP備案
• 服務(wù)器域名一個月內(nèi)最多可申請五次

3.發(fā)起get請求

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

home.wxml配置

home.js配置,res.data是最后的真實數(shù)據(jù)

?4.發(fā)起post請求

調(diào)用微信小程序提供的 wx.request()方法,可以發(fā)起post數(shù)據(jù)請求,實例:

home.js配置,res.data是最后的真實數(shù)據(jù)

?5.在頁面剛加載時請求數(shù)據(jù)

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

?注意: 通過this調(diào)用,this代表當(dāng)前頁面加載的的實例

6.跳過 request 合法域名校驗

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

跳過request選項.

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

?7.關(guān)于跨域和ajax的說明

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

ajax技術(shù)的核心是依賴于瀏覽器中的 XMLHTTPRequest 這個對象,由于小程序的宿主環(huán)境是微信客戶端,所以小程序中不能叫做 " 發(fā)起ajax請求?" ,而是叫做" 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請求 "

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。