初识小程序视图层wxml

视图层 View

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
wxml相当于html
感觉还是容易理解，因为之前用过freemarker，很多标签大同小异，微信自己封装了一套
敲了一些小demo，记录一下
数据绑定 列表渲染 条件渲染 模板 事件
官方文档地址
index.js文件

Page({
  data: {
    id: 0,
    msg: "123",
    array: [1, 2, 3],
    array2: [{
      message: 'foo',
    }, {
      message: 'bar'
    }],
    condition: false,
    flag: false,
    a: 1,
    b: 2,
    c: 3,
    name: 'MINA',
    object: {
      key: "hello"
    },
    zero: 5,
    lenght: 1,
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  },
  tapName(event, ownerInstance) {
    console.log(JSON.stringify(event))
    console.log(JSON.stringify(ownerInstance))
  },
  handleTap1(event){
    console.info('outer')
  },
  handleTap2() {
    console.info('middle')
  },
  handleTap3(event) {
    console.info(JSON.stringify(event))
    console.info('inner')
  }
})

index.wxml文件

<!-- 数据绑定 div -->
<view>{{msg}}</view>
<!-- 数据绑定 span -->
<text>{{msg}}</text>
<!-- 组件属性(需要在双引号之内) -->
<view id="item-{{id}}">1</view>
<!-- 控制属性(需要在双引号之内) -->
<view wx:if="{{condition}}">22222</view>
<!-- 特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。复选框 -->
<checkbox checked="{{true}}"></checkbox>
<!-- 三元运算 -->
<view hidden="{{flag?true:false}}">Hidden</view>
<!-- 算法运算 -->
<view>{{a+b}}+{{c}}+1</view>
<!-- 逻辑判断 -->
<view wx:if="{{a>1}}" >2</view>
<!-- 字符串运算 -->
<view>{{"hello"+name}}</view>
<view>hello{{name}}</view>
<!-- 数据路径运算 -->
<view>{{object.key}}</view>
<view>{{array[0]}}</view>
<!-- 组合 -->
<view wx:for="{{[zero,0,1,2]}}">{{item}}</view>
<!-- 对象 -->
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
<!-- 列表渲染 -->
<!-- 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
    默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item -->
<view wx:for="{{array2}}">{{index}}:{{item.message}}</view>
<!-- 使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名： -->
<view  wx:for="{{array2}}" wx:for-index="idx" wx:for-item="itemName" >
{{idx}}:{{itemName.message}}
</view>
<!-- <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view> -->
<block wx:for="{{[1, 2, 3]}}">
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>
<!-- 条件渲染 -->
<view wx:if="{{lenght==1}}">1</view>
<view wx:elif="{{lenght>1}}">2</view>
<view wx:else>3</view>
<!-- 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。
如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 -->
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>
<!-- 注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 -->
<view hidden='true'>哈哈哈</view>

<!-- 模板 -->
<!-- 使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如： -->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>
<!-- 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如 -->
<template is="msgItem" data="{{...item}}" />

<template name="odd">
  <view>odd</view>
</template>
<template name="even">
  <view>even</view>
</template>
<!-- is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板： -->
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
<!-- <wxs module="wxs" src="../wxs/test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}">Click me!</view> -->

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>