zoukankan      html  css  js  c++  java
  • 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项目就好)

  • 相关阅读:
    第一篇正式文章 随便聊聊吧
    CSS 28 块之间的空格
    CSS 27 贴在下方
    CSS 26 左右固定
    CSS 25 垂直居中
    CSS 24 左侧固定
    CSS 23 水平居中
    CSS 22 显示方式
    CSS 21 浮动
    CSS 20 相对定位
  • 原文地址:https://www.cnblogs.com/legu/p/5784713.html
Copyright © 2011-2022 走看看