阅读完,基本目标是让你也可以很轻松的用weex来开发跨平台的移动应用。
这是一篇曾经体验weex时写下的笔记,后来想想,我们在实践weex的过程中,应该有很多有趣的故事可讲,于是才有这么一个系列。
目前基于weex的版本v0.9.4,阅读本文,需要有一定的基础知识储备,默认环境配置你都比较了解。
开发环境整理
推荐大家还是使用WebStorm吧,“有钱没钱都要回家过年不”,利器在手天下任你走。
在Plugin里安装Weex Language Support,这个插件可以让你的.we文件有语法高亮,以及智能提示。
其次安装weex-toolkit和安装weex-devtools,前一个工具可以用来启动一个项目,比如在iTrem中输入weex init 可以生成一个简单的weex项目。后一个工具与调试有关,当你需要调试时,可以输入weex debug src/xxxx.we,来启动调试界面。
weex的前端部分的代码和vue的组件写发非常的类似,你可以在weex.bootstrap.we 文件中查看 <script> <style> (weex init 生成的项目),一个.we文件就是一个完整的组件。
如何调试
如果你对Native比较熟悉可以直接编一下weex开源的项目,如果实在搞不明白的话,你可以去各大应用市场里下载 weex playground 这个App,然后用weex debug src/weex-bootstrap.we 来开启调试界面。
- 如果你只想查看一下在Native端的渲染,用weex playground这个App扫描一下第二个二维码即可。
- 如果你需要调试,依然是用weex playground这个App先扫描第一个二维码,此时会出现第二个节目,然后再扫描下方,你自己页面的二维码来渲染。
调试分为两个部分Debugger和Inspector,如果你选择Debugger,那么你可以在source里看到你写的文件,来断点之类的。如果你选择后者,那么你可以在element面板里查看元素。
重要的事情说一遍:(要用weex playground扫二维码)。
如果你不想用官方的weex playground,比如想在自己的App里来调试,可以用WXDevtool来开启,我简单的说一下iOS端的步骤。
在你的Podfile文件里,加入 pod 'WXDevtool'依赖,然后在你的代码里写:
[WXDevTool setDebug:YES]; [WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.108:8088/debugProxy/native"];
ws:// xxx.xx..x 这个地址是在用weex debug 在终端里给你输出出来的,如果setDebug为YES会开启debugger模式,反之亦然。
进入开发阶段之前
文档:alibaba.github.io/weex/doc/
因为整个weex开发的工作量基本在前端,所以前端的同学们需要特别注意几项。
alibaba.github.io/weex/doc/re…
alibaba.github.io/weex/doc/re…
alibaba.github.io/weex/doc/re…
alibaba.github.io/weex/doc/re…
- Common Style 你需要了解weex 是如何去计算盒子模型的,支持哪些CSS属性,以及该如何正确的书写CSS,比如border必须使用border-top-color border-top-width border-top-style 这样的方式才能生效。
- Common Eevent 这一部分是你需要了解的weex是如何处理事件的。
- Gesture 是weex给你提供的一些手势处理
- Component-Defs 里提供了如生命周期的方法,如何处理events methods等。
剩下的,你可以边开发的时候边摸索,比如官方提供的组件,官方提供的module扩展。
Native的同学(只说iOS),需要了解三个地方,相比前端要幸运的很多 :
alibaba.github.io/weex/doc/ad…
- 如何定义一个Component
- 如何定义一个Modules
- 如何注册一个Handler
多思考一下这三种类型有什么区别,都用在什么场景下的
进入开发之后
虽然Native端比较简单,但是插件该如何组织维护,这也是一个考验,随便搞搞那是不行滴。插件的设计一定要解偶,不能和weex融合在一起。
前端部分布局是基于flex的,标签目前还是比较少的。目前,市面上还没有比较成熟的UI库,这一个部分是个蛋疼的点,你可能还需要开发一套UI库。weex只提供了视图的渲染能力以及部分功能性的module,这也意味着在扩展方面,业务方还是有很长的一段路要走的。
高兴的是weex也提供了一组简单的Component,有一些常见的组件。
其次前端的架构,可能还需要你自己细细的组织一下,虽然weex指导性的必须使用类Vue的方式来开发,但是如何组织你的数据流向,怎么分发,这一部分还需要你来设计,记住一点,存在浏览器方法的库都不能用,纯粹js能力的扩展,比如lodash工具函数,你还是可以放心使用部分的。在最后落地的阶段,业务的不同可能会采取不同的设计,这需要业务方来考虑。
weex 可以给你带来什么好处
正常情况下,我们不能为了技术而技术,最终还是要落地在业务上面。weex目前来说相比RN的方案,可以给你带来什么?
- 目前来说RN也在融合Android和iOS实现,提供统一的书写方案,weex这方面相比之下还是有优势的,RN稍微慢了一步
- 有大厂背书,这一点基本打了个平局
- weex 有 H5 的解决方案,解决了如:分享到外部的问题
- weex 目前有效的解决了list比较费内存的情况
- weex 的受众更偏向于前端,因为类Vue的型的书写方式,足够简单。RN的解决方案,提供了很多先进的思路,谁能胜出,各家有各家的说法
我个人总结了几个点,也许不是你业务的必须:
- 如果你的业务,考虑三端,不妨尝试一下
- 如果你团队的技术水平不够好,中文社区能帮你更快的解决问题
- 如果你团队有大量实践Vue,不妨也尝试一下
- 对渲染UI的流畅度有较高的期望又想能支持热更新,不妨尝试一下
关注与我共创
更多精彩内容可关注我的个人微信公众号:搜索fed-talk或者扫描下列二维码,也欢迎您将它分享给自己的朋友。