app.json配置

管理页面路由,窗口设置,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": "首页",
        "iconPath": "/images/icon1.png",
        "selectedIconPath": "/images/icon0.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "个人中心"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.js中全局数据的访问

定义

globalData: {
  city: '郑州'
}

在page中获取

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

设置

app.globalData.city = '洛阳'

page中响应式数据的访问

定义

data: {
  msg: 'hello'
}

获取

let msg = this.data.msg

更改

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

WXML语法

插值语法：{{ }}

//属性和内容的数据绑定
<view id="item-{{num}}" hidden="{{isShow}}">{{title}}</view>
//类名的数据绑定
<view class="{{flag?'red':'blue'}}">红色或蓝色</view>
//布尔值
<view hidden="{{true}}">红色或蓝色</view>

wx:if wx:elif wx:else

<view wx:if="{{score<= 60}}">及格</view>
<view wx:elif="{{ score < 75}}">良好</view>
<view wx:else>优秀</view>

wx:for

//item,index为默认属性
<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>

用wx:for遍历复杂数据
数据

list: [
      {
        "title": "图书",
        "data": [
          {
            "id": 3,
            "goodsName": "西游记"
          },
          {
            "id": 8,
            "goodsName": "水湖"
          },
        ]
      },
      {
        "title": "手机",
        "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>