Weex 开发入门

去年也听说过 React Native 技术，现在好像很多大公司都在这套技术中踩坑，在开发自己的UI。工作中涉及不到，一直没有学习相关的知识。

并且听说阿里的 vue native，一直很期待。前段时间需要邀请资格，现在终于可以开始了。现在前端技术框架也越来越多，技术推陈出新，在项目中只有合适的，没有最先进的。

官网 http://alibaba.github.io/weex/            中文社区 http://weex.help/

1.根据 http://alibaba.github.io/weex/doc/tutorial.html 可以开始我们的开发之旅了

a.全局安装weex-toolkit工具 npm install -g weex-toolkit

b.编写文件，通过命令 weex tech_list.we，浏览器本地查看

c.手机下载对应的app http://alibaba.github.io/weex/download.html

app里面的展示的都是相关的example， 源码在这 https://github.com/alibaba/weex/tree/dev/examples

d.weex tech_list.we --qr -h {ip or hostname},app右上角扫描生成的2维码，就可以看效果了

注意相关的网络环境，手机需要连接wifi,能访问电脑服务

2.安卓集成，表示公司电脑太low了，搞了一天竟然AndroidStudio自带的模拟器没起起来。。郁闷。。

这边主要介绍 https://github.com/alibaba/weex/tree/dev/android/playground 怎么跑起来，原生的开发集成，没怎么搞，主要原来也不是搞这个的，有的配置文件还不一定找的到

a.环境配置搞起来 http://vczero.github.io/weex/android/001_EnvironmentConfig.html

其中AndroidStudio推荐装1.2 GB，里面很多都集成的，JDK应该不用自己装，配置环境变量了

b.自带模拟器没跑起来，所以我下了个上面连接的天天模拟器，的确比自带的好些，如果你是连接自己的手机进行开发的话，可以略过。（公司电脑usb禁了，无奈）

c.下载github项目代码 https://github.com/alibaba/weex

d.weex目录执行 npm install,这个是后面可能修改相关的example,进行build

e.AndroidStudio open project  https://github.com/alibaba/weex/tree/dev/android/playground

f.创建模拟器设备，主要讲下天天模拟器,模拟器先启动，之后找到AndroidStudio 的sdk目录

..\Android\sdk\platform-tools cmd运行 adb connect 127.0.0.1:6555

点运行，选择模拟器，之后就是看，提示装什么就装什么。。。（表示我也不懂，我只能说最后我成功了）

要相信，耐心的等待，就会启动的  在目录中，playground\app\src\main\assets\index.js 修改下目录配置，重新运行下项目，就能看见修改效果了

，

g.通过远程方式，修改pc端文件，进行开发

回到项目目录下，cmd运行

npm run serve   
     npm run dev:examples

在AndroidStudio中，修改IndexActivity把pc ip填进去，注意要考虑网络环境

如果是真机局域网开发，请确保手机通过wifi连接局域网，

如果是模拟器开发，设置10.0.2.2

   

3.剩下的就是看着文档，参考example搞起来了，有些属性和方法和浏览器环境肯定不一样的，这就慢慢学习了。

毕竟刚开始，有些还不支持，比如select之类的控件，可能还需要自己模拟（希望阿里继续维护下去，不要是个纯kpi项目就好）