微信小程序基础

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语法

1. 插值语法：{{ }}

//属性和内容的数据绑定

//类名的数据绑定
红色或蓝色
//布尔值

2. wx:if wx:elif wx:else

及格
良好
优秀

3. wx:for

//item,index为默认属性
{{item}}-----{{index}}

//自定义item,index
{{color}}-----{{idx}}

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

list: [
      {
        "title": "图书",
        "data": [
          {
            "id": 3,
            "goodsName": "西游记"
          },
          {
            "id": 8,
            "goodsName": "水湖"
          },
        ]
      },
      {
        "title": "手机",
        "data": [
          {
            "id": 9,
            "goodsName": "华为"
          },
          {
            "id": 18,
            "goodsName": "vivo"
          },
          {
            "id": 28,
            "goodsName": "小米"
          },
        ]
      }
    ]

模板

    
       {{item.title}}
       
          
              {{smallItem.id}}
              {{smallItem.goodsName}}