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目录

     ..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项目就好)

原文地址:https://www.cnblogs.com/legu/p/5784713.html