BindingX 阿里巴巴开源基于 weex / React Native 的富交互解决方案

Question

BindingX 是阿里巴巴开源的一套基于 weex / React Native 的富交互解决方案，它提供了一种称之为 表达式绑定(Expression Binding) 的机制可以在 weex 上让手势等复杂交互操作以 60fps 的帧率流畅执行，而不会导致卡顿，因而带来了更优秀的用户体验。

简要介绍

由于 weex/RN框架底层使用的 JS-Native Bridge 具有天然的异步特性，这使得 JS 和 Native 之间的通信会有固定的性能损耗，因此在一些复杂的实时交互场景中(如手势)，JS 代码很难以高帧率运行，这极大地限制了框架的能力。目前官方并没有很好的方式解决。

而我们通过探索，提出了一种全新的方式用来解决这个问题，方案称之为 Expression Binding 。它的核心思想是将"交互行为"以表达式的方式描述，并提前预置到 Native 中从而避免 Native 与 JS 频繁通信。

示例展示

下面展示了一部分使用bindingx的示例。您可以下载或者编译我们的playground app来获取更多的示例。同时，您也可以在我们的在线playground上编写您自己的demo。

特性

• 复杂但流畅的交互效果
• 强大的表达式解析引擎
• 丰富的缓动函数

Weex 接入

前置条件

确保你已经集成了weex_sdk。

Android

有两种集成方式可供选择。

1. 手动集成。(推荐)

• 在您项目中的build.gradle中添加依赖:

  implementation 'com.alibaba.android:bindingx-core:1.0.1'
  implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.1'

• 在工程的合适位置(如Application#onCreate)注入BindingX模块。

  BindingX.register()

2. 使用weex plugin loader自动注入bindingx。

• 在您项目中的build.gradle中添加依赖:

  implementation 'com.alibaba.android:bindingx-core:1.0.1'
  implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.1'
  implementation 'org.weex.plugin:plugin-loader:1.0.0'

• 在工程的合适位置(如Application#onCreate)加载插件。

  WeexPluginContainer.loadAll(getApplicationContext());

iOS

CocoaPods

在您项目中的 Podfile 中添加依赖：

pod 'BindingX', '~> 1.0.1'

自动注册 module，无需手动注册。

React Native 接入

前置条件

确保你已经集成了react native。

注：目前我们还没有把插件代码上传到 npm，所以您现在需要通过源码依赖我们的 RN 插件。 我们近期会将插件上传到 npm，届时您可以通过 npm 安装插件。

相关链接

• Github 地址：https://github.com/alibaba/bindingx
• 中文文档：https://www.wenjiangs.com/docs/bindingx-docs-zh