目錄
1.WXML數據模板
數據綁定
事件綁定
小程序中常用的事件
事件對象的屬性列表
target和currentTarget的區別
bindtap的語法格式
在事件處理事件中為data中的數據賦值
事件傳參與數據同步
事件傳參
bindinput的語法綁定事件
文本框和data的數據同步
條件渲染
wx:if
結合使用wx:if
列表渲染
wx:for
wx:key
2.WXSS模板樣式
wxss和css的區別
rpx的實現原理
樣式導入
全局樣式和局部樣式
全局配置
window
tabBar
配置tabBar選項
3.網絡數據請求
小程序網絡數據請求限制
配置request合法域名
發起GET請求和POST請求
在頁面剛加載時請求數據
跳過request合法校驗
跨域和Ajax的說明
1.WXML數據模板
數據綁定
數據綁定的規則：在js文件的data中定義數據，在WXML中使用數據
Mustache語法 即用雙括號將數據包裹起來? ?<view>{{要綁定的數據名稱}}</view>
Mustache語法主要用于綁定內容、綁定屬性和運算（三元運算、算術運算）
進行三元運算時一定要注意書寫的格式 randomNum1:Math.random() * 10 中間的空格是不能省略的，這里表示生成的是10以內的隨機數
進行算術運算也要注意格式，randomNum2:Math.random().tofixed(2) 表示生成一個帶有兩位小數的隨機數，前面內容寫在data中，進行運算時寫在WXML中，直接在雙括號中進行運算
事件綁定
小程序中常用的事件
tap? bindtap或bind:tap? ? ? ?手指觸摸后馬上離開，類似于click點擊事件? ? ? ? ??
input? ? bindinput或bind:input? ? ? ? ? ?文本框的輸入事件
change? ? ?bindchange或bind:change? ? ? 狀態改變時觸發
事件對象的屬性列表
event.type? ? ? ? ? ? ? 獲得event的事件類型
event.target? ? ? ? ? ? 觸發事件的組件的一些屬性值集合
event.detail? ? ? ? ? ? ?額外的信息
target和currentTarget的區別
target是觸發該事件的源頭組件（本人），而currentTarget則是當前事件所綁定的組件（父親）
例如：在view中放置button，點擊按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發view的tap事件處理函數，對于外層組件view來說e.target是內部的按鈕組件，而e.currentTarget是當前的view組件
bindtap的語法格式
在事件處理事件中為data中的數據賦值
通過調用this.setData({})方法來給數據重新賦值，數據的初賦值要寫在data{}中
事件傳參與數據同步
事件傳參
再給事件命名時，不能直接在名字后面加上屬性值，可以再添加一個data-*組件和Mustache組合來傳參，其中*指的是參數的名字（起一個名字），Mustache的雙花括號中放參數
在js文件中，通過event.target.dataset.參數名來獲得參數，注意這里的方法與之前調用的方法是不同的，大的方法是this.setData({})，這個小的是dataset
bindinput的語法綁定事件
在js文件中通過event.detail.value來獲取文本框最新的值
效果就是每輸入一個值，顯示框會把當前文本框的全部內容輸出一次
文本框和data的數據同步
可以先給input設置一個value值（文本框的名字）放在Mustache中，在js文件中先在data中給msg初始賦值，之后在函數中使用this.setData方法，調用event.detail.value即可顯示當前文本框的全部內容，包括初始賦值和在文本框中直接輸入的內容，
可以在wxss中對文本框的樣式進行設置
wxml
js
wxss
條件渲染
wx:if
使用wx:if="{{condition}}"來判斷是否渲染該代碼塊，也可以用wx:elif和wx:else來判斷，注意書寫格式
在下面的案例中，要提前把type的值寫在data中，再在wxml中寫view時進行判斷
結合<block>使用wx:if
使用<block>包裹，可以避免不必要的渲染，提高渲染性
為true時顯示元素，為false時隱藏元素
hidden
可以在data中寫一個flag，讓后在view標簽中使用hidden結合Mustache，將flag放進去，條件為true時隱藏，false時顯示
***wx:if和hidden的對比
列表渲染
wx:for
該方法可將指定的數組循環渲染，在data中創建一個數組如：array:['蘋果','橙子','西瓜']，之后再wxml中寫一個view，中間的渲染寫法是 索引是：{{index}} 當前項是：{{item}}
wx:key
使用wx:key，即可以根據列表中的某個值去查找對應的想要值，比如可以根據id去輸出對應的name值
注意列表的寫法，以及key的代碼 <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
2.WXSS模板樣式
wxss和css的區別
rpx的實現原理
將所有的設備屏幕，在寬度上等分為750份，即當前屏幕的總寬度是750rpx
樣式導入
可以創建一個新文件夾，在其中創建一個公共的wxss文件，一些公有的屬性樣式可以寫在里面，想用的時候在當前的wxss文件中import一下，如@import"common/common.wxss"
全局樣式和局部樣式
全局樣式是寫在app.wxss中的，局部樣式寫在頁面中的.wxss文件中
當二者沖突時，局部樣式會覆蓋全局樣式；當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式
全局配置
window
導航欄背景顏色一般不是文本顏色，以#開頭；導航欄標題顏色，黑色或者白色
enablePullDownRefresh? 是布爾類型值，表示是否下拉表單，為true
backgroundColor? 是下拉表單后，上面的一部分窗口的背景色
backgroundTextStyle? ?是下拉表單后，上面的一部窗口中會有加載的小圓點，小圓點的顏色只能是dark或者light
onReachBottomDistance? 是上拉觸底距離，當滾動條距離底部50px時就加載新的數據，在書寫的過程中，一般默認是50，后面不需要加單位，一般不建議修改這個值
tabBar
tabBar分為底部和頂部
tabBar中最少2個、最多5個tab標簽；當渲染頂部tabBar時，不顯示icon圖標，只顯示文本
同樣是在app.json中配置的tabBar，每個tab中必須包含list，而list中又必須包含pagePath和text兩個屬性
配置tabBar選項
必須要把tabBar的頁面放在最前面，否則加載不出來
3.網絡數據請求
小程序網絡數據請求限制
只能請求HTTPS類型的接口，必須將接口的域名添加到信任列表中
配置request合法域名
發起GET請求和POST請求
調用微信小程序的wx.request()方法，網址、請求方式、發送數據、回調函數
在頁面剛加載時請求數據
跳過request合法校驗
跨域和Ajax的說明
