去年也听说过 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目录
..Androidsdkplatform-tools cmd运行 adb connect 127.0.0.1:6555
点运行,选择模拟器,之后就是看,提示装什么就装什么。。。(表示我也不懂,我只能说最后我成功了)
要相信,耐心的等待,就会启动的 在目录中,playgroundappsrcmainassetsindex.js 修改下目录配置,重新运行下项目,就能看见修改效果了
,
g.通过远程方式,修改pc端文件,进行开发
回到项目目录下,cmd运行
npm run serve
npm run dev:examples
在AndroidStudio中,修改IndexActivity把pc ip填进去,注意要考虑网络环境
如果是真机局域网开发,请确保手机通过wifi连接局域网,
如果是模拟器开发,设置10.0.2.2
3.剩下的就是看着文档,参考example搞起来了,有些属性和方法和浏览器环境肯定不一样的,这就慢慢学习了。
毕竟刚开始,有些还不支持,比如select之类的控件,可能还需要自己模拟(希望阿里继续维护下去,不要是个纯kpi项目就好)