WXML模板語法-數據綁定：在data中定義頁面的數據：在頁面對應的.js文件中，把數據定義到data對象中即可Page({data: {name:'zero',age:100},Mustache語法的格式：把data中的數據綁定到頁面中渲染，使用Mustache語法(雙大括號)將變量包起來即可，語法格式為：<view>姓名：{{name}}，年齡：{{age}}</view>Mustache語法的應用場景：Mustache語法的主要應用場景如下：綁定內容，綁定屬性，運算(三元運算，算術運算等)WXML模板語法-事件綁定：什么是事件：事件是渲染到邏輯層的通訊方式，通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理小程序中常用的事件：類型 綁定方法 事件描述tap bindtap和bind:tap 手指觸摸后馬上離開，類似于HTML中的click事件input bindinput和bind:input 文本框的輸入事件change bindchange和bind:change 狀態改變時觸發事件對象的屬性列表：當回調觸發的時候，會收到一個事件對象event，它的詳細屬性如下表所示：屬性 類型 說明type String 事件類型timeStamp Integer 頁面打開到觸發事件所經過的毫秒數target Object 觸發事件的組件的一些屬性值集合currentTarget Object 當前組件的一些屬性值集合detail Object 額外的信息touches Array 觸摸事件，當前停留在屏幕中的觸摸點的數組changeTouches Array 觸摸事件，當前變化的觸摸點信息的數組target和currenTarget的區別：target是觸發該事件的源頭組件，而currentTarget則是當前事件所綁定的組件，舉例如下：<view class="outer-view" bindtap="outerHandler"><button type="primary">按鈕</button></view>點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層view的tap事件處理函數此時，對于外層的view來說：e.target指向是觸發事件的源頭組件，因此，e.target是內部的按鈕組件e.currentTarget指向的是當前正在觸發事件的那個組件，因此，e.currentTarget是當前的view組件bindtap的語法格式：在小程序中，不存在HTML中的onclick鼠標點擊事件，而是通過tap事件來相應用戶的觸摸行為1 通過bindtap，可以為組件綁定tap觸摸事件，語法如下：<button type="primary" bindtap="btnTapHandler">按鈕</button>2 在頁面的.js文件中定義對應的事件處理函數，事件參數通過形參event(一般簡寫成e)來接收：Page({btnTapHandler(e){ // 按鈕的tap事件處理函數console.log(e) // 事件參數對象e}})在事件處理函數中為dat中的數據賦值：通過調用this.setData(dataObject)方法，可以給頁面的data中的數據重新賦值，示例如下：Page({data:{count:0},// 修改count的值changeCount(){this.setData({count:this.data.count+1})}})事件傳參：小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數，例如，下面的代碼將不能正常工作：<button type="primart" bindtap="btnHandler(123)">事件傳參</button>因為小程序會把bindtap的屬性值，統一當作事件名稱來處理，相當于要調用一個名稱為btnHandler(123)的事件處理函數可以為數組提供data-*自定義屬性傳參，其中*代表的是參數的名字，示例代碼如下：<button bindtap="btnHandler" data-info="{{2}}">事件傳參</button>最終：info會被解析為參數的名字數值2會被解析為參數的值在事件處理函數中，通過event.target.dataset.參數名即可獲取到具體參數的值，示例代碼如下：btnHandler(event){// dataset是一個對象，包含了所有通過data-*傳遞過來的參數項console.log(event.target.dataset)// 通過dataset可以訪問到具體參數的值console.log(event.target.dataset.info)}bindinput的語法格式：在小程序中，通過input事件來相應文本框的輸入事件，語法格式如下：1 通過bindinput，可以為文本框綁定輸入事件：<input bindinput="inputHandler" />2 在頁面的.js文件中定義事件處理函數：inputHandler(e){// e.datail.value是變化過后，文本框最新的值console.log(e.datail.value)}WXML模板語法-條件渲染：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>結合<block>使用wx:if：如果要一次性控制多個組件的展示與隱藏，可以使用一個<block></block>標簽將多個組件包裝起來，并在<block>標簽上使用wx:if控制屬性，示例如下：<block wx:if="{{true}}"><view>view1</view><view>view2</view></block>注意：<block>并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染hidden：在小程序中，直接使用hidden="{{condition}}"也能控制元素的顯示與隱藏<view>條件為true隱藏，條件為false顯示</view>wx:if與hidden的對比：1 運行方式不同：wx:if以動態創建和移除元素的方式，控制元素的展示與隱藏hidden以切換樣式的方式(display:none/block;)，控制元素的顯示與隱藏2 使用建議：頻繁切換時，建議使用hidden控制條件復雜時，建議使用wx:if進行展示與隱藏的切換WXML模板語法-列表渲染：wx:for：通過wx:for可以根據指定的數組，循環渲染重復的組件結構，語法示例如下：<view wx:for="array">索引是：{{index}}當前項是：{{item}}</view>默認情況下，當前循環項的索引用index表示，當前循環項用item表示手動指定索引和當前項的變量名：使用wx:for-index可以指定當前循環項的索引的變量名使用wx:for-item可以指定當前項的變量名<view wx:for="array" wx:for-index="idx" wx:for-item="itemNane">索引是：{{idx}}當前項是：{{itemName}}</view>wx:key的使用：類似于Vue列表渲染中的:key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的key值從而提高渲染的效率，示例代碼如下：data:{userList:[{id:1,name:"zero"},{id:2,name:"king"},{id:3,name:"ping"}]}<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>WXSS模板樣式：什么是WXSS：WXSS(WeiXin Style Sheets)是一套樣式語言，用于美化WXML的組件樣式，類似于網頁開發中的CSSWXSS和CSS的關系：WXSS具有CSS大部分特性，同時，WXSS還對CSS進行了擴充以及修改，以適應微信小程序的開發與CSS相比，WXSS拓展的特性有：rpx尺寸單位@input樣式導入WXSS模板樣式-rpx：什么是rpx尺寸單位：rpx(responsive pixel)是微信小程序獨有的，用來解決屏適配的尺寸單位rpx的實現原理：rpx的實現原理非常簡單：鑒于不同設備屏幕的大小不同，為了實現屏幕的自動適配，rpx把所有設備的屏幕，在寬度上等分為750份(即：當前屏幕的總寬度為750rpx)在較小的設備上，1rpx所代表的寬度較小在較大的設備上，1rpx所代表的寬度較大小程序在不同設備上運行的時候，會自動把rpx的樣式單位換算成對應的像素單位來渲染，從而實現屏幕適配WXSS模板樣式-樣式導入：什么是樣式導入：使用WXSS提供的@input語法，可以導入外聯的樣式表@import的語法格式：@import后跟需要導入的外聯樣式的相對路徑，用;表示語句結束，示例如下：@import "wxss路徑"WXSS模板樣式-全局樣式和局部樣式：全局樣式：定義在app.wxss中的樣式為全局樣式，作用于每一個頁面局部樣式：在頁面的.wxss文件中定義的樣式為局部樣式，只作用于當前頁面注意：1 當局部樣式和全局樣式沖突時，根據就近原則，局部樣式會覆蓋全局樣式2 當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式全局配置：全局配置文件及常用的配置項：小程序根目錄下的app.json文件是小程序的全局配置文件，常用的配置項如下：pages：記錄當前小程序所有頁面的存放路徑window：全局設置小程序窗口的外觀tabBar：設置小程序底部的tabBar效果style：是否啟用新版的組件樣式全局配置-window：小程序窗口的組成部分：navigationBaer：導航欄區域background：背景區域，默認不可見，下拉才顯示頁面的主體區域，用來顯示wxml中的布局了解window節點常用的配置項：屬性名 類型 默認值 說明navigationBarTitleText String 字符串 導航欄標題文字內容navigationBarBackgroundColor HexColor #000000 導航欄背景顏色，如#000000navigationBarTextStyle String white 導航欄標題顏色，僅支持black/whitebackgroundColor HexColor #ffffff 窗口的背景色backgroundTextStyle String dark 下拉loading的樣式，僅支持dark/lightenablePullDownRefresh Boolean false 是否全局開啟下拉刷新onReachBottomDistance Number 50 頁面上拉觸底事件觸發時據頁面底部距離，單位為px設置導航欄的標題：設置步驟：app.json->window->navigationBarTitleText設置導航欄的背景色：設置步驟：app.json->window->navigationBarBackgroundColor設置導航欄的標題顏色：設置步驟：app.json->window->navigationBarTextStyle注意：navigationBarTextStyle的可選值只有black和white全局開啟下拉刷新功能：概念：下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為設置步驟：app.json->window->把enablePullDownRefresh的值設置為true注意：在app.json中啟用下拉刷新功能，會作用于每個小程序頁面設置下拉刷新時窗口的背景色：當全局開啟下拉刷新功能之后，默認的窗口背景為白色，如果自定義下拉刷新窗口背景色，設置步驟為：app.json->window->為backgroundColor指定16進制的顏色值#efefef設置下拉刷新的loading的樣式：當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色，如果要更改loading樣式的效果，設置步驟為app.json->window->為backgroundTextStyle指定dark值注意：backgroundTextStyle的可選值只有light和dark設置上拉觸底的距離：概念：上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為設置步驟：app.json->window->為onReachBottomDistance設置新的數值注意：默認距離為50px，如果沒有特殊要求，建議使用默認值即可全局配置-tabBer：什么是tabBar：tabBar是移動端應用常見的頁面效果，用于實現多頁面的快速切換小程序中通常將其分為：底部和頂部注意：tabBer中只能配置最少2個、最大5個tab頁簽當渲染頂部時，不顯示icon(圖標)，只顯示文本tabBer的6個組成部分：1 backgroundColor:tabBar的背景色2 selectedIconPath:選中時的圖片路徑3 borderStyle:tabBer上邊框的顏色4 iconPath:未選中時的圖片路徑5 selectedColor:tab上的文字選中時的顏色6 color:tab上文字的默認(未選中)顏色tabBar節點的配置項：app.json->tabBar屬性 類型 必填 默認值 描述position String 否 bottom tabBar的位置，僅支持bottom/topborderStyle String 否 black tabBar上邊框的顏色，僅支持black/whitecolor HexColor 否 tab上文字的默認(未選中)顏色selectedColor HexColor 否 tab上的文字選中時的顏色backgroundColor HexColor 否 tabBar的背景色list Array 是 tab頁簽的列表，最少2個、最大5個tab每個tab項的配置選項：屬性 類型 必填 描述pagePath String 是 頁面路徑，頁面必須在pages中預先丁頁text String 是 tab上顯示的文字incoPath String 否 未選中時的圖標路徑selectedIconPath String 否 選中時的圖標路徑頁面配置：頁面配置文件的作用：小程序中，每個頁面都有自己的.json配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置頁面配置和全局配置的關系：小程序中，app.json中的window節點，可以全局配置小程序中每個頁面的窗口表現如果某些小程序頁面想要擁有特殊的窗口表現，此時，頁面級別的.json配置文件就可以實現這種需求注意：當頁面配置與全局配置沖突時，根據就近原則，最終的效果以頁面配置為準頁面配置中常用的配置項：屬性 類型 默認值 描述navigationBarBackgroundColor HexColor #000000 當前頁面導航欄背景顏色，如#000000navigationBarTextStyle String white 當前頁面導航欄標題顏色，僅支持black/whitenavigationBarTitleText String 當前頁面導航欄標題文字內容backgroundColor HexColor #ffffff 當前頁面窗口的背景色backgroundTextStyle String dark 當前頁面下拉loading的樣式，僅支持dark/lightenablePullDownRefresh Boolean false 是否為當前頁面開啟下拉刷新的效果onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離，單位為px網絡數據請求：小程序中網絡數據請求的限制：出于安全性方面的考慮，小程序官方對數據接口的請求做出了如下兩個限制：1 只能請求HTTPS類型的接口2 必須將接口的域名添加到信任列表中配置request合法域名：配置步驟：登錄微信小程序管理后臺->開發->開發設置->服務器域名->修改request合法域名注意事項：1 域名只支持https協議2 域名不能使用IP地址或localhost3 域名必須經過ICP備案4 服務器域名一個月內最多申請5次修改發起GET請求：調用微信小程序提供的wx.request()方法，可以發起GET請求數據，示例代碼如下：wx.request({url:"https://www.myapp.cn/api/get", // 請求的接口地址，必須基于https協議method:"GET", // 請求方式data:{ // 發送到服務器的數據name:"zero",age:100},success:(res)=>{ // 請求成功之后的回調函數console.log(res)}})發起POST請求：調用微信小程序提供的wx.request()方法，可以發起POST請求數據，示例代碼如下：wx.request({url:"https://www.myapp.cn/api/post", // 請求的接口地址，必須基于https協議method:"POST", // 請求方式data:{ // 發送到服務器的數據name:"zs",age:10},success:(res)=>{ // 請求成功之后的回調函數console.log(res)}})在頁面剛加載時請求數據：在很多情況下，我們需要在頁面剛加載的時候，自動請求一些初始化的數據，此時需要在頁面的onLoad事件中調用獲取數據的函數，示例代碼如下：onLoad:function(options){this.getSwiperList()this.getGridList()},// 獲取輪播圖的數據getSwiperList(){...},// 獲取九宮格的數據getGridList(){...}跳過request合法域名校驗：如果后端程序員僅僅提供了http協議的接口、暫時沒有提供https協議的接口此時為了不耽誤開發的進度，我們可以在微信開發者工具中，臨時開啟開發環境不校驗請求域名、TLS版本及HTTPS證書選項跳過request合法域名的校驗注意：跳過request合法域名校驗的選項，僅限在開發與調試階段使用關于跨域和Ajax的說明：跨域問題只存在于基于瀏覽器的Web開發，由于小程序的宿主環境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問題Ajax技術的核心是依賴于瀏覽器中的XMLHttpRequest這個對象，由于小程序的宿主環境是微信客戶端，所以小程序中不能叫做”發起Ajax“請求，而是叫做”發起網絡數據請求“

總結

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

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