小程序WXML 使用小结

数据绑定

<view> {{message}} </view>

// page.js Page({ data: { message: 'Hello MINA!' } })

组件属性(需要在双引号之内)

Page({ data: { id: 0 } })

控制属性(需要在双引号之内)

Page({ data: { condition: true } })

关键字(需要在双引号之内)

true, b: 2, c: 3 } })

} })

, 1, 2, 3, 4], b: 2 } })

, b: 2 }, obj2: { c: 3, d: 4 } } })

, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } })

, unique: 'unique_5'}, {id: 4, unique: 'unique_4'}, {id: 3, unique: 'unique_3'}, {id: 2, unique: 'unique_2'}, {id: 1, unique: 'unique_1'}, {id: 0, unique: 'unique_0'}, ], numberArray: [1, 2, 3, 4] },

switch: function(e) { const length = this.data.objectArray.length for (let i = 0; i < length; ++i) { const x = Math.floor(Math.random() * length) //向下取整 const y = Math.floor(Math.random() * length) const temp = this.data.objectArray[x] this.data.objectArray[x] = this.data.objectArray[y] //2个值交换一下 this.data.objectArray[y] = temp } this.setData({ objectArray: this.data.objectArray }) },

addToFront: function(e) { const length = this.data.objectArray.length this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray) this.setData({ objectArray: this.data.objectArray }) },

addNumberToFront: function(e){ this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray) this.setData({ numberArray: this.data.numberArray }) } })

, msg: 'this is a template', time: '2016-09-15' } } })

, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] }

// - 会转为驼峰写法 event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写 } })

, "y":14 },

, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }],

, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }]

changedTouches 数据格式同 touches。表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

WXML 提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template： <template name="item"> <text>{{text}}</text> </template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

import 的作用域

只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。即不会递归引用

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>

<view> header </view>

<view> footer </view>

秒客网

小程序WXML 使用小结

相关文章