app.json配置

管理頁(yè)面路由,窗口設(shè)置,tabBar配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list",
    "pages/profile/profile"
   ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "云和商城",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#f96677",
    "selectedColor": "#567788",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)",
        "iconPath": "/images/icon1.png",
        "selectedIconPath": "/images/icon0.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "個(gè)人中心"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.js中全局?jǐn)?shù)據(jù)的訪問

定義

globalData: {
  city: '鄭州'
}

在page中獲取

const app = getApp()
console.log(app.globalData.city)

設(shè)置

app.globalData.city = '洛陽(yáng)'

page中響應(yīng)式數(shù)據(jù)的訪問

定義

data: {
  msg: 'hello'
}

獲取

let msg = this.data.msg

更改

this.setData({
  msg: '新值'
})

WXML語(yǔ)法

1. 插值語(yǔ)法：{{ }}

//屬性和內(nèi)容的數(shù)據(jù)綁定
<view id="item-{{num}}" hidden="{{isShow}}">{{title}}</view>
//類名的數(shù)據(jù)綁定
<view class="{{flag?'red':'blue'}}">紅色或藍(lán)色</view>
//布爾值
<view hidden="{{true}}">紅色或藍(lán)色</view>

2. wx:if wx:elif wx:else

<view wx:if="{{score<= 60}}">及格</view>
<view wx:elif="{{ score < 75}}">良好</view>
<view wx:else>優(yōu)秀</view>

3. wx:for

//item,index為默認(rèn)屬性
<view wx:for="{{list}}" wx:key="*this">{{item}}-----{{index}}</view>

//自定義item,index
<view wx:for="{{list}}" wx:key="*this" wx:for-item="color" wx:for-index="idx">{{color}}-----{{idx}}</view>

4. 用wx:for遍歷復(fù)雜數(shù)據(jù)
   數(shù)據(jù)

list: [
      {
        "title": "圖書",
        "data": [
          {
            "id": 3,
            "goodsName": "西游記"
          },
          {
            "id": 8,
            "goodsName": "水湖"
          },
        ]
      },
      {
        "title": "手機(jī)",
        "data": [
          {
            "id": 9,
            "goodsName": "華為"
          },
          {
            "id": 18,
            "goodsName": "vivo"
          },
          {
            "id": 28,
            "goodsName": "小米"
          },
        ]
      }
    ]

模板

<view class="list">
    <view class="bigItem" wx:for="{{list}}" wx:key="*this">
       <view class="title">{{item.title}}</view>
       <block wx:for="{{item.data}}" wx:for-item="smallItem" wx:key="id">
          <view class="smallItem">
              <view class="id">{{smallItem.id}}</view>
              <view class="goodsName">{{smallItem.goodsName}}</view>
          </view>
      </block>
    </view>
</view>