# 快速开始

本文将向您介绍如何使用 BindingX 。如果您还不了解 BindingX 的工作原理,强烈建议先阅读文档 《简介》 以及 《核心概念》

# 前置条件

  • 学习如何使用 weex 或者 ReactNative 搭建页面;
  • 在您的Android或者iOS工程中,添加 BindingX 组件依赖,并注册组件。

# 第一步:依赖

注意

  • 从HBuilderX 2.3.4起,uni-app 编译模式可直接引用 uni.requireNativePlugin('bindingx') 模块,weex 模式还需使用 npm 方式引用
  • BindingX demo示例可参考 BindingX 示例 里 vue 的相关示例,将实验田里的 vue 代码拷贝到 nvue 文件里即可。
  • 安装依赖
$ npm install weex-bindingx --save
  • 在JS代码中引入BindingX模块
import BindingX from weex-bindingx;

# 第二步: 编写表达式

  1. 根据业务场景,选择您需要的EventType。 比如,要监听手势,evenType值为pan,监听滚动容器scrollOffset变化,eventType值为scroll。
  2. 根据交互行为,选择要改变的属性,并编写相应的表达式。比如,交互行为是”用户横滑100单位,透明度从1变化到0″。则属性为”opacity”,表达式为”1-x/100″。

# 第三步: 绑定表达式

根据第二步得到的eventType、Expression以及Property,调用 BindingX 模块的 bind 方法,完成绑定。

var result = BindingX.bind({
 eventType: 'pan',       ==> 事件类型
 anchor: 'foo',          ==> anchor指的是事件的触发者,如果是eventType是"orientation""timing",则不用填
 props: [
	 {
		 element: view.ref,     ==> 要改变的视图的引用或者id
		 expression: "1-x/100", ==> 表达式
		 property: "opacity"    ==> 要改变的属性
	 }
 ] 
})

当调用bind方法之后,Native会启动监听,当目标事件(比如手指滑动、设备方向变化等)发生的时候,便会执行您先前绑定的一组或者多组表达式。 bind 方法会返回一个JS对象,其中包含了一个 token 属性,可以使用这个token取消绑定。

# 第四步: 取消绑定

在合适的时机调用 BindingX 的unbind方法取消绑定。比如,页面不可见或者即将销毁的时候。

BindingX.unbind({
    token: result.token,
    eventType: 'pan'
})

到这里,您已经学会基本的API使用了,更多内容可以参考其他教程。