小程序 Android侧移动视图拖放卡上帧优化

例如，页面有2个元素A和B.用户在A上进行touchmove手势，要求B跟随移动。可移动视图是典型示例。 touchmove事件的响应过程是：

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

b，App Layer处理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响应事件来实现。如果是其他框架，您可以参考本文的实践。

优化前的代码

在优化之前，x和y坐标值由setState动态更新，以便通过使用可移动视图实现拖动视图效果。

进行优化

首先你需要删除可移动视图组件，因为你不能使用moving-vie沈阳软件设计

w和WXS减少数据传输的路径数量。其次，移动视图是用CSS制作的动画。我们可以使用位置:绝对值而不是动态设置WXS中的top＆amp; left值来实现可移动视图的效果。

其次，我在小程序 developer dist目录中的相应组件的目录（使用WXS组件或页面）中创建了move.wxs的脚本文件，该目录用于动态设置节点的顶部和左侧坐标值。需要动画。

在dist目录中编写move.wxs的原因是因为Taro不支持WXS，所以它不识别.wxs类型的文件而且不会编译。

最后，move.wxs在相应的JSX下引入并绑定到touchmove事件。