Skip to content

Latest commit

 

History

History
196 lines (128 loc) · 9.88 KB

README_cn.md

File metadata and controls

196 lines (128 loc) · 9.88 KB
Raw

BindingX_250.png | center | 259x249

BindingX

PRs welcome | left license | left CircleCI

基于 weex / React Native 的富交互解决方案。

官网: https://alibaba.github.io/bindingx/

它提供了一种称之为 表达式绑定(Expression Binding) 的机制可以在 weex 上让手势等复杂交互操作以60fps的帧率流畅执行，而不会导致卡顿，因而带来了更优秀的用户体验 🎉 🎉 🎉。

简要介绍

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

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

示例展示

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

简单示例

  1. pan gesture: rax vue rn
  2. timing: rax vue rn
  3. scroll: rax vue rn
  4. orientation: rax vue rn

实际项目示例

  1. Draggable ball: rax vue
  2. Swipeable card: rax vue
  3. Expandable menu: rax vue
  4. Slide layout: rax vue
  5. Circle menu: rax vue
  6. Navigation with Tab: rax vue
  7. Ripple effect: rax vue

注意：Weex支持两种前端写法（rax和vue），链接是直接跳转到Playground。 React-Native由于目前Playground还不支持，所以直接跳转到源码。

特性

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

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()
  1. 使用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:

  1. CocoaPods

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

pod 'BindingX', '~> 1.0.3'

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

React Native接入

前置条件: 确保你已经集成了react native。

  1. 安装依赖 npm install react-native-bindingx --save
  2. 链接: react-native link react-native-bindingx

Android

在你项目的build.gradle中增加bindingx-core依赖:

implementation 'com.alibaba.android:bindingx-core:{latest_version}'
  1. bindingx默认使用gradle 3.x编译，如果你的项目还是运行在gradle 2.x上，需要升级到3.x；
  2. gradle 3.x使用implementation关键字替代了compile关键字，需要修改；
  3. 增加google源:
repositories {
  google()
  ...
}

文档与教程

https://alibaba.github.io/bindingx/guide/introduce

谁在使用

淘宝
天猫
优酷
飞猪

支持

  • 如果您有任何想法或者建议，欢迎提交PR。
  • 使用过程中，如果碰到了无法解决的问题，可以新建一个issue。
  • 欢迎加入钉钉聊天群

Snip20180115_20.png | left | 229x229

协议

Copyright 2018 Alibaba Group

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.