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>
