视图层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

类似前端HTML

一.数据绑定

普通语法

test.wxml

<view>{{ msg }}</view>  # 类似Vue插值表达式 渲染test.js文件中Page中data对象中对应变量的值

test.js

Page({

  data: {

    msg: 'Hello WeChat!'

  }

})

组件属性

<view id="item-{{id}}"> </view>

Page({

  data: {

    id: 0

  }

})

bool类型

不要直接写 checked="false"，其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>  # 单选框不选中

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>  # 此时不渲染Hidden

Page({

  data: {

    flag: true,

  }

})

算数运算

<view> {{a + b}} + {{c}} + d </view>  # 3 + 3 + d

Page({

  data: {

    a: 1,

    b: 2,

    c: 3

  }

})

逻辑判断

<view wx:if="{{length > 5}}">hello</view>  # hello

Page({

  data:{

    length : 6,

  }

})

字符串运算

<view>{{"hello" + name}}</view>  # helloword

Page({

  data:{

    name: 'word'

  }

})

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">

  {{index}}: {{item.message}}

</view>

Page({

  data: {

    array: [{

      message: 'foo',

    }, {

      message: 'bar'

    }]

  }

})

注:内容摘自 小猿取经

微信小程序 - 视图层 | 基础语法的相关教程结束。