【Weex一瞥笔记】

对ionic比较熟悉了，开始围观下其它框架，以比较下各自的优缺点，这次先来的是Weex。

环境搭建

参考官网使用即可：

• 安装node，使用 Homebrew 进行安装

brew install node

• 安装[Weex CLI（weex-toolkit）] (https://github.com/weexteam/weex-toolkit)

sudo npm install -g weex-toolkit

如果提示.xtoolkit的权限问题，则执行下述命令后再次安装：

mkdir ~/.xtoolkit&&chmod 777 ~/.xtoolkit

安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：

weex命令行

环境就这样搭建起来了，看上去还是挺简单的。其中init和create命令需要注意一下，常规混合式应用使用create创建weexpack项目。当然weexpack项目也可以如下直接装weexpack的CLI，通过该CLI构建及维护项目，只是weex-toolkit已经集成weexpack了，所以也不是必要。

sudo npm install -g weexpack

创建HelloWorld项目

weex create helloWorld && cd helloWorld

npm install

1. 网页测试

运行命令即可：

weex run web

或者npm命令运行：

npm run serve

2. 添加android平台

weex platform add android

一直等待下载安装完成，就会发现platform目录下多了个android的项目目录，然后执行：

weex run android

然后可能会报如下错误：

最终显示为： “BUILD SUCCESSFUL Total time: 10.355 secs => Install app ... adb: failed to stat app/build/outputs/apk/playground.apk: No such file or direct ory”

我们打开platform/android下的app/build/outputs/apk/，发现文件名为weex-app.apk，而不是playground.apk，所以找不到。怎么回事？

我们尝试vscode打开~/.xtoolkit目录，以关键字playground.apk搜索其下的node_modules文件夹，搜索结果如图：

image.png

What？观察发现，都是在weexpack里面的，而且居然写死了名字！也就是说修改配置文件，这里都不会动态变化，同时用Android Studio打开，包名也是固定死是：com.weex.app。

我猜这是weexpack的bug吧？应该不会一直存在。根据这个猜测，就临时性的把playground.apk全部替换为weex-app.apk。

然后再次执行：

weex run android

会提示没有发现android设备:

Error: No android devices found.

插入android手机或者启动AVD，并再次执行命令，此时应用顺利运行：

image.png

当然也可以用Android Studio来打开运行也是可以的。

简单比较

1. 目录结构

首先比较下weex和ionic的目录，两者还是有点像的，只是weex把ionic隐藏在node_modules里面的wabpack配置开放出来了，这样配置起来就灵活了一些。

2. UI

weex好像自身不带UI框架，但是可以很简单地集成weex-ui，而ionic自带UI，两者打个平手吧。此外weex基于vue2+，ionic基于angular2+，都是比较热门的框架，所以组件这方面两者都不用愁。

3. 页面展示

weex有单页和多页面方式，直观就是一个webview显示所有页面，另一个是多个webview各显示一个页面，而ionic只有单webview显示，所以从某种情况来说，多webview时，weex页面切换应该比ionic流畅。

4. 原生支持

可能刚接触不深，weex不建议但可以支持cordova，而且可以较方便集成原生第三方插件。反之，ionic只能支持cordova。只不过若都以cordova方式来开发的话，weex自身html方面的优化应该没有ionic那么好。

因为如其名，匆忙一瞥，对weex了解不深，可能有写错的，欢迎指正。时间不早了，暂时写到这里，到时再补充吧。