【Weex一瞥笔记】一、环境搭建及HelloWorld
对ionic比较熟悉了，开始围观下其它框架，以比较下各自的优缺点，这次先来的是Weex。
环境搭建
参考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配置开放出来了，这样配置起来就灵活了一些。
| weex | ionic |
|---|---|
weex
|
ionic
|
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了解不深，可能有写错的，欢迎指正。时间不早了，暂时写到这里，到时再补充吧。
