Weex BindingX 尝鲜

图片描述

前言

三月初,阿里巴巴开源的一套基于 Weex、React Native 的富交互解决方案 「BindingX」。提供了一种称之为 「Expression Binding」 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行,而不会导致卡顿,因而带来了更优秀的用户体验。

背景

听上去「高大上」,那为啥要造这个轮子呢?

这就得从源头说起,他到底解决了什么问题。

我们知道,Weex 和 React Native 同样都是三层结构,「 JS 层、 Native 层、 Bridge 层」,Native 层负责视觉绘制、事件收集,JS 层负责视觉控制、事件处理,Bridge 层是 JS 层和 Native 层的沟通桥梁,负责指令「翻译」。以 Weex 为例:

想让 Native 层做一些复杂的交互操作时,JS 层就需要不停得处理从 Native 层收集来的事件然后作出「及时」响应,如果响应「不及时」就会导致视觉卡顿。

怎么样才算是「及时」呢?

我们常说 60fps 帧率是流畅的基础,这就意味着,一次有效的刷新需要在 1/60 s 内完成,如果 JS 层从事件接受、处理、回馈到 Native 绘制新的视图完成超过了 16.67ms 将会出现「视觉卡顿」。

另外,即使每一次更新都可以完全控制在 16.67ms 内,大量的通讯操作也会消耗掉过多的 CPU,以至于加大了 Crash 的风险

如果不突破这层瓶颈,此类技术将很难达到一个新的高度。

BindingX 就是解决这个问题的。

原理

BindingX 提出的 「Expression Binding」 将具体的手势控制行为以 「表达式」 的方式传递给 Native,监控「被绑定元素」上发生的手势操作并输出过程中横向「x」和纵向「y」的偏移量,因此我们即可将「x,y」作为表达式「f(x),f(y)」的入参,针对性的对某一目标元素的样式进行「绑定变化」。

而这所以操作都是在 Native 层独立完成的,大大减小了 JS 层和 Bridge 层的压力。

「无 Binding 模式」

「Binding 模式」

表达式

表达式,是由数字、运算符、变量等以能求得有意义数值的字符串。譬如, x\*3+10 就是一个表达式,当x被赋值时,整个表达式就会有一个明确的结果。通过表达式,我们就可以描述一个具体的交互行为,比如我们希望x从0变化到100时,透明度能从1变化到0.5,那么表达式可以描述为: f(alpha) = 1-(x/100)*0.5 也可以是 f(alpha) = 1-x/200 只不过第一种表达式更直白。

下面举一个简单的例子。

/* 简码 */
bindingx.bind({
      anchor:foo_view.ref  ,                    //==> 事件的触发者
      eventType:'pan',                          //==> 事件类型
      props: [
          {
            element:foo_view.ref,               //==> 要改变的视图的引用或者id
            property:'transform.translateX',    //==> 要改变的属性
            expression:'x+0'                    //==> 表达式
          }
        ]
    });

就这么简单,几行代码即可绑定 foo_view 实现视图随手势移动的交互。当然复杂的也有,只不过都是由这么一个个小的交互堆积而成的。

除了基本的四则运算外,还支持三元运算符、数学函数等高级语法,基本可以满足绝大部分的场景。

事件类型

前面的例子中用到了 pan 手势,除手势外,BindingX 还支持「列表的滚动 scroll」、「动画 timing」甚至是「陀螺仪感 orientation」,每种事件类型使用方式大致相同,也有注意点,详细请参阅《bindingx 官方文档》

Do it

怎么样能快速体验呢?

跟上我的脚步

playground

官方虽然也提供了 试验田 https://alibaba.github.io/bindingx/playground,但语法均为 Rax 但 DSL,并不少 Weex 对外的 Vue 版本,我们无法在线编辑查看效果,只能使用阿里系App「如淘宝、闲鱼、飞猪」扫码体验效果。

这些都不是我们想要的。

当然方法总是有的。

直接将 BindingX 的官方代码 clone 下来,上面有支持 Vue 版本的 Weex Playground。

bindingx/weex/playground/[ios|android]

ios 和 android 选一个用工具安装到自己的手机上。此处就不多解释了,不会的问下 google,或者下方留言。

使用 http://dotwe.org/vue/ 在线编辑,扫码看效果。

给大家分享几个 Vue 版本的 demo。

http://dotwe.org/vue/e50f76a6c13337b6fa4201a045c5dc0c

http://dotwe.org/vue/2dff486956044ea59b3d38a2cf20b506

http://dotwe.org/vue/64998432f2a249f5cb35b4de0040526d

http://dotwe.org/vue/cd942c4bee9c4b7bcceda4e3aaf94c70

严选 demo 引入 BindingX

这是很早以前的一个小 Demo,感兴趣的可以 star 一下
https://github.com/zwwill/yanxuan-weex-demo

下面我基于严选的 Demo 进行的小试用。

升级 ios platform

要想使用 BindingX 插件,就必须使自己的 platform 支持。方法很简单,只需要将 platforms/ios/Podfile 进行升级修改即可。

source 'git@github.com/CocoaPods/Specs.git'
platform :ios, '8.0'                                    #最低8.0
#inhibit_all_warnings!

def common
    pod 'WeexSDK', '0.17.0'                         #升级至 0.17.0
    pod 'Weexplugin', :path=>'./Weexplugin/'
    pod 'WXDevtool'
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
    pod 'BindingX'                                     #增加 BindingX
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

随后执行一遍 pod install 即可安装成功。如出现错误提示,按提示 fix 掉即可。

小试牛刀

Vue 的引入方式不同于 Rax,需要使用 weex.requireModule() API。

<template>
    <div class="wrapper">
        <image ref="headerBg" resize="cover" src="http://cdn.zwwill.com/yanxuan/imgs/bg5.png"></image>
        <scroller ref="contentScroller">
            <div>
                <!-- 省略非关键代码 -->
            </div>
            <div class="fbs">
                <!-- 省略非关键代码 -->
            </div>
        </scroller>
    </div>
</template>

<script>
    const binding = weex.requireModule('bindingx');    //引入 bindingx
    export default {
        mounted(){
            this.headerBgBinding();
        },
        beforeDestroy(){
            this.headerBgBindingDestory();
        },
        methods: {
            headerBgBinding(){
                let self = this,
                    scroller = self.$refs.contentScroller.ref,
                    headerBg = self.$refs.headerBg.ref;
                    
                let bindingResult = binding && binding.bind({
                    eventType:'scroll',
                    anchor:scroller,
                    props:[
                        {
                            element:headerBg,
                            property:'transform.scale',
                            expression:{
                                origin:'y<0?(1-y/500):(1+y/500)'
                            }
                        },
                        {
                            element:headerBg,
                            property:'transform.translateY',
                            expression:{
                                origin:'-y/2'
                            }
                        }
                    ]
                },function(e){
                });
                self.gesToken = bindingResult.token;
            }
            headerBgBindingDestory(){
                let self = this;
                if(self.gesToken != 0) {
                    binding.unbind({
                      eventType:'scroll',
                      token:self.gesToken
                    })
                    self.gesToken = 0;
                  }
            }
        }
    }
</script>

实现的效果就是最常见的个人信息页,title 背景随着滚动事件变换大小。

效果动图 http://cdn.zwwill.com/yanxuan/resource/bindingx2.gif

写在最后

Weex 有了 BindingX 如虎添翼。效率更高性!能更稳定!同期开源的还有 GCanvas 也是一把神器。

近期工作繁重,通宵写文章,如发现文章残瑕处,敬请谅解!

相关链接

作者: 木羽 zwwill
首发地址:https://github.com/zwwill/blog/issues/20

willspace
stay hungry stay foolish
6.3k 声望
623 粉丝
0 条评论
推荐阅读
vue 项目快速输出微信、支付宝、百度小程序
上周,Megalo@0.2.0 正式发布,优化了数据更新性能的同时,支持了百度智能小程序,着实激动了一把,这“可能”是目前社区里第一个同时支持三端小程序的 vue 小程序框架。下面我们就来试试他的效果。

zwwill_木羽28阅读 6.1k评论 1

ReactNative之Android绝对布局position:'absolute'问题
工作中会遇到各种各样的问题,ReactNative开发也是填坑不止。比如最近在开发需求中,就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:'absolute'属性,在Android上却无法正常显...

似水流年1阅读 3.9k

ReactNative0.71正式版发布,Ts作为首要开发语言
时隔近4个月的时间,ReactNative带来了0.71版本的更新,这速度对比隔壁Flutter不得不说是真的有的慢。这个版本的更新的内容还是比较重磅和突破性的,主要体现在如下几点:编程语法默认改为TypeScript使用Flexbox ...

似水流年1阅读 503

ReactNative开发笔记(持续更新...)
本文均为RN开发过程中遇到的问题、坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2022年11月8日更新)

kovli阅读 3.6k

Native Wechat | React Native 微信 SDK
许多 React Native 开发者不具备原生开发能力,更不用提将他们的 App 对接到微信。尤其微信 OpenSDK 是一个令人头疼的东西,因为它的文档十分糟糕,里面许多的 API 并不清晰与直观。为帮助使用 React Native 的开...

HectorChong1阅读 441

Android编译报错:org.jetbrains.plugins.gradle.tooling.uti
新建了一个基于ReactNative version0.60.5的新项目,在使用Android Studio编译项目的时候build了如下错误:

似水流年阅读 3.3k

最新版Android原生集成RN
现在不少应用都是采用了混合开发模式,不论是原生加RN,或是原生加Flutter,或是原生加H5。原生实现主业务线,其他部分可以借助跨平台方案开发,提高开发效率,或者实现热更新,调高业务迭代效率。

似水流年阅读 1.3k

6.3k 声望
623 粉丝
宣传栏