微信小程序 - 视图层 | 基础语法

视图层

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'
    }]
  }
})

 

注:内容摘自 小猿取经