> 在自己的业务环境中使用,并开放给第三方isv,企业开发者使用,这是一篇有内涵有故事的文章。
如果你对weex微应用感兴趣,也在开发着微信小程序,不妨来看看为了让你减少顾虑而准备技术对比表格,是的,开发钉钉的weex微应用是如此的简单。
访问这个链接阅读: [钉钉Weex微应用与微信小程序技术对比表格] http://www.jianshu.com/p/d5d7680335de
技术概述
`weex`是阿里开源的一套构建高性能移动界面的原生跨平台技术框架,它的上层由`Vue`,`Rax(非常类似React的开发框架)`实现数据驱动,底层由iOS,Android实现render engine来驱动界面的最终落地。类比`React Native`它的优势在于难得的`一次编写,多端运行`,是的,它也很好的支持着移动Web端。
构建-build
`Native`使用`weex-loader`,`Web`则需要使用`vue-loader`,在`Web`端上`vue-loader`目前仅支持`^11.3.3`版本,以及`weex-vue-render`需要`>= 0.11.50`,并且`vue-loader`的配置做如下修改:
```
module: {
loaders: [
{
test: /\.vue(\?[^?]+)?$/,
loaders: ['vue-loader']
}
]
},
vue: {
/**
* important! should use postTransformNode to add $processStyle for
* inline style normalization.
*/
compilerModules: [
{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}
]
}
```
```
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerModules: [
{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}
]
}
}
]
}
```
最佳的实践是推荐你使用目前为止我们内部评价最高的一份脚手架工程(支持三端一致,意味着处理了降级。):[dingtalk-templates/webpack](https://github.com/dingtalk-templates/webpack),你可以直接下载它,自行修改`package.json`文件中的`{{}}` 配置,或者安装 [open-dingtalk/weex-dingtalk-cli](https://github.com/open-dingtalk/weex-dingtalk-cli) 这个命令行工具来玩转脚手架,这个命令行工具就像你使用`vue-cli`一样的简单:
```
$ npm install -g weex-dingtalk-cli
```
样式-style
weex支持的样式属于css子集
如果你想使用`预处理器`(只是不推荐),可以如下配置:
```
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader'
}
}
}
```
```
<style lang="sass">
@import './common.scss'
// ...
</style>
```
如果你想使用更精准的适配(无法忍受浮点级别的误差),可以获取`scale`,`deviceWidth`自行进行适配,推荐在`loader`阶段去处理(自行开发转换工具)。
JavaScript与内存管理-JavaScript and memory manage
由于JS运行在JavaScriptCore/V8中,此与Web有较大差异。
如下:
weex native 与 weex web 之间的差异较大,那么怎么办?
我们提供了一套抹平一些常见差异的库,你也可以在`weex`环境中使用,[https://github.com/open-dingtalk/weex-dingtalk-journey](https://github.com/open-dingtalk/weex-dingtalk-journey)。
在说内存(memory)之前,大家先来看一副图,weex的内存分布:
正常情况下,Native memory 业务开发人员是无法处理的,而运行在js core 中的内存,我们知道如果不断开引用,js是无法回收释放内存的。
转场方式-navigator
由于`weex`的特殊性,它的转场方式有几种构成。
如果你使用`vue-router`,那么配置好你的路由path,使用`push`,`go`方法即可,唯一可惜的是使用`vue-router`的方式较为生硬。
页面级别的数据传输-Page level data transfer
页面级别的数据传输基本很少会发生,钉钉的开发者推荐统一使用domainStorage方案。
调试工具-Debug Kit used
weex的调试工具需要额外安装`weex-toolkit`,`weex-devtool`,以及在你的Native工程中集成对应的`WXDevtool(iOS)`。
如果你运行`weex debug`遇到如下的错误:
```
Error: EACCES: permission denied, open '/Users/xxx/.xtoolkit/node_modules/weex-devtool/frontend/weex/weex-bundle.js'
at Error (native)
```
(非Windows用户)使用`sudo`即可。
首先,你需要安装`Weex Playground`,可自行在各大市场中下载安装。
不需要指明文件路径,在终端输入:
```
$ weex debug
```
先使用 `Weex Playground` 扫码(启动成功后会弹出一个界面),然后将你的业务代码贴到 [这里](http://dotwe.org/vue),注意:
最后用安装了`Weex Playground`的设备扫码(业务代码贴过去那里的右侧会出现的二维码)。
```
[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.108:8088/debugProxy/native"];
```
ws:// xxx.xx..x 这个地址是在用weex debug 在终端里给你输出出来的,如果setDebug为YES会开启debugger模式,反之亦然。
注意`setDebug`设置为`YES`。
原生开发-Native
请直接阅读 [技术 | Weex入坑之旅](https://zhuanlan.zhihu.com/p/25182677) ,这是用iOS视角写的一篇文章,大概在半年之前。
写在最后
希望大家可以用一个开放的心态来看待`weex`,它的设计,实现有很多是值得学习的地方,比如多`framework`支持,`共享runtime`,`module`,`component`,`handler`等等,非常的自由领域,相当于它设计好了一个`render engine`,理论上你可以学习它的几个关键接口,知道Native DOM指令后,也能开发出替代Vue的上层框架,不信?你看看Rax即明白了。
`weex`也有一些不足的地方,开发者数量少,社区活跃度不高,很多问题并不一定能被google搜录到。文档确实有一点不完善,native的实现也有一定的bug数量,你看`react`这么多年了,依然有bug,只要在逐步改进迭代修复,我觉得它就是非常棒的,万事没有十全十美,美中不足的一点瑕疵,说不定才是完美呢。