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继续完善吧。