BindingX 1.0.3

BindingX 1.0.3

×

由 hjhcn 维护。

 
依赖项
WeexPluginLoader>= 0
WeexSDK>= 0
 

BindingX 1.0.3

  • 作者：
  • hjhcn

BindingX_250.png

BindingX

Join the chat at https://gitter.im/alibaba/bindingx

image | left image | left CircleCI

基于 weex、react native 和 html5 的新交互方式。

它为 React Native 和 weex 提供了一种名为 表达式绑定 的方法来处理 60 FPS 下的复杂用户交互🎉 🎉 🎉 .

描述

React Native 和 weex 中 JavaScript-原生桥的异步特性带来了固有的性能损失。这通常阻止 JavaScript 代码以高帧率运行。

我们探索并实施了一种全新的方法来解决这个问题。其主要思想是将用户交互转换为表达式，并将这些表达式传递到原生环境中。事件发生时（如用户手势事件），所有计算任务都在原生侧运行，不再有任何冗余的 js-bridge 调用。 阅读更多

概览

以下是一些使用 bindingx 的示例。您可以通过运行我们的 playground 应用程序获取更多示例。或者，您可以使用我们的 在线 playground 编写自己的示例，乐趣无限：）

示例演示

  1. 平移手势：rax vue rn
  2. 计时：rax vue rn
  3. 滚动：rax vue rn
  4. 方向：rax vue rn

真实示例

  1. 可拖拽的球：rax vue
  2. 可滑动卡片：rax vue
  3. 可展开菜单：rax vue
  4. 滑动布局：rax vue
  5. 圆形菜单：rax vue
  6. 标签式导航：rax vue
  7. 波纹效果：rax vue

注意：Weex 有两个 DSL（rax & vue）。链接将跳转到 JS-Playground。但现在我们的 JS-Playground 不支持 React-Native 代码，因此它将跳转到纯源代码。

您也可以通过提交 pull request 来向我们贡献示例。如果您的示例足够酷，我们会在这里展示它。

特性

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

安装

Weex

先决条件：将Weex SDK集成到您的应用程序中。

Android

我们提供两种方式来整合bindingx插件。

  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插件加载器

    • 在应用程序的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'

    • 使用插件加载器注册bindingx插件。

      WeexPluginContainer.loadAll(getApplicationContext());

iOS

在应用程序的Podfile中添加依赖。

  pod 'BindingX', '~> 1.0.2'

模块将自动注册。

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. 迁移到 Android Gradle 插件 3.0;
  2. 在 build.gradle 中使用 implementation 代替 compile;
  3. 将 Google 仓库添加到根 build.gradle 文件中
repositories {
  google()
  ...
}

正在使用的人

淘宝 天猫 优酷 飞猪
Taobao tmall youku fliggy

贡献

  • 任何 PR 都受欢迎
  • 钉钉聊天群组。

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

    https://apache.ac.cn/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.