文章目錄

• • 一、wxml 模板語法
  • • 1、數據綁定
    • 2、事件綁定
    • 3、事件傳參與數據同步
    • 4、條件渲染 wx:if
    • 5、列表渲染 wx:for
  • 二、wxss
  • • 1、rpx 尺寸單位
    • 2、樣式導入
    • 3、全局、局部樣式
  • 三、全局配置
  • • 1、window
    • 2、tabBar
  • 四、頁面配置
  • 五、網絡數據請求
  • 總結

一、wxml 模板語法

1、數據綁定

數據綁定的基本原則是：在頁面的 js 文件中的 data 定義數據，在 wxml 中使用數據；

動態綁定內容：<view>{{info}}</view>
動態綁定屬性：<image src="{{imgSrc}}"></image>
三元運算：<view>{{num > 5 ? "是" : "否"}}</view>
算術運算：<view>{{num *100}}</view>

2、事件綁定

1、事件是渲染層到邏輯層的通訊方式，通過事件可以將用戶在渲染層的行為傳遞到邏輯層進行業務處理；

2、常用事件：tap、input、change

tap：綁定（bindtap、bind:tap) 手指觸摸后馬上離開，類似與 html 中的 click
input：綁定（bindinput、bind:input) 文本框輸入事件（針對文本框）
change：綁定（bindchange、bind:change) 狀態改變時觸發

3、事件觸發時會收到一個事件對象 event ，包括如下屬性：

type：事件類型
timeStamp：頁面打開到觸發事件經歷的毫秒數
target：觸發事件的組件屬性合集（觸發事件的源頭）
currentTarget：當前組件的屬性合集（事件綁定是組件）
details：額外信息
touches：觸摸事件，當前停留在屏幕中的觸摸點信息的數組（多個手指觸摸）
changedTouches：觸摸事件，當前變化的觸摸點信息數組

<view bindtap="clickFn"><button>按鈕</button> </view>

當點擊按鈕時，事件冒泡之后會觸發 clickFn 事件，這個時候 e.target 就是 button 按鈕組件，而 e.currentTarget 是 view 組件；

4、事件語法格式
在 wxml 的組件元素中綁定事件 <button bindtap="clickBtn">按鈕</button>，之后在 js 文件中，data 平級的位置定義這個事件：

data:{}, //點擊事件 clickBtn(e){console.log(e);}

3、事件傳參與數據同步

1、通過調用 this.setDate(dataObject) 方法，可以給頁面中 data 中的數據重新賦值；

data:{num:1 }, changeNum(){this.setData({num:this.data.num+1}); }

獲取 data 中的數據，可以直接使用 this.data.num；數據修改之后頁面上綁定的 num 值也會同步變化；

2、小程序的 tap 事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數；

//錯誤示范 <button type="primary" bindtap="clickBtn('xxx')">按鈕</button>

上面是我們常用的事件傳參方式，在小程序里面是不對的；小程序會把 bindtap 的屬性值統一當作事件名來處理，相當于調用了一個 clickBtn('xxx') 的事件處理函數；

正確方式：
為組件提供自定義屬性data-* 傳參，* 代表參數的名字：

<button type="primary" bindtap="clickBtn" data-info="{{2}}">按鈕</button> //或者 <button type="primary" bindtap="clickBtn" data-info="xxx">按鈕</button> //也可以 <button type="primary" bindtap="clickBtn" data-info="{{'xxx'}}">按鈕</button>

info 是參數名、花括號{{}} 里面的數字就是參數值；

取參數方式：
在事件處理函數中，通過 event.target.dataset.參數名 就可以獲取到具體的參數值：

clickBtn(e){this.setData({count:e.target.dataset.info}); }

3、小程序 input 事件來響應文本框輸入事件，用 bindinput 綁定事件，在事件處理函數中用 event.detail.value 來獲取文本框最新的內容；

inputHandle(e){console.log(e.detail.value); }

4、文本框和data直接的數據同步

<input value="{{msg}}" bindinput="inputHandle"></input> //js data: {msg:'xxx' }, //文本框事件 inputHandle(e){this.setData({msg:e.detail.value}) }

input 框使用 value 屬性動態綁定了 data 中的 msg 值，這也的 data 中的數據就會同步到 input 框中；然后通過事件將 input 框中的值通過 setData 賦值給 data；通過上面這兩步就可以實現文本框和 data 數據的同步！

4、條件渲染 wx:if

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

<view wx:if="{{isShow}}"></view>

2、也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length == 1}}"> 1 </view> <view wx:elif="{{length == 2}}"> 2 </view> <view wx:else> 3 </view>

3、如果我們想要一次控制多個標簽，可以使用 <block> 來配合 wx:if，<block> 只是一個包裹元素，不會在頁面中做任何渲染；

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

4、小程序中使用 hidden="{{isHide}}" 也能控制元素的顯示隱藏

<view hidden="{{isShow}}"></view>

5、wx:if 和 hidden 區別
運行方式不同：

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

使用建議：

頻繁切換建議使用 hidden，防止頻繁創建移除元素
控制條件復雜建議使用 wx:if 配合 wx:elif、wx:else 老控制元素顯示隱藏

5、列表渲染 wx:for

1、通過 wx:for 根據指定的數組，循環渲染重復的組件結構；

<view wx:for="{{array}}">{{index}}: {{item.message}} </view>

2、自定義索引和當前項的變量名
使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}} </view>

3、如果我們想要一次控制多個標簽，可以使用 <block> 來配合 wx:for，<block> 只是一個包裹元素，不會在頁面中做任何渲染；

<block wx:for="{{array}}"><view> {{index}} </view><view> {{item}} </view> </block>

4、類似 vue 列表渲染中的 key，小程序也建議在渲染列表中添加唯一的 key 值，從而提高渲染效率；

<view wx:for="{{array}}" wx:key="index"> {{item}} </view>

5、注意事項：
注意1：當 wx:for 的值為字符串時，會將字符串解析成字符串數組

<view wx:for="array">{{item}} </view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">{{item}} </view>

注意2：花括號和引號之間如果有空格，將最終被解析成為字符串

<view wx:for="{{[1,2,3]}} ">{{item}} </view>

解析成

<view wx:for="{{[1,2,3] + ' '}}" >{{item}} </view>

二、wxss

1、rpx 尺寸單位

responsive pixel：是小程序獨有的用來解決屏幕適配的尺寸單位；

1、rpx 的實現原理：隊與不同設備屏幕大小也不同，為了實現屏幕自動適配，rpx 把所有設備的屏幕在寬度上等分為 750 份，也就是說當前屏幕寬度為 750rpx；小程序在運行的時候會自動把 rpx 單位的樣式換算成對應的 px 單位進行渲染，從而實現適配；

2、rpx 與 px 單位換算
開發過程中一般以 iphone6 作為視覺稿的標準；那么就以 iphone6 為例，iphone6 的寬度是 375px，那么在 iphone6 上：
750rpx = 375px => 1rpx = 0.5px；那么可以得出： 1px = 2rpx

2、樣式導入

使用 wxss 提供的 @import 語法，可以導入外聯的樣式表； @import 后面跟上需要導入的樣式表的相對路徑，然后以 “;” 結尾表示語句結束；

@import "common.wxss"

3、全局、局部樣式

1、全局樣式
定義在 app.wxss 中的樣式是全局樣式，作用與所有頁面；

2、局部樣式
寫在頁面的 .wxss 文件中的樣式都是局部樣式，只作用與當前頁面；

注意：權重相同的情況下全局樣式與局部樣式沖突時，局部樣式會覆蓋掉全局樣式；

三、全局配置

小程序的 app.json 文件是它的全局配置文件；常見的配置有：pages、window、tabBar、style；

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

1、window

window 可以配置導航欄、背景區域；常見配置：

navigationBarTitleText：導航欄標題文字內容
navigationBarBackgroundColor：導航欄背景顏色（只支持16進制）
navigationBarTextStyle：導航欄標題顏色，僅支持 black / white
backgroundColor：窗口的背景色 （只支持16進制）
backgroundTextStyle：下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh：是否開啟全局的下拉刷新
onReachBottomDistance：頁面上拉觸底事件觸發時距頁面底部距離，單位為 px。默認50px

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "Weixin","navigationBarTextStyle": "white","enablePullDownRefresh": true,"backgroundColor": "#fff""onReachBottomDistance": 50},

參考：小程序配置-window

2、tabBar

1、tabBar是移動端常見的頁面效果，常用于實現頁面的快速切換；分為：頂部 tabBar、底部tabBar；

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

2、tabBar 的組成

backgroundColor：tab 的背景色，僅支持十六進制顏色
selectedColor：tab 上的文字選中時的顏色，僅支持十六進制顏色
borderStyle：tabbar 上邊框的顏色， 僅支持 black / white
color：tab 上的文字默認顏色，僅支持十六進制顏色
iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片
selectedIconPath：選中時的圖片路徑

3、tab配置

"tabBar": {"position":"bottom","list": [{"pagePath":"pages/list/list","text":"列表","iconPath":"/image/index-bg.png","selectedIconPath":"/image/index-bg.png"},{"pagePath":"pages/logs/logs","text":"日志","iconPath":"/image/index-bg.png","selectedIconPath":"/image/index-bg.png"}]},

注意：tabBar 的頁路徑要放在 pages 數組的前面；

參考：小程序配置-tabBar

四、頁面配置

1、每個頁面都有自己的 .json 文件，用來對頁面的窗口外觀、頁面效果進行配置；

注意：針對相同的配置，頁面配置會覆蓋全局配置；

2、常用配置

navigationBarTitleText：導航欄標題文字內容
navigationBarBackgroundColor：導航欄背景顏色（只支持16進制）
navigationBarTextStyle：導航欄標題顏色，僅支持 black / white
backgroundColor：窗口的背景色 （只支持16進制）
backgroundTextStyle：下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh：是否開啟全局的下拉刷新
onReachBottomDistance：頁面上拉觸底事件觸發時距頁面底部距離，單位為 px。默認50px

注意：下拉刷新效果建議在頁面中配置，避免全局配置；

五、網絡數據請求

1、出于安全考慮，小程序官網對數據接口請求做了如下限制：

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

2、配置合法域名
配置步驟：小程序后臺 => 開發 => 開發管理 => 開發設置 => 服務器域名 => 開始配置

配置成功之后就可以在 微信開發者工具 => 詳情 => 項目配置 里面查看到 request 合法域名了；

注意：

域名只支持HTTPS協議
域名不能持有 ip 地址或者 localhost
域名必須經過 ICP 備案
一個月最多修改 5 次

3、發起 GET 、POST 請求
調用微信小程序的 wx.request() 方法可以發起 GET 請求；

clickFn(e){wx.request({url: 'https://www.escook.cn/api/get',method:'GET',data:{name:'zs',age:20},success:(res)=>{console.log(res.data)}})}

4、跳過域名合法校驗
當開發過程中，后端沒有提供 https 協議的接口，為了不耽誤正常開發，我們可以開啟跳過域名合法校驗模式；在 微信開發者工具-詳情-本地配置中勾選不校驗合法域名、web-view（業務域名）、TLS版本以及HTTPS正式項；

5、跨域和 ajax
跨域只存在與瀏覽器的 web 開發中，小程序的宿主是微信客戶端，不是瀏覽器，所以小程序沒有跨域問題；

ajax是依賴瀏覽器中的 XMLHttpRequest 對象，小程序宿主是微信客戶端，所以在小程序里不叫"發起ajax請求"，而叫"發起網絡數據請求"；

總結

1、能夠使用 WXML 模板語法渲染頁面結構：wx:if、wx:elif、wx:else、wx:for、hidden、wx:key
2、能使用 WXSS 樣式美化頁面結構：rpx、@import
3、能使用 app.json 對小程序進行全局配置：pages、window、tabBar、style
4、能使用頁面的 .json 文件對小程序進行個性化配置
5、能發起網絡數據請求：wx.request()

總結

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

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