《weex 实践指北》,第一章:快速评估 weex

1,315 阅读5分钟

阅读完,基本目标是让你也可以很轻松的用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或者扫描下列二维码,也欢迎您将它分享给自己的朋友。