WXML
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
<view> {{ message }} </view>
<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>
Page({
data: {
message: 'Hello MINA!',
id: 0,
condition: true,
}
})
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
运算
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
<!--三元运算-->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!--逻辑判断-->
<view wx:if="{{length > 5}}"> 1</view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<!--多个组件包装在一起的逻辑判断 block是一个包装元素 不是标签-->
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<!--算数运算-->
<view> {{a + b}} + {{c}} + d </view>
<!--字符串运算-->
<view>{{"hello" + name}}</view>
<!--数据路径运算-->
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
a: 1,
b: 2,
c: 3，
name: 'MINA'，
object: {
key: 'Hello '
},
array: ['MINA']，
}
})
wx:if 与 hidden的区别
因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好
组合
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
.....这个暂时没有用过不写。
列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，使用 wx:for-index 可以自定义数组当前下标的变量名, 数组当前项的变量名默认为 item。使用 wx:for-item 可以自定义数组当前元素的变量名：
<view wx:for="{{products}}">
{{index}}: {{item.product_name}}
</view>
<!--自定义下标变量名和元素变量名-->
<view wx:for="{{products}}" wx:for-index="productsIndex" wx:for-item="productsItem">
{{productsIndex}}: {{productsItem.product_name}}
</view>
Page({
data: {
products: [{
product_name: 'book',
}, {
product_name: 'computer'
}]
}
})
wx:for也可以进行嵌套循环。九九乘法表。
<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>
我认为的双层循环。注意添加 wx:key="key"来防止报错。
<!--反复渲染购物车的商店信息-->
<view wx:for="{{shopgroupcart}}" wx:for-item="shopgroupcart" wx:for-index="groupindex">
<view>
<view class='shopname'>{{shopgroupcart.shop_name}} ></view>
</view>
<!--反复渲染商店中的商品信息-->
<view wx:for="{{shopgroupcart.sku_list}}" wx:for-item="shopcart" wx:for-index="cartindex" >
<!--商品图片-->
<view>
<image src="{{hostImg}}{{shopcart.avatar}}" mode="aspectFill"/>
</view>
<!--购物车商品名称与价格-->
<view>
<text>{{shopcart.product_name}}</text>
<text >¥ {{shopcart.promote_price}}</text>
</view>
</view>
</view>
这里有很多循环的注意事项 暂时不提及。
模板
还没有用过暂时不写。
事件
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。
<view id="tapTest" data-hi="WeChat" bindtap="tapName" data-alpha-beta="1" data-alphaBeta="2"> Click me! </view>
Page({
//事件处理函数
tapName: function(e) {
e.currentTarget.dataset.id ==== WeChat
e.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
e.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
console.log(e)
}
})
常用的事件是tap(手指触摸后马上离开),事件绑定的方法是bind+tap,或者catch+tap,bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
- tap属于冒泡事件类型。
-
<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件属于非冒泡类型。
引用
引用是配合模板一起用的 暂时没有用到。
