weex之初识

2016-12-17 本文已影响0人沧海小鱼儿

前面的话：

在前端越来越火的年代，逐渐衍生出类似React Native、Weex等开发套件。所达到的目的挺简单的，达到在多个平台下共用一份代码，节省开发成本，提高开发效率。其次，由于JavaScript语言的特殊性，能动态更新页面而不需要发版。达到热更新效果；基于这两点，越来越多的个人开发者&公司开始尝试它们。今天给大家简单观上说说Weex。

什么是weex：

weex是阿里2016年开源的一套跨移动端(Andriod/IOS/Wap)的开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。2016年12.15，Weex开源项目捐赠给Apache基金会开始孵化；

使用案例：

“Weex的双十一大考

进入8月底，阿里双十一的压力扑面而来。Weex代替H5成为双十一终端基础渲染解决方案，是Weex团队的唯一且最重要的任务。

非常幸运，加上我们也足够努力，很庆幸Weex扛住了双十一这次大考的磨砺，交出一份不错的答卷：Weex在双11会场中的覆盖率接近99%，页面数量接近2000，覆盖了包括主会场、分会场、分分会场、人群会场在内几乎所有的双11会场业务。双十一主会场秒开率97%，全部会场页面达到93%。

奇妙的事情也在这个期间发生，有时候当你努力到一定程度的时候，奇迹也会悄然降临。”
____________摘自《手淘天施：我眼中的Weex和Weex开源那些事》

weex代码结构：

我们暂时不去关心 Weex 的技术细节，仅大致的看下代码结构，Weex代码由三部分构成：

template (模板)，
style (样式)
script (脚本) 。

这三个概念之于Weex就如 html，css，javascript 之于Web。

    <template>
        <div>
            <text class="text">{{text}}</text>
            <text class="text">{{text}}</text>
            <text class="text">{{text}}</text>  
            <text class="text">{{text}}</text>
            <text class="text">{{text2}}</text>
        </div>
    </template>
        
    <style>
        .text {
            font-size: 50;
        }
    </style>
        
        
    <script>
        module.exports = {
            data: {
                text: 'Hello World.',
                text2: '我是demo.'
            }
        }
    </script>

cocoaPods 引入 Weex iOS SDK到工程

cocoaPods集成
假设你已经完成了安装iOS 开发环境和 CocoaPods

如果使用正式版本，直接引用cocoaPods的master repo 上就可以，这个需要在Podfile 最前面添加：
```
    target 'YourTarget' do
        platform :ios, '7.0' 
        pod 'WeexSDK'   
     end 
```

在命令行（terminal）中，切换到当前目录，运行 pod install,过一会，项目的 .workspace结尾的文件就被创建出来，到这步，依赖已经添加完了

创建项目：

默认你已经安装好了 node.js 和 npm,cocoapods，

weex需要再安装 Weexpack，可以直接使用 npm 安装：

npm install weexpack -g

或者用 cnpm：

cnpm install weexpack -g

然后，就可以使用 weexpack 创建 weex 工程了：

weexpack init appName

weexpack 会自动新建以 appName 命名的目录，并将项目模板拉取到该目录。
最终形成如下目录结构：

其中：

webpack.config.js 是 webpack 配置文件，用于生成 .we 文件的 JSBunlde

ios.config.json 是 iOS 项目配置文件

android.config.json 是 Android 项目配置文件

/src 目录放置 Weex 页面

/html5 是 H5 端入口文件

/ios 放置 iOS 项目

/android 放置 Android 项目

紧接着，进入目录，并且安装依赖：

$ cd appName && npm install

至此，项目模版创建完成，接下来我们可以自定义我们的 APP 信息并打包运行。

运行与打包

如果一切正常，你可以使用 weexpack 打包或模拟器运行了：

模拟器运行

$ weexpack run ios

构建 ipa 包：

$ weexpack build ios

上面的代码就是最简单的 Weex 程序。但是 .we 文件是不能直接运行的，这时候需要使用刚才安装好的 weex-toolkit。weex-toolkit 会编译 .we 文件，并且创建静态服务器。

这里，使用 weex hello.we 命令编译该程序。

$ weex index.we

这时，命令行会做几件事：

编译 .we 文件；
启动热加载服务；
启动静态服务器；
拉起浏览器，访问 http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr

weex index.we 增加 --qr 参数，表示生成二维码。

$ weex index.we --qr

然后，使用 Playground 扫码即可预览。

Weex 工作原理概述

Weex架构图

流程：

一句话总结：weex站在RN这个巨人的肩膀上

与RN的区别：

出发点：

相比较于React Native的“Learn once, write anywhere”，更加注重的是一种学习思维和方法，允许平台差异的特性存在；
Weex的口号是“Write once, run everywhere”更加侧重的是解决实际业务需求；

diff算法:

相比于一些 virtual-DOM 的 diff 计算机制，我们会直接对数据进行 diff，而且只会 diff 由于用户操作或数据操作发生改变的那部分数据和视图，这是一种更小范围的计算方式。尤其在追求轻量快速的移动端界面上，这种更新机制更加显得具有优势。

学习使用：

Weex相比React Native，坑还是比较多的。但是从“使用者”角度来说，Weex方便很多。但是对于存在很多复杂业务场景的开发者来说，必然会去学习其原理，而此时Weex相比RN就没那么友善。

JS开发框架：

weex基于vue.js(2W+ star)。小巧轻量的前端开发框架，组件化，数据绑定，2.0引入virtual dom。

ReactNative使用React(4W+ star)。革命性的前端开发框架，组件化，数据绑定，virtual dom。

参考：https://zhuanlan.zhihu.com/p/21677103

社区：

RN开源更早，社区活跃，weex,晚一些，不是很活跃。