目錄
一、WXML模板語法
1、數(shù)據(jù)綁定
（1）Mustache語法
2、事件綁定
?（1）常用事件
?（2）屬性列表
?（3）target和currentTarget的區(qū)別
?（4）bindtap語法格式
?（5）在事件處理函數(shù)中為data中的數(shù)據(jù)賦值
（6）事件傳參
（7）bindinput的語法格式
（8）實現(xiàn)文本框（input）和data之間的數(shù)據(jù)同步
2、條件渲染
（1）wx:if
（2）結合使用wx:if
（3）hidden
?3、列表渲染
（1）wx:for
（2）手動指定索引和當前項的變量名（了解即可）
?（3）wx:key 的使用
?二、WXSS模板
1、rpx
2、rpx與px之間的單位換算（了解）
?3、樣式導入（@import）
?4、全局樣式和局部樣式?
?三、全局配置（app.json）
1、window
（1）windows節(jié)點常用配置項
?（2）設置導航欄標題
（3）設置導航欄背景色?
（4）導航欄標題顏色
（5）全局開啟下拉刷新
（6）下拉刷新時窗口的背景色
（7）下拉刷新時loading樣式?
（8）上拉觸底距離?
2、tabBar
四、頁面配置
1、常用配置項
五、網(wǎng)絡數(shù)據(jù)請求
1、小程序中網(wǎng)絡數(shù)據(jù)請求限制
2、配置request合法域名
3、發(fā)起GET請求?
4、發(fā)起POST請求
?5、在頁面剛加載時請求數(shù)據(jù)
6、跳過request合法域名校驗?
7、關于跨域和Ajax的說明
?
一、WXML模板語法
1、數(shù)據(jù)綁定
在頁面對應的.js 文件中，把數(shù)據(jù)定義到data對象中即可
（1）Mustache語法
類似vue中的插值語法
<view>{{要綁定的數(shù)據(jù)名稱}}</view>2、事件綁定
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進行業(yè)務的處理。
?（1）常用事件
?（2）屬性列表
?（3）target和currentTarget的區(qū)別
?（4）bindtap語法格式
在小程序中，不存在HTML中的onclick鼠標點擊事件，而是通過tap事件來響應用戶的觸摸行為。通過bindtap，可以為組件綁定tap觸摸事件，語法如下：
<button type="primary" bindtap="btnTapHandler">按鈕</button>在頁面的.js文件中定義對應的事件處理函數(shù)，事件參數(shù)通過形參event(一般簡寫成e）來接收：
?（5）在事件處理函數(shù)中為data中的數(shù)據(jù)賦值
通過調用this.setData(data0bject)方法，可以給頁面data中的數(shù)據(jù)重新賦值，示例如下：
Page({
data:{
count:0,
},
changeCount(){
this.setData({
count:this.data.count+1,
})
}
}（6）事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正常工作：（但是vue可以）
?因為小程序會把 bindtap的屬性值，統(tǒng)一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123)的事件處理函數(shù)。
解決方法----->
可以為組件提供data-*自定義屬性傳參，其中*代表的是參數(shù)的名字，示例代碼如下：
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
<!-- 如果省略了{{}}，那么這個2 就是字符串，而不是數(shù)字2 -->最終：
- info會被解析為參數(shù)的名字
- 數(shù)值2會被解析為參數(shù)的值
btnTap2(e){
console.log(e);
},
?在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名即可獲取到具體參數(shù)的值，示例代碼如下：
btnTap2(e){
this.setData({
count:this.data.count+e.target.dataset.info,
})
},（7）bindinput的語法格式
在小程序中，通過input事件來響應文本框的輸入事件，語法格式如下：
通過bindinput，可以為文本框綁定輸入事件：
<input bindinput="inputHandler"></input>在頁面的.js文件中定義事件處理函數(shù)：
inputHandler(e){
// e.detail.value是變化過后文本框最新的值
console.log(e.detail.value);
},（8）實現(xiàn)文本框（input）和data之間的數(shù)據(jù)同步
實現(xiàn)步驟：
- 定義數(shù)據(jù)
- 渲染結構
- 美化樣式
- 綁定input事件處理函數(shù)
?
定義數(shù)據(jù)
data:{
msg:'你好！'
},渲染結構
<input bindinput="inputHandler" value="{{msg}}"></input>美化樣式
CSS樣式
綁定input事件處理函數(shù)
inputHandler(e){
// e.detail.value是變化過后文本框最新的值
this.setData({
msg:e.detail.value,
})
},2、條件渲染
（1）wx:if
condition為true，則該代碼塊會被渲染，否則不會。
類似C語言的if，else if，else 。?
（2）結合<block>使用wx:if
如果要一次性控制多個組件的展示與隱藏，可以使用一個<block></block>標簽將多個組件包裝起來，并在<block>標簽上使用wx:if 控制屬性，示例如下：
以動態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏
控制條件復雜時，建議使用
注意:：<block>并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。
（3）hidden
以切換樣式的方式( display: none/block; )，控制元素的顯示與隱藏
頻繁切換時，建議使用
?3、列表渲染
（1）wx:for
?通過wx:for可以根據(jù)指定的數(shù)組，循環(huán)渲染重復的組件結構，語法示例如下：
<view wx:for="{{arr1}}">
索引是：{{index}}，item項是：{{item}}
</view>默認情況下，當前循環(huán)項的索引用index表示，當前循環(huán)項用item表示。
（2）手動指定索引和當前項的變量名（了解即可）
使用wx:for-index可以指定當前循環(huán)項的索引的變量名
使用wx:for-item可以指定當前項的變量名
?（3）wx:key 的使用
類似于Vue列表渲染中的:key，小程序在實現(xiàn)列表渲染時，也建議為渲染出來的列表項指定唯一的 key值，從而提高渲染的效率，示例代碼如下：
?二、WXSS模板
?類似CSS
1、rpx
rpx ( responsive pixel）是微信小程序獨有的，用來解決屏適配的尺寸單位。
rpx的實現(xiàn)原理非常簡單:鑒于不同設備屏幕的大小不同，為了實現(xiàn)屏幕的自動適配，rpx把所有設備的屏幕，在寬度上等分為750份（即:當前屏幕的總寬度為750rpx)。
小程序在不同設備上運行的時候，會自動把 rpx的樣式單位換算成對應的像素單位來渲染，從而實現(xiàn)屏幕適配。
2、rpx與px之間的單位換算（了解）
?3、樣式導入（@import）
使用WXSS提供的@import語法，可以導入外聯(lián)的樣式表。
?4、全局樣式和局部樣式?
?全局樣式：定義在app.wxss中的樣式為全局樣式，作用于每一個頁面。
局部樣式：在頁面的.wxss文件中定義的樣式為局部樣式，只作用于當前頁面。
注意：
- 當局部樣式和全局樣式?jīng)_突時，根據(jù)就近原則，局部樣式會覆蓋全局樣式
- 當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式
?鼠標放上去顯示權重
?三、全局配置（app.json）
小程序根目錄下的app.json文件是小程序的全局配置文件。常用的配置項如下：
pages
記錄當前小程序所有頁面的存放路徑
window
全局設置小程序窗口的外觀
tabBar
設置小程序底部的tabBar效果
style
是否啟用新版的組件樣式
1、window
（1）windows節(jié)點常用配置項
?（2）設置導航欄標題
設置步驟：app.json ---> window ---> navigationBarTitleText
（3）設置導航欄背景色?
設置步驟：app.json--->window--->navigationBarBackgroundColor
導航欄背景色修改只支持#開頭的十六進制顏色?
（4）導航欄標題顏色
設置步驟：app.json--->window--->navigationBarTextStyle
?
注意：navigationBarTextStyle的可選值只有black和white
（5）全局開啟下拉刷新
概念：下拉刷新是移動端的專有名詞,指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數(shù)據(jù)的行為。
設置步驟：app.json -> window ->把enablePullDownRefresh的值設置為true
注意：在app.json中啟用下拉刷新功能，會作用于每個小程序頁面！
模擬器無法百分之百還原在手機上的效果，實際開發(fā)中以手機為準。
（6）下拉刷新時窗口的背景色
當全局開啟下拉刷新功能之后，默認的窗口背景為白色。
如果自定義下拉刷新窗口背景色，設置步驟為：
app.json ---> window --->為backgroundColor指定16進制的顏色值#efefef。效果如下:
?
（7）下拉刷新時loading樣式?
當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色。
如果要更改loading樣式的效果,設置步驟為：
app.json -> window ->為backgroundTextStyle指定dark值。效果如下：
?注意：backgroundTextStyle的可選值只有l(wèi)ight和 dark
（8）上拉觸底距離?
概念：上拉觸底是移動端的專有名詞,通過手指在屏幕上的，上拉滑動操作，從而加載更多數(shù)據(jù)的行為。
設置步驟：app.json -> window ->為onReachBottomDistance設置新的數(shù)值
注意：默認距離為50px，如果沒有特殊需求，建議使用默認值即可。
當滾動條距離底部不足50px時，會加載下一頁的數(shù)據(jù)。
2、tabBar
tabBar是移動端應用常見的頁面效果，用于實現(xiàn)多頁面的快速切換。小程序中通常將其分為：
底部 tabBar，頂部 tabBar
?注意：
- tabBar中只能配置最少2個、最多5個tab頁簽
- 當渲染頂部tabBar 時，不顯示icon圖標，只顯示文本
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "index"
},
{
"pagePath": "pages/list/list",
"text": "test"
}]
},案例------配置tabBar
四、頁面配置
小程序中，每個頁面都有自己的.json配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置。
注意：當頁面配置與全局配置沖突時，根據(jù)就近原則，最終的效果以頁面配置為準。
1、常用配置項
?下拉刷新一般不在全局開啟，一般在頁面中配置
上拉觸底值不建議修改
五、網(wǎng)絡數(shù)據(jù)請求
1、小程序中網(wǎng)絡數(shù)據(jù)請求限制
出于安全性方面的考慮，小程序官方對數(shù)據(jù)接口的請求做出了如下兩個限制：
- 只能請求HTTPS類型的接口
- 必須將接口的域名添加到信任列表中
request合法域名處配置接口的域名
2、配置request合法域名
需求描述：假設在自己的微信小程序中，希望請求某域名下的接口
此處使用為黑馬視頻中提供的域名：https://www.escook.cn/
配置步驟：登錄微信小程序管理后臺--->開發(fā)管理--->開發(fā)設置--->服務器域名--->修改request?合法域名
?
?
提示：該域名包含非法字符，只支持英文大小寫字母、數(shù)字、“:”及“ - ”
解決方法--->? 把最后的 / 去掉?
注意事項：
- 域名只支持https協(xié)議
- 域名不能使用IP地址或localhost
- 域名必須經(jīng)過ICP備案
- 服務器域名一個月內可申請修改次數(shù)有限?
3、發(fā)起GET請求?
配置域名成功后，調用微信小程序提供的wx.request()方法，可以發(fā)起GET數(shù)據(jù)請求，示例代碼如下：
<button bindtap="getInfo">發(fā)起GET請求</button> getInfo(){
wx.request({
url: 'https://www.escook.cn/api/get', // 請求的接口地址（必須基于https協(xié)議）
method:'GET', // 請求的方式
data:{ // 發(fā)送到服務器的數(shù)據(jù)
name:'wy',
age:19
},
success:(res)=>{ // 請求成功后的回調函數(shù)
console.log(res)
}
})
},
?
若編譯報錯 域名配置不在合法域名中 ，重新編譯即可。?
4、發(fā)起POST請求
配置域名成功后，調用微信小程序提供的wx.request()方法，可以發(fā)起POST數(shù)據(jù)請求，示例代碼如下：
<button bindtap="postInfo">發(fā)起POST請求</button> postInfo(){
wx.request({
url: 'https://www.escook.cn/api/post', // 請求的接口地址（必須基于https協(xié)議）
method:'POST', // 請求的方式
data:{ // 發(fā)送到服務器的數(shù)據(jù)
name:'yr',
age:18
},
success:(res)=>{ // 請求成功后的回調函數(shù)
console.log(res)
}
})
},
?
?5、在頁面剛加載時請求數(shù)據(jù)
在很多情況下，我們需要在頁面剛加載的時候，自動請求一些初始化的數(shù)據(jù)。此時需要在頁面的onLoad事件中調用獲取數(shù)據(jù)的函數(shù)，示例代碼如下：
?
6、跳過request合法域名校驗?
如果后端程序員僅僅提供了http協(xié)議的接口、暫時沒有提供https協(xié)議的接口。
此時為了不耽誤開發(fā)的進度，我們可以在微信開發(fā)者工具中，臨時開啟「開發(fā)環(huán)境不校驗請求域名、TLS版本及HTTPS證書」選項，跳過request合法域名的校驗。
?
?注意：跳過request合法域名校驗的選項，僅限在開發(fā)與調試階段使用！
7、關于跨域和Ajax的說明
跨域問題只存在于基于瀏覽器的Web開發(fā)中。由于小程序的宿主環(huán)境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問題。
Ajax技術的核心是依賴于瀏覽器中的XMLHttpRequest這個對象，由于小程序的宿主環(huán)境是微信客戶端，所以小程序中不能叫做“發(fā)起Ajax請求”, 而是叫做“發(fā)起網(wǎng)絡數(shù)據(jù)請求”。
--------------------------------------------------------------------------------------------------------------------------------
OK，對照檢驗學習成果吧！----------->
?
?文章來源地址http://www.zghlxwxcb.cn/news/detail-763800.html文章來源：http://www.zghlxwxcb.cn/news/detail-763800.html
?
到了這里，關于微信小程序（二）--- 數(shù)據(jù)綁定，事件綁定，全局配置window,tabBar，網(wǎng)絡數(shù)據(jù)請求，request合法域名，GET，POST的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
