weex初体验（完整）

Posted 2021-04-29 子曰五溪

阅读完，基本目标是让你也可以很轻松的用weex来开发跨平台的移动应用。

整理开发环境

大家还是使用WebStorm吧，在Plugin里安装Weex Language Support，这个插件可以让你的.we文件有语法高亮，以及智能提示。其次安装weex-toolkit和安装weex-devtools，前一个工具可以用来启动一个项目，比如在iTrem中输入weex init 可以生成一个简单的weex项目。后一个工具与调试有关，当你需要调试时，可以输入weex debug src/xxxx.we，来启动调试界面。

weex的前端部分的代码和vue的组件写发非常的类似，你可以在weex.bootstrap.we 文件中查看 <template> <script> <style> （weex init 生成的项目），一个.we文件就是一个完整的组件。

如何调试

如果你对Native比较熟悉可以直接编一下weex开源的项目，如果实在搞不明白的话，你可以去各大应用市场里下载 weex playground 这个App，然后用weex debug src/weex-bootstrap.we 来开启调试界面。

1. 如果你只想查看一下在Native端的渲染，用weex playground这个App扫描一下第二个二维码即可。

2. 如果你需要调试，依然是用weex playground这个App先扫描第一个二维码，此时会出现第二个节目，然后再扫描下方，你自己页面的二维码来渲染。

3. 调试分为两个部分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"];

进入开发阶段之前

文档：http://alibaba.github.io/weex/doc/

因为整个weex开发的工作量基本在前端，所以前端的同学们需要特别注意几项。

http://alibaba.github.io/weex/doc/references/common-style.html

http://alibaba.github.io/weex/doc/references/common-event.html

http://alibaba.github.io/weex/doc/references/gesture.html

http://alibaba.github.io/weex/doc/references/component-defs.html

1. Common Style 你需要了解weex 是如何去计算盒子模型的，支持哪些CSS属性，以及该如何正确的书写CSS，比如border必须使用border-top-color border-top-width border-top-style 这样的方式才能生效。

2. Common Eevent 这一部分是你需要了解的weex是如何处理事件的。

3. Gesture 是weex给你提供的一些手势处理

4. Component-Defs 里提供了如生命周期的方法，如何处理events methods等。

剩下的，你可以边开发的时候边摸索，比如官方提供的组件，官方提供的module扩展。

Native的同学（只说iOS），只需要了解三个地方，相比前端要幸运的很多 ：

http://alibaba.github.io/weex/doc/advanced/extend-to-ios.html

1. 如何定义一个Component

2. 如何定义一个Modules

3. 如何注册一个Handler

4. 这三种类型有什么区别，都用在什么场景下的

进入开发之后

虽然Native端比较简单，但是插件该如何组织维护，这也是一个考验，随便搞搞那是不行滴。插件的设计一定要解偶，不能和weex融合在一起。

前端部分布局是基于flex的，标签目前还是比较少的。目前，市面上还没有比较成熟的UI库，这一个部分是个蛋疼的点，你可能还需要开发一套UI库。Weex只提供了视图的渲染能力以及部分功能性的module，这也意味着在扩展方面，业务方还是有很长的一段路要走的。

其次前端的架构，可能还需要你自己细细的组织一下，虽然Weex指导性的必须使用类Vue的方式来开发，但是如何组织你的数据流向，怎么分发，这一部分还需要你来设计，记住一点，存在浏览器方法的库都不能用，纯粹js能力的扩展，比如lodash工具函数，你还是可以放心使用部分的。在最后落地的阶段，业务的不同可能会采取不同的设计，这需要业务方来考虑。