#微信小程序學習打卡#First day


一、 關於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'

    }]

  }

})
 


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM