DNVUE

# 快速开始

本文将向您介绍如何使用 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使用了，更多内容可以参考其他教程。

← 示例 - 手势 →