视焦点讯！旅行小程序最佳技术实践，实现丝滑用户体验

const GuestureMode = {INIT: 0,SCALE: 1,SWIPE: 2,MOVE: 3// ...};Component({attached() {this.GuestureModeShared = wx.worklet.shared(GuestureMode.INIT);this.shareX = wx.worklet.shared(0);this.shareY = wx.worklet.shared(0);this.shareScale = wx.worklet.shared(1);// 声明共享变量，并且给需要变化的dom，绑定动画this.applyAnimatedStyle(".current-item", () => {"worklet";return {transform: `translate3d(${this.shareX.value}px, ${this.shareY.value}px, 0) scale(${this.shareScale.value})`     }});// ...},methods: {onScaleGestureHandle(e) {"worklet";const { state } = e;if (state === GestureState.BEGIN) {this.GuestureModeShared.value = GuestureMode.INIT;} else if (state === GestureState.ACTIVE) {if(this.GuestureModeShared.value === GuestureMode.INIT) {this.gestureBefore(e); // 手势类型未知时，判断手势类型} else {this.gestureHandle(e); // 手势类型已知时，处理手势事件    }} else if (state === GestureState.END || state === GestureState.CANCELLED) {this.GuestureModeShared.value = GuestureMode.INIT;}},// 判断手势类型gestureBefore(e) {"worklet";const { focalDeltaX, focalDeltaY, scale } = e;if (Math.abs(focalDeltaX) > Math.abs(focalDeltaY)) {this.GuestureModeShared.value = GuestureMode.SWIPE;} else if (scale > 1) {this.GuestureModeShared.value = GuestureMode.SCALE;} else {this.GuestureModeShared.value = GuestureMode.MOVE;}},// 处理手势事件gestureHandle(e) {"worklet";if (this.GuestureModeShared.value === GuestureMode.SCALE) {this.shareScale.value = e.scale;} else if (this.GuestureModeShared.value === GuestureMode.SWIPE) {// swiper 切换模式时，这里什么都不用做} else if (this.GuestureModeShared.value === GuestureMode.MOVE) {this.shareX.value += e.focalDeltaX;this.shareY.value += e.focalDeltaY;}},// 用于判断手势事件是否应该派发shouldResponseOnMove(e) {"worklet";return this.GuestureModeShared.value === GuestureMode.SWIPE; // 当模式为SWIPE时，才响应手势事件}}})

通过上面的代码，我们实现了手势协商，当用户在图片上进行滑动的操作时，总是会触发 的手势事件，通过对图片当前状态的判断来决定应该触发哪种手势，我们通过此种协商让 手势在合适的时机触发，以此避免手势冲突。

5、使用小程序渲染框架时需要注意的一些地方

作为一款新的渲染优化方式，开发者使用小程序渲染框架需要注意以下内容，以保证渲染的效果和性能。

（1）自定义路由时首帧渲染&首帧性能优化

小程序渲染框架的首帧渲染对共享元素动画非常重要，若共享元素节点的key 错过首帧设置的话，可能会丢失飞跃动画，所以在使用小程序渲染框架时，共享元素的 key 应该尽量在 attached 中或之前设置到页面，并且在首帧渲染时，应尽可能的减少 UI 层的渲染工作 如下：

1）所需要的数据应尽可能使用提前计算好，避免构建页面时等待太久影响响应速度

2）首次设置的数据应该尽可能的少，避免首次渲染时，页面上的元素过多，导致首帧渲染时间过长，导致动画卡顿（如：不要同时初始化太多的 ）

3）确保首帧渲染时，共享元素的 key 正确的设置，避免在首帧渲染时，由于找不到对应的共享元素，导致动画丢失，看不到飞跃动画

4）由于手势事件触发频繁，应尽量避免大量需要的计算的逻辑高频执行，容易导致机器发烫，或者导致动画卡顿

**worklet 函数的使用**

worklet 函数的使用有一些限制，主要是由于它是在 UI 线程执行的，所以 worklet 函数中的 this 并非是页面的 this 实例， 里面所使用到的变量也是通过特殊的 babel 插件转换到UI线程的，需要与逻辑层共用的变量都需要用 wx.worklet.shared 将它声明成共享变量，在 UI 线程调用逻辑层的函数需要使用 wx.worklet.runOnJS

（2）与 web 规范的差异

虽然小程序渲染框架尽可能的与 web 规范保持一致，但是由底层渲染引擎的限制，还是有一些差异，如：

1）display: flex 的默认朝向是 column，而不是 row，这需要开发者注意，官方后续会支持 block 布局方式

2）暂不支持 css 伪元素，如 ::after、::before，官方正在支持中

3）position 仅支持 absolute、relative，不支持 sticky，实现滚动吸附的效果需用 sticky-* 组件来配合 scroll-view 实现

** 在非小程序渲染框架运行环境里的表现是什么**

在非小程序渲染框架的运行环境内， 组件会被视为一个 组件，需要做好布局的兼容

6、何时使用小程序渲染框架

开发时，请确保小程序开发者工具版本是，sdk 版本在 2.30.2+，具体限制可参考。

这些新特性的引入，使得小程序渲染框架在小程序开发中的优势更加明显，开发者可以更加便捷地实现各种复杂的交互效果，并且达到接近原生APP的体验。

1、个性化产品形态：将会根据不同的用户需求和场景，设计出更加符合用户喜好和习惯的动效衔接，进行组件化调用。

2、更加自然和真实的动效衔接：动效衔接将会更加贴近自然规律和真实物理效应，从而增强动画的真实感和用户体验。

3、更加智能化和自适应的动效衔接：动效衔接将会根据用户的操作行为和使用习惯，自适应调整动画效果，从而提高用户体验和产品效果。

4、扩大产品、设计与开发的协作效应：设计对动效的把控、产品对用户的洞察以及开发对新技术的应用，才可以发挥最大化的协作效应。

附1：本文作者

惠波：同程旅行研发工程师

洛奇、子聪：同程旅行体验设计师

老干部：同程旅行产品经理

附2：代码片段

相册小程序代码片段（请使用 PC 端浏览器打开）：

附3：UE标注

附4：AB 实验效果

AB 实验显著win0.23%。

关键词：