Unexpected token
或者Unexpected token: "tokenName", may be reserved words.
的报错。<!--WXML--><view>{{message}}</view>
// page.jsPage({data: {message: 'Hello MINA!',},})
<!--WXML--><view wx:for="{{array}}">{{item}}</view>
// page.jsPage({data: {array: [1, 2, 3, 4, 5],},})
<!--WXML--><view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view><view wx:elif="{{view == 'APP'}}">APP</view><view wx:else="{{view == 'MINA'}}">MINA</view>
// page.jsPage({data: {view: 'MINA',},})
<!--WXML--><template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view></template><template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template>
// page.jsPage({data: {staffA: { firstName: 'Hulk', lastName: 'Hu' },staffB: { firstName: 'Shang', lastName: 'You' },staffC: { firstName: 'Gideon', lastName: 'Lin' },},})
<view bindtap="add">{{count}}</view>
Page({data: {count: 1,},add(e) {this.setData({count: this.data.count + 1,})},})
<view>{{ message }}</view>
Page({data: {message: 'Hello MINA!',},})
<view id="item-{{id}}"></view>
Page({data: {id: 0,},})
<view wx:if="{{condition}}"></view>
Page({data: {condition: true,},})
true
:boolean 类型的 true,代表真值。false
: boolean 类型的 false,代表假值。checked="false"
,其计算结果是一个字符串,转成 boolean 类型后代表真值。<view hidden="{{flag ? true : false}}">Hidden</view>
<view>{{a + b}} + {{c}} + d</view>
Page({data: {a: 1,b: 2,c: 3,},})
<view wx:if="{{length > 5}}"></view>
<view>{{"hello" + name}}</view>
Page({data: {name: 'MINA',},})
<view>{{object.key}} {{array[0]}}</view>
Page({data: {object: {key: 'Hello ',},array: ['MINA'],},})
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
Page({data: {zero: 0,},})
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2,},})
{for: 1, bar: 2}
...
来将一个对象展开:<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({data: {obj1: {a: 1,b: 2,},obj2: {c: 3,d: 4,},},})
{a: 1, b: 2, c: 3, d: 4, e: 5}
。<template is="objectCombine" data="{{foo, bar}}"></template>
Page({data: {foo: 'my-foo',bar: 'my-bar',},})
{foo: 'my-foo', bar:'my-bar'}
。<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({data: {obj1: {a: 1,b: 2,},obj2: {b: 3,c: 4,},a: 5,},})
{a: 5, b: 3, c: 6}
。<view wx:for="{{[1,2,3]}} ">{{item}}</view>
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>
wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。index
,数组当前项的变量名默认为 item
。<view wx:for="{{array}}">{{index}}: {{item.message}}</view>
Page({data: {array: [{message: 'foo',},{message: 'bar',},],},})
wx:for-item
可以指定数组当前元素的变量名,wx:for-index
可以指定数组当前下标的变量名:<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}</view>
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>block wx:for
block wx:if
,也可以将 wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:<block wx:for="{{[1, 2, 3]}}"><view>{{index}}:</view><view>{{item}}</view></block>
<input>
中的输入内容,<switch> 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。wx:key
的值以两种形式提供*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;">{{item.id}}</switch><button bindtap="switch">Switch</button><button bindtap="addToFront">Add to the front</button><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;">{{item}}</switch><button bindtap="addNumberToFront">Add to the front</button>
Page({data: {objectArray: [{ id: 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(e) {const length = this.data.objectArray.lengthfor (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]this.data.objectArray[y] = temp}this.setData({objectArray: this.data.objectArray,})},addToFront(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{ id: length, unique: 'unique_' + length }].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray,})},addNumberToFront(e) {this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray,})},})
<view wx:for="{{[1,2,3]}} ">{{item}}</view>
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>
wx:if="{{condition}}"
来判断是否需要渲染该代码块:<view wx:if="{{condition}}">True</view>
wx:elif
和 wx:else
来添加一个 else 块:<view wx:if="{{length > 5}}">1</view><view wx:elif="{{length > 2}}">2</view><view wx:else>3</view>
wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。<block wx:if="{{true}}"><view>view1</view><view>view2</view></block>
<block/>
并不是一个组件,它只是一个包装元素,不会在页面中做任何渲染,只接受控制属性。wx:if
vs hidden
wx:if
的条件值切换时,框架有一个局部渲染的过程,因此它会确保条件块在切换时,销毁或重新渲染。wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。<template/>
内定义代码片段,如:<!--index: intmsg: stringtime: string--><template name="msgItem"><view><text>{{index}}: {{msg}}</text><text>Time: {{time}}</text></view></template>
<template is="msgItem" data="{{...item}}" />
Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15',},},})
<template name="odd"><view>odd</view></template><template name="even"><view>even</view></template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}" /></block>
<wxs />
模块。bindtap
,当用户单击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
Page({tapName(event) {console.log(event)},})
{"type": "tap","timeStamp": 895,"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.instance
对象,第二个参数是ownerInstance
,和event.instance
一样是一个ComponentDescriptor
对象。具体使用如下:<wxs module="wxs" src="./test.wxs"></wxs><view id="tapTest" data-hi="TMF" bindtap="{{wxs.tapName}}">Click me!</view>**注:绑定的WXS函数必须用{{}}括起来**
function tapName(event, ownerInstance) {console.log('tap wechat', JSON.stringify(event))}module.exports = {tapName,}
ownerInstance
包含了一些方法,可以设置组件的样式和 class,具体包含的方法以及为什么要用 WXS 函数响应事件,请单击查看详情。类型 | 触发条件 |
touchstart | 手指触摸动作开始 |
touchmove | 手指触摸后移动 |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 |
touchend | 手指触摸动作结束 |
tap | 手指触摸后马上离开 |
longpress | 手指触摸后,超过 350ms 再离开,如果指定了事件回调函数并触发了这个事件,tap 事件将不被触发 |
longtap | 手指触摸后,超过 350ms 再离开(推荐使用 longpress 事件代替) |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
animationstart | 会在一个 WXSS animation 动画开始时触发 |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 |
animationend | 会在一个 WXSS animation 动画完成时触发 |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 |
bindtap
、catchtouchstart
。在非原生组件中,bind
和catch
后可以紧跟一个冒号,其含义不变,如bind:tap
、catch:touchstart
。bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。handleTap3
和handleTap2
(因为 tap 事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),单击 middle view 会触发handleTap2
,单击 outer view 会触发handleTap1
。<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view></view>
handleTap2
、handleTap4
、handleTap3
、handleTap1
。<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view></view>
capture-bind
改为 capture-catch
,则只会触发 handleTap2
。<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view></view>
属性 | 类型 | 说明 |
type | string | 事件类型 |
timeStamp | interger | 事件生成时的时间戳 |
target | object | 触发事件的组件的一些属性值集合 |
currentTarget | object | 当前组件的一些属性值集合 |
属性 | 类型 | 说明 |
detail | object | 额外的信息 |
属性 | 类型 | 说明 |
touches | array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | array | 触摸事件,当前变化的触摸点信息的数组 |
<canvas>
中的触摸事件不可冒泡,所以没有 currentTarget。属性 | 类型 | 说明 |
id | string | 事件源组件的 id |
tagName | string | 当前组件的类型 |
dataset | object | 事件源组件上由 data- 开头的自定义属性组成的集合 |
属性 | 类型 | 说明 |
id | string | 当前组件的 id |
tagName | string | 当前组件的类型 |
object | 当前组件上由 data- 开头的自定义属性组成的集合 |
data-
开头,多个单词由连字符-
链接,不支持大写(大写会自动转成小写)如data-element-type
,最终在 event.currentTarget.dataset
中会将连字符转成驼峰elementType
。<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">DataSet Test</view>
Page({bindViewTap(event) {event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写},})
属性 | 类型 | 说明 |
identifier | number | 触摸点的标识符 |
pageX,pageY | number | 距离文档左上角的距离,文档的左上角为原点,横向为 X 轴,纵向为 Y 轴 |
clientX,clientY | number | 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为 X 轴,纵向为 Y 轴 |
属性 | 类型 | 说明 |
identifier | number | 触摸点的标识符 |
x, y | number | 距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为 X 轴,纵向为 Y 轴 |
detail
带有的 x,y 同 pageX,pageY 代表距离文档左上角的距离。ComponentDescriptor
实例来访问以及设置组件的 class 和样式,对于交互动画,设置 style 和 class 足够了。WXS 函数的例子如下:const wxsFunction = function(event, ownerInstance) {const instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例instance.setStyle({'font-size': '14px', // 支持rpx})instance.getDataset()instance.setClass(className)// ...return false // 不往上冒泡,相当于调用了同时调用了stopPropagation和preventDefault}
event.instance
来表示触发事件的组件的 ComponentDescriptor
实例。ownerInstance
表示的是触发事件的组件所在的组件的 ComponentDescriptor
实例,如果触发事件的组件是在页面内的,ownerInstance
表示的是页面实例。ComponentDescriptor
的定义如下:方法 | 参数 | 描述 |
selectComponent | selector 对象 | 返回组件的 ComponentDescriptor 实例 |
selectAllComponents | selector 对象数组 | 返回组件的 ComponentDescriptor 实例数组 |
setStyle | Object/string | 设置组件样式,支持 rpx。设置的样式优先级比组件 WXML 里面定义的样式高。不能设置最顶层页面的样式 |
addClass/removeClass/ hasClass | String | 设置组件的 class。设置的 class 优先级比组件 WXML 里面定义的 class 高。不能设置最顶层页面的 class |
getDataset | 无 | 返回当前组件/页面的 dataset 对象 |
callMethod | (funcName:string, args:object) | 调用当前组件/页面在逻辑层(App Service)定义的函数。funcName 表示函数名称,args 表示函数的参数 |
requestAnimationFrame | Function | 和原生 requestAnimationFrame 一样。用于设置动画 |
getState | 无 | 返回一个 object 对象,当有局部变量需要存储起来后续使用的时候用这个方法 |
triggerEvent | (eventName, detail) | 和组件的 triggerEvent 一致 |
callMethod
是 WXS 里面调用逻辑层(App Service)开发者的代码的方法,而 WxsPropObserver
是逻辑层(App Service)开发者的代码调用 WXS 逻辑的机制。<wxs module="test" src="./test.wxs"></wxs><viewchange:prop="{{test.propObserver}}"prop="{{propValue}}"bindtouchmove="{{test.touchmove}}"class="movable"></view>
change:prop
(属性前面带 change:前缀)是在 prop 属性被设置的时候触发 WXS 函数,值必须用{{}}
括起来。类似 Component 定义的 properties 里面的 observer 属性,在setData({propValue: newValue})
调用之后会触发。{{}}
括起来。当 prop 的值被设置 WXS 函数就会触发,而不只是值发生改变,所以在页面初始化的时候会调用一次WxsPropObserver
的函数。module.exports = {touchmove(event, instance) {console.log('log event', JSON.stringify(event))},propObserver(newValue, oldValue, ownerInstance, instance) {console.log('prop observer', newValue, oldValue)},}
import
和include
。import
可以在该文件中使用目标文件定义的template
,如:item
的template
:<!-- item.wxml --><template name="item"><text>{{text}}</text></template>
item
模板:<import src="item.wxml" /><template is="item" data="{{text: 'forbar'}}" />
template
,在 B 中可以使用 A 定义的template
,但是 C 不能使用 A 定义的template
。<!-- A.wxml --><template name="A"><text>A template</text></template>
<!-- B.wxml --><import src="a.wxml" /><template name="B"><text>B template</text></template>
<!-- C.wxml --><import src="b.wxml" /><template is="A" /><!-- Error! Can not use tempalte when not import A. --><template is="B" />
include
可以将目标文件除了 <template/>
<wxs/>
外的整个代码引入,相当于是拷贝到include
位置,如:<!-- index.wxml --><include src="header.wxml" /><view>body</view><include src="footer.wxml" />
<!-- header.wxml --><view>header</view>
<!-- footer.wxml --><view>footer</view>
本页内容是否解决了您的问题?