官方文檔

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

一、小程序結(jié)構(gòu)目錄

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

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

官網(wǎng)

1.1 小程序文件結(jié)構(gòu)和傳統(tǒng)web對比

通過以上對比得出，傳統(tǒng)web是三層結(jié)構(gòu)。而微信小程序 是四層結(jié)構(gòu)，多了一層配置.json

1.2 基本的項(xiàng)目目錄

二、配置介紹

2.1 配置介紹

一個(gè)小程序應(yīng)用程序會(huì)包括最基本的兩種配置文件。一種是全局的app.json和 頁面自己的page.json

注意：配置文件中不能出現(xiàn)注釋

2.2 全局配置app.json

app.json是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。普通快速啟動(dòng)項(xiàng)目里邊的app.json配置

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

字段的含義

pages字段 —— 用于描述當(dāng)前小程序所有頁面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁面定義在哪個(gè)目錄。

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

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

2.3 page.json

這里的page.json其實(shí)用來表示頁面目錄下的page.json這類和小程序頁面相關(guān)的配置。

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

頁面的配置只能設(shè)置app.json中部分window配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋app.json的window中相同的配置項(xiàng)。

三、視圖層

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。

3.1 數(shù)據(jù)綁定

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"，其計(jì)算結(jié)果是一個(gè)字符串

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

3.2 運(yùn)算

3.2.1 三元運(yùn)算

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

3.2.2 算數(shù)運(yùn)算

<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 字符串運(yùn)算

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

3.2.5 注意

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

3.3 列表渲染

3.3.1 wx:for

項(xiàng)的變量名默認(rèn)為itemwx:for-item可以指定數(shù)組當(dāng)前元素的變量名

下標(biāo)變量名默認(rèn)為indexwx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名

<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

渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊 block最終不會(huì)變成真正的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

以上就是微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例的詳細(xì)內(nèi)容，更多關(guān)于微信小程序配置視圖層數(shù)據(jù)綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論