微信小程序配置視圖層數據綁定的方法

本篇內容介紹了“微信小程序配置視圖層數據綁定的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、小程序結構目錄

小程序框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。

小程序框架提供了自己的視圖層描述語言WXML和WXSS，以及JavaScript，并在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注于數據與邏輯。

官網

1.1 小程序文件結構和傳統web對比

通過以上對比得出，傳統web是三層結構。而微信小程序 是四層結構，多了一層配置.json

1.2 基本的項目目錄

二、配置介紹

2.1 配置介紹

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的app.json和 頁面自己的page.json

注意：配置文件中不能出現注釋

2.2 全局配置app.json

app.json是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。普通快速啟動項目里邊的app.json配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含義

• pages息請參考app.json配置

2.3 page.json

這里的page.json其實用來表示頁面目錄下的page.json這類和小程序頁面相關的配置。

開發者可以獨立定義每個頁面的一些屬性，如頂部顏色、是否允許下拉刷新等等。

頁面的配置只能設置app.json中部分window配置項的內容，頁面中配置項會覆蓋app.json的window中相同的配置項。

三、視圖層

WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。

3.1 數據綁定

3.1.1 普通寫法

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

3.1.2 組件屬性

簡直和上面沒區別啊

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

3.1.3 bool類型

不要直接寫 checked="false"，其計算結果是一個字符串

<checkbox checked="{{false}}"> </checkbox>

3.2 運算

3.2.1 三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

3.2.2 算數運算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

3.2.3 邏輯判斷

<view wx:if="{{length > 5}}"> </view>

3.2.4 字符串運算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

3.2.5 注意

花括號和引號之間如果有空格，將最終被解析成為字符串

3.3 列表渲染

3.3.1 wx:for

項的變量名默認為itemwx:for-item可以指定數組當前元素的變量名

下標變量名默認為indexwx:for-index可以指定數組當前下標的變量名

<view wx:for="{{array}}">
  {{index}}: {{item.name}}:{{item.age}}
</view>
Page({
  data: {
    array: [{
      name: 'foo',
      age: 18,
    }, {
      name: 'bar'
      'age': 20,
    }]
  }
})

3.3.2 wx:for

渲染一個包含多節點的結構塊 block最終不會變成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3.3.3 wx:key

提高效率使用的

3.4 條件渲染

3.4.1 wx:if

在框架中，使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> True </view>

3.4.2 hidden

<view hidden="{{condition}}"> True </view>

類似wx:if

頻繁切換 用hidden

不常使用 用wx:if

“微信小程序配置視圖層數據綁定的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！