小程序Android端movable-view拖拽卡顿掉帧的优化

背景： 最近项目中使用到movable-view来作一个拖拽排序的功能，等到功能都实现完成后到真机测试发现，拖拽动画在Android端存在严重的卡顿掉帧，极其不跟手，可是在IOS端却挺流畅。查阅Google发现也有相同的小伙伴有相似问题：小程序的移动拖动图片安卓太过卡顿如何解决

致使卡顿掉帧的缘由

例如页面有 2 个元素 A 和 B，用户在 A 上作 touchmove 手势，要求 B 也跟随移动，movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为：

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

b、逻辑层（App Service）处理 touchmove 事件，再经过 setData 来改变 B 的位置

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

针对以上缘由，微信小程序推出了WXS(WX Script)，其做用是可以让逻辑代码在视图层（Webview）运行，经过减小数据在视图层和逻辑层之间的传输次数，进而达到优化的目的。具体参考：WXS和WXS响应事件

在Taro中使用WXS的优化实践

背景：因为目前Taro中尚未支持WXS（taro#2959），因此我在项目中不能直接编写WXS代码，让Taro帮我编译成WXML。因此得用点小技巧来实现，但愿将来Taro可以支持WXS。

若是你是使用原生小程序开发能够直接参考WXS和WXS响应事件来实现，若是是其余框架则能够参照本文章进行实践。

优化前的代码

优化前经过setState来动态更新x,y坐标值，从而利用movable-view达到拖拽效果。

进行优化

首先须要去除掉movable-view组件，由于没法使用movable-view和WXS来达到减小数据传输通过的路径次数，其次movable-view是用CSS作的动画，咱们能够用position:absolute来代替，在WXS中动态设置top&left的值，达到movable-view的效果。

其次在对应组件（使用到WXS的组件或页面）的目录下建立一个move.wxs的脚本文件，用于动态设置须要作动画的节点的top&left坐标值。

若是你在编译时发现编译后的组件目录下没有move.wxs文件，则可参考copy进行配置。来源taro#2959

最后在对应的JSX下引入move.wxs而且与touchmove事件绑定。

Taro中使用存在的问题

做者编辑本文时，Taro对于WXS并无很好的支持，只能说勉强达到能用WXS优化帧率的目的。不过目前Taro也准备对其进行支持，请关注taro#2959 。做者后续也会持续关注Taro对WXS的支持进度。

在我使用WXS时遇到须要使用callMethod的场景（参考：WXS响应事件），来调用Taro类组件中定义的方法，直接按官方的教程使用是不行的。须要像如下的方式很丑陋的使用，目前具体缘由不知，估计Taro对于没绑定事件的方法编译方式有所不一样。

在线演示

通过上面的优化，在Android机型上拖拽动画的流畅度会获得大幅度提高。你们能够扫下方的小程序码进行体验，流程以下：

• 扫描小程序码进入小程序

• 登录小程序

• 在我的书库页面，扫描书籍后方的条形码添加几本书籍

• 长按书籍后进行拖拽