一、 關於JSON
JSON是一種數據格式,並非編程語言,在小程序中,JSON為靜態配置
1.1 語法
JSON文件包裹在{}中,格式:key-value
“名稱”+:+“值” 注意:一定要給key值加雙引號
1.2 JSON值只能包含以下幾種數據格式:
(1)數字,包含浮點數和整數
(2)字符串,需要包裹在雙引號中
(3)Bool值,true,false
(4)數組,包裹在方括號中[]
(5)對象,包裹在大括號中{}
(6)Null
**JSON文件中無法使用注釋
二、wxml文件
WXML 全稱是 WeiXin Markup Language,是小程序框架設計的一套標簽語言,結合小程序的基礎組件、事件系統,可以構建出頁面的結構。
在app.json文件下添加“pages/wxml/index”保存文件,找到pages/wxml/index.wxml文件修改
2.1 wxml基本語法
不帶任何邏輯功能的wxml基本語法如下:
<!-- 在此寫注釋 -->
<標簽名 屬性名1 = “屬性值” 屬性名2 = “屬性值2” ... > ...<標簽名>
與HTML類似,不同的是,WXML 要求標簽必須是嚴格閉合的,沒有閉合將會導致編譯錯誤。
wxml屬性大小寫敏感。
2.2 數據綁定
WXML通過{{變量名}}來綁定WXML文件和對應javascript文件中的data對象屬性。
屬性值也可動態的改變,{{}}屬性值需要包裹在“ ”中
2.3 邏輯語法
{{ }}內可進行邏輯運算,字符串拼接,數字,字符串,數組
2.3.1 條件邏輯:
使用wx:if="{{變量名}}"來判斷渲染
<view wx:if="{{condition}}"> True </view>
使用wx:elif和wx:else添加else塊
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
wx:if為控制屬性,需將其添加到一個標簽上。如果要一次性判斷多個組件標簽,可以使用一個 標簽將多個組件包裝起來,並在上邊使用 wx:if 控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
2.3.2 列表渲染
在組件上用wx:for控制屬性綁定一個數組,可使數組中的各項數據重復地去渲染同一個組件,默認數組的當前項的下標變量名默認為 index,數組當前項的變量名默認為 item
<!-- array 是一個數組 -->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
<!-- 對應的腳本文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})