文章出处：

前言

上篇文章 中我们已经从头运行了 eros 来进行开发 app，很多同学还不是很清楚 eros 到底能干嘛，这里在稍微解释一下：

eros 是基于 weex 的二次封装 app 开发解决方案，让我们能用 vue 语法来开发原生 iOS/Android 应用 。

eros 已经帮助了数家公司的前端开发者开发了自己的原生 iOS/Android 应用，并通过 weex 使其 app 具有 热发布 的能力，在 4 月份，eros 会发布插件系统，模拟器/真机热刷新，全新官方 demo ，更全面的热更新逻辑等，正式稳定下来。

这篇文章中我们主要来介绍：

• eros 中如何使用 weex-bindingx
• 其他 weex 纯 native 项目中自行封装 weex-bindingx 来优化 JS Bundle 大小

bindingx 由来

引用官方文档上的介绍：

• 由于 weex 底层使用的 JS-Native Bridge 具有天然的异步特性，这使得 JS 和 Native 之间的通信会有固定的性能损耗，因此在一些复杂的交互场景中，JS 代码很难以高帧率运行。举个例子，如果我们要实现 视图随手势移动 的效果，那么按照传统的方式，需要在这个视图上绑定 touch 或者 pan 事件，当手势发生时， Native 会将手势事件通过 Bridge 传递给 JS , 这产生了一次 Native 到 JS 的通信。而 JS 在接收到事件后，需要根据手指移动的偏移量驱动界面变化，这又会产生一次 JS 到 Native 的通信。与此同时，手势回调事件触发的频率是非常高的，频繁的通信带来的时间成本很可能导致界面无法在16ms中完成绘制，进而产生卡顿。

• 事实上，不仅仅是在 weex 上存在这种问题, React Native 等框架同样存在类似的问题。拿 React Native Animated 组件为例，为了实现流畅的动画效果，这个组件采用了声明式的API，在 JS 端仅仅定义了输入与输出以及具体的 transform 行为，而真正的动画是通过 Native Driver 在 Native 层执行，这样就避免了频繁的通信。然而，这个方案只能解决一部分问题，如果是有复杂交互操作的场景就不够用了。另外，声明式的方式能够定义的行为非常有限，无法满足更复杂的交互场景。

使用之前

请熟读官方文档：

weex native 项目的使用过程中需要注意：

1.传入的元素需要多取一层 ref 属性，假设我们给一个元素上面 ref 属性赋值为 box ，则使用时候按照以下方式才可：

this.$refs.box.ref复制代码

2.如果引用方式为 requireModule('bindingx') 这种 weex 引入 module 的写法，bind 方法按照文档中的方式是无效的，需要做特殊处理，后面会说到。

3.ios 端引入的时候需要做下页面手势返回处理 (eros 中拓展了$router gesBack 属性)，防止右滑时候出现手势冲突。

eros 中使用

如果下载官方的 npm 包 weex-bindingx 直接使用时没有问题的，但 eros 是主要 focus native，引入 weex-bindingx 在打出来一个简单的 JS Bundle 就要 190+ kb，很明显有些过于臃肿，在交互复杂的页面，打出来的 JS Bundle 的大小就更加不可控。

进入 weex-bindingx 源码发现，如果 native 直接使用 requireModule('bindingx') 引入，是需要改变 expression 为对象，把填写的表达式值传入对象的 origin 属性，然后传入一个的 transformed 属性，这个属性是很长的 CallNative 指令字符串，可以通过下载 npm 包 bindindx-parser 来自动生成。

于是 eros 做了很简单的二次封装，集成进 widget 中，直接通过 this 调用即可。

下面我们来实现一个官方的 demo：

首先编写模板和样式：

    复制代码

编写 js 逻辑：

复制代码

可以看到，只需要调用 $bindingx 即可。

weex native 中使用

在非 eros 的 weex native 项目中，我们可以重写 bind 方法来保持与官方使用一致，下载 npm 包， lodash和 bindingx-parser 来进行改造：

// bindingx.jsimport { parse } from 'bindingx-parser'import _cloneDeep from 'lodash/cloneDeep'const WeexBinding = weex.requireModule('bindingx')const BindingxFunction = WeexBinding.bindlet _WeexBinding = _cloneDeep(WeexBinding)// 重写 bind 方法_WeexBinding.bind = (options, callback) => {    if (!options) {        throw new Error('should pass options for binding')    }    options.exitExpression = formatExpression(options.exitExpression)    if (options.props) {        options.props.forEach((prop) => {            prop.expression = formatExpression(prop.expression)        })    }    return BindingxFunction(options, options && options.eventType === 'timing' ? fixCallback(callback) : callback)}module.export =  _WeexBinding复制代码

在业务中使用：

var bindingx = require('bindingx')复制代码

这样在打包之后非压缩状态下体积能减少到 34kb 左右。而 eros js bundle 的大小会更小，已经把这部分重写逻辑放入了 widget，通过 appboard.js 来内置到客户端执行。

现在，尽情使用 bindingx 吧！

相关文章