weex框架使用总结

先转一张图：

 花了2周时间作了一个Demo，作个总结记录一些坑和注意事项。

网上的demo只有网易严选比较完整，可是clone下来以后web端可运行，在ios或android端没法跑通，因此项目是从新创建的。

➜  ~ weex -v

   v1.3.8

 - weexpack : v1.2.4

 - weex-debugger : v1.0.19

 - weex-builder : v0.4.0

 - weex-previewer : v1.5.1

 

一. 经过 weex create myapp 创建的项目是会有2种架构的，关键点就是其中的一步它会问你是否须要使用vue-router来管理项目。选者不一样最终会致使项目结构的差别。（备注：weex自己设计跟原生同样属于多页模式，不管选择哪一种方式最终都同样，主要区别在于入口，环境的配置上，脚手架会区别配置）

1. 使用vue-router的项目，其实就是配置了一个spa放在index.js入口页中，那么整个项目的开发跟普通的vue的spa应用区别不大。但整个spa的应用其实就是占用了weex的一个index页面，实际对应原生也就是一个activity页面。

说明：我是仿照严选demo，因此也使用vue-router生成的项目。而后在webpack.common.conf.js文件中，手动加入了一个webview.js的入口，这样整个项目最终其实只有两个页面，index和webview页，index页里作首页框架，而后点击全部功能都跳转到webview来加载网页实现。因此最终转换成原生也是两个activity页面。若是还想扩展多个页面，则应该修改webpack.common.conf.js里关于入口的控制，能够根基实际需求自动生成。也能够参考不使用vue-router创建的项目配置。

2. 不使用vue-router的项目，也是使用index.vue作入口页，但更靠近原生结构，index.vue只是入口，再创建其余的vue页面都会转换成原生的一个activity页面。与index页面实际上是平级的。页面之间的跳转是须要用weex提供的navigator方式来实现的。

说明：多页的规则是，入口index.vue，但项目会自动检索源文件，只要发现有vue文件就会生成一个页面。固然在webpack.common.conf.js中也能够自定义规则。我的感受若是是实际项目而且从头作的话，这种方式其实更接近原生，由于最终对应的是实际的不少个activity页面，更接近原生体验。

** 最重要的跳转路径，官网上页有介绍，要使用weex.config.bundleUrl先获取当前文件所在路径做为基准，而后算出最终想要跳转的路径，严选demo里方法可用

二. 阿里飞猪开源了一套weex-ui库，实际没有使用，不知效果。

三. 由于要转原生，最终不在浏览器环境下运行因此BOM,DOM都不可用。

四. 还有不少注意事项，文档里有提，但太少了，少到感受文档只说了坑的冰山一角的感受，网上有一些踩坑总结能够看看。

 

总结：目前确实不适合作公司项目。对原生知识依赖很高，感受若是三端都作的话，一个项目里3端的人都须要才能很好的使用weex。插件也不完善，不像cordova那么成熟，一个前端开发人员就搞定全部了。weex最终会将一个vue文件生成somename.web.js(用于web端)和somename.js(用于app端)2个文件,somename.js是weexSDK能识别的js文件，并能够转换为native效果。因此即便不是一个weex项目，好比原生的普通项目，那么只要引入weexSDK的话，就能够解析此js文件。weex官方目前推荐的也是这种作法，由于独立的weex项目确实存在问题。阿里本身的app也是这样实现方式。

 

追评：昨天升级了macOS10.13.6，xcode9.4.1， 发现项目运行ios时报错了，网上也查不到解决方案，等待weex继续完善吧。