官方文檔

https://developers.weixin.qq.com/miniprogram/dev/component/

一、小程序結構目錄

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

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

官網

1.1 小程序文件結構和傳統(tǒng)web對比

通過以上對比得出，傳統(tǒng)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字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。

window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。

完整的配置信息請參考app.json配置

2.3 page.json

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

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

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

三、視圖層

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

3.1 數據綁定

3.1.1 普通寫法

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

3.1.2 組件屬性

簡直和上面沒區(qū)別啊

<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

渲染一個包含多節(jié)點的結構塊 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

以上就是微信小程序配置視圖層數據綁定相關示例的詳細內容，更多關于微信小程序配置視圖層數據綁定的資料請關注腳本之家其它相關文章！

最新評論