走进weex

阿里从16年开始宣布开源weex，引起了一时不小的轰动，于是网上出现了大批的weex试用的demo，技术博客，从架构上分析这套框架等等，其实那些大部分是没有深入这个框架的，阅读了一下官方文档，写一些博客博眼球刷点击的东西（而且很多因为作者本身关系，视角出发点有偏差，或者只写了h5部分的，或者只写了android部分的，或者只写了ios部分的），试用这个框架有一段时间了，这里先对这个框架做一些使用上的分析，以及大多数误区的扫盲

weex 扫盲

在这之前也有不少之前做android或者ios的同事或者朋友使用或者学习过weex，仅仅能做出一个demo，或者demo都困难，这是远远的低估了weex的复杂程度

第一：weex作为一套h5 的 native框架，它做了哪些事情

weex 的 native sdk （java同事可以理解为jar包，ios同事可以理解为 lib，前端同事可以理解为类似js库）做的事情是，将一个webpack打包后的js进行解析，重构后显示。举个例子 js中有一个 <text></text> 标签，那么sdk拿到这个标签之后，将这个标签处理成android 中的TextView ,ios 将标签处理为UITextView 然后加载显示出来，这个和使用网页的区别就很大了，因为它最终把js转换成了原生的标签，也就是 weex 自称为 native框架 的原因

第二：weex 的 js 是怎么得来的

这部分是由webpack进行打包后得来的，但是不是所有webpack打包后得到的js都可以使用，weex能解析的js必须是遵循weex规范的，例如标签<span></span>这些h5的再手机上是完全无法解析的，weex提供的API可以参考weex官网手册 https://weex.apache.org/cn/references/

第三：weex 写的代码是native代码，那是不是可以很方便去调用原生方法

在这块，weex设计初衷是可以让用户可以很方便的去调用那些原生方法，但是weex本身却并没有提供原生的API，只是提供了一些调用原生方法的入口，具体实现却都没有写，例如要实现一个扫描二维码功能，这个原生需要完全自己封装成一个方法去提供给weex的js调用，调用方式就需要使用weex的 module ，这也就让很多h5的程序猿去写weex的时候大呼麻烦的原因

综上所述：需要把weex拿来使用，用到项目中去也并非一件特别容易的事情，它不需要你有非常深入的知识，但是却需要你有相当全面的知识，下面就来罗列一下使用weex框架需要准备的知识点：

1：基础css 和 js
2：vue语法需要比较熟练，weex目前都可以使用vue语法
3：vue 一般配合vue-router使用（weex也有自己提供导航栏，但是不是特别理想，还好它兼容vue的导航栏），但是需要注意weex仅仅支持 vue的编程式导航栏
4：vuex的使用
5：webpack node 打包编译js 工具需要有了解，否则项目编译都不会
6：java和android的基础知识（android原生部分扩展实现可以用到，除非你项目中不使用任何原生的功能，这块可以忽略，但至少也要懂得如何配置包名版本信息以及打包等等，因为脚手架生成的包名都是统一的，需要根据不同项目，将包名签名等等进行配置后才能打包发布）
7：oc和ios的基础知识（同6）

所以很多社区的weex使用者都说这个做好几乎是一个前端的全栈了，这也是weex框架研究的人很多，最终使用它做项目的人却很少的一个很大的原因之一

weex 观点1：

whriten once run everywhere

这个宣传点不能说错，但是很多人对这句话有误解，以为写一套基于vue 的 h5代码可以在手机上完美运行，这是不对的

a whriten once 是一种需要去做一种对于架构的二次开发，自己做好一次框架之后，后续可以很简单的使用

b weex上可以使用vue语法，却不是可以使用所有vue所支持的东西，所有第三方的ui库都是不可以使用的，因为目前weex仅仅支持flex布局，很多css属性也是无法解析运行的

c run erverywhere 可以做到 android 和 ios 的使用，以及手机浏览器，pc网页是不能使用的，因为pc宽高等等的适配不好做

weex 观点2：

我是前端工程师，是不是就可以直接用weex做app

weex所需的知识点那块已经做了说明了，如果不具备那些只是，很容易到后面就卡壳了

weex 观点3：

weex 是h5或者 weex是native

这两个说法都不全面，weex 写的时候大部分是用的h5 的语法，但是解析是解析成native的，weex相当于起到了一个浏览器的作用，但是比浏览器更native，性能更好，但是限制却更多说完上面这些之后，说说weex 做app的好处界面统一：一个app通常有android 和ios 版本的时候通常会遇到一个问题就是，这个ios能做为什么android不能做，这个android能做为什么ios不能做，用weex，界面使用同一套的情况下，更容易达到体验一致研发成本：使用weex，第一套app写出来会相对费事一些，但是写好之后，第二套第三套很多东西可以重用的时候，就会变得很简单了，开发成本也会大大的降低维护成本：维护 一些界面的修改，一些页面逻辑修改等等，这些完全只需要去修改 js，所以只需要修改一个地方，androidios 微信公众号等等就都改好了，只需要维护一处，当然native 需要新增功能另说（一般说来native需要新增功能模块的比界面改动等等的会少很多很多）

以上比较都是相对于和native 开发进行的比较，那么和webview套html5有什么好处呢

研发成本相对html5会略高（要求程序猿会的知识点也略多，也不能使用那些炫酷的第三方库），它的好处是可以提供相当于native的体验（一个网页，首次打开，需要去网络加载js，字体，图标等等），都相对耗时，weex都可以将这些和native一样打包到本地，这样流畅性会好很多，尤其在弱网环境下，体验就更好

后续会带大家逐步去使用weex开发一个完整的项目