WXS响应事件

基础库 2.4.4 开始支持,低版本需做兼容处理

背景

有频繁用户交互的效果在小程序上表现是比较卡顿的,例如页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势,要求 B 也跟随移动,movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为:

a、touchmove 事件从视图层(Webview)抛到逻辑层(App Service)

b、逻辑层(App Service)处理 touchmove 事件,再通过 setData 来改变 B 的位置

一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染,通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟。

实现方案

本方案基本的思路是减少通信的次数,让事件在视图层(Webview)响应。小程序的框架分为视图层(Webview)和逻辑层(App Service),这样分层的目的是管控,开发者的代码只能运行在逻辑层(App Service),而这个思路就必须要让开发者的代码运行在视图层(Webview),如下图所示的流程:

使用 WXS 函数用来响应小程序事件,目前只能响应内置组件的事件,不支持自定义组件事件。WXS 函数的除了纯逻辑的运算,还可以通过封装好的ComponentDescriptor 实例来访问以及设置组件的 class 和样式,对于交互动画,设置 style 和 class 足够了。WXS 函数的例子如下:

var wxsFunction = function(event, ownerInstance) {
var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
instance.setStyle({
"font-size": "14px" // 支持rpx
})
instance.getDataset()
instance.setClass(className)
// ...
return false // 不往上冒泡,相当于调用了同时调用了stopPropagation和preventDefault
}

其中入参 event 是小程序事件对象基础上多了 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一致。

WXS 运行在视图层(Webview),里面的逻辑毕竟能做的事件比较少,需要有一个机制和逻辑层(App Service)开发者的代码通信,上面的 callMethod 是 WXS 里面调用逻辑层(App Service)开发者的代码的方法,而 WxsPropObserver 是逻辑层(App Service)开发者的代码调用 WXS 逻辑的机制。

使用方法

  • WXML定义事件:
<wxs module="test" src="./test.wxs"></wxs>
<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>

上面的change:prop(属性前面带change:前缀)是在 prop 属性被设置的时候触发 WXS 函数,值必须用{{}}括起来。类似 Component 定义的 properties 里面的 observer 属性,在setData({propValue: newValue})调用之后会触发。

注意:WXS函数必须用{{}}括起来。当 prop 的值被设置 WXS 函数就会触发,而不只是值发生改变,所以在页面初始化的时候会调用一次WxsPropObserver的函数。

  • WXS文件test.wxs里面定义并导出事件处理函数和属性改变触发的函数:
module.exports = {
touchmove: function(event, instance) {
console.log('log event', JSON.stringify(event))
},
propObserver: function(newValue, oldValue, ownerInstance, instance) {
console.log('prop observer', newValue, oldValue)
}
}

更多示例请查看在开发者工具中预览效果

Tips

  1. 目前还不支持原生组件的事件、inputtextarea组件的 bindinput 事件
  2. 1.02.1901170及以后版本的开发者工具上支持交互动画,最低版本基础库是2.4.4
  3. 目前在WXS函数里面仅支持console.log方式打日志定位问题,注意连续的重复日志会被过滤掉。

.

小程序框架之视图层 View~事件系统~WXS响应事件的更多相关文章

  1. 小程序框架之视图层 View

    (1)视图层View 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示. 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. WXML(WeiXin Markup languag ...

  2. 小程序框架之视图层 View~基础组件

    框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发.详细介绍请参考组件文档. 什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格一致的样式. 一个组件通常 ...

  3. 小程序框架之视图层 View~获取界面节点信息

    获取界面上的节点信息 WXML节点信息 节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: ...

  4. 小程序三:视图层之WXML

    WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. [1]数据绑定 1.1 简单绑定 数据绑定使用" ...

  5. 微信小程序学习笔记(5)--------框架之视图层

    这一系列转载:http://blog.csdn.net/zsp45212/article/details/53518238 视图层 框架的视图层由wxml与wxss编写,由组件进行展示.将逻辑层的数据 ...

  6. 小程序框架之逻辑层App Service

    小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能. 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. ...

  7. Westore 1.0 正式发布 - 小程序框架一个就够

    世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 ...

  8. 微信小程序框架探究和解析

    何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...

  9. 美团小程序框架mpvue蹲坑指南

    美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人 ...

随机推荐

  1. Redis 主从配置密码以及哨兵

    目录: Redis 主从介绍 哨兵机制 Redis 主从配置 环境 安装 启动服务 检查主从状态 测试数据同步 默认是读写分离的 Redis Sentinel 配置 主Redis宕机测试 配置多个哨兵 ...

  2. 【C++面试】关于虚函数的常见问题

    1.虚函数的代价 1)带有虚函数的每个类会产生一个虚函数表,用来存储虚成员函数的指针 2)带有虚函数的每个类都会有一个指向虚函数表的指针 3)不再是内敛函数,因为内敛函数可以在编译阶段进行替代,而虚函 ...

  3. JavaScript有用的代码片段和trick

    浮点数取整 const x = 123.4545; x >> 0; ~~x; x | 0; Math.floor(x); 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math. ...

  4. learning、trying、teaching

    在工作中学习和提升,学以致用,学习的效果是最好的:工作后学习不需要大段时间,而是要挤出时间,利用时间碎片来学习. 1,Learning 这是第一阶段,看书.google.看视频.看别人的博客,但要是“ ...

  5. python 之 Django框架(orm单表查询、orm多表查询、聚合查询、分组查询、F查询、 Q查询、事务、Django ORM执行原生SQL)

    12.329 orm单表查询 import os if __name__ == '__main__': # 指定当前py脚本需要加载的Django项目配置信息 os.environ.setdefaul ...

  6. LVS(3种模式+10种调度算法)

    一.LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现 ...

  7. python模块知识三 hashlib 加密模块、collections、re模块

    8.hashlib 加密模块 ​ 主要用于加密和校验 常见密文:md5,sha1,sha256,sha512 只要明文相同,密文就相同 只要明文不相同,密文就是不相同的 不能反逆(不能解密)--md5 ...

  8. C# vb .net实现消除红眼效果

    在.net中,如何简单快捷地实现Photoshop滤镜组中的消除红眼效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  9. 前端开发 Angular

    https://www.angularjs.net.cn/tutorial/18.html

  10. [C#] 匿名方法的方便和安全

    static void Main(string[] args) { int count = 5; //不安全写法 Task.Run(() => { Thread.Sleep(1000); Con ...