• Weex的原生开发


    weex概念与特性


    最形象的理解就是类似react native。
    Weex几大特点:
    1.帮助你构建原生应用
    与 Web App、HTML5 App 或 hybrid App 不同,您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用,上手非常简单。但实际上,应用的底层是 Objective-C 或 Java, 同时,Weex 提供很多 native 组件或模块供开发人员使用。
    2.一次编写,多端运行
    Weex 提供强大的跨平台能力,可以使用相同的 API 开发 Web,Android 和 iOS 应用。 同时,我们对接口了丰富的扩展能力。 这样,当您需要扩展原生组件或模块时,这将非常方便。
    3.支持 Vue 语法
    Weex 遵循 Web 标准,同时支持 vue.js 的语法。因此,您可以使用 vue.js 语法来开发应用程序

    weexpack


    weexpack 是新一代的weex应用工程和插件工程开发套件,是基于weex快速搭建应用原型的利器。它能够帮助开发者通过命令行创建weex应用工程和插件工程,快速打包 weex 应用并安装到手机运行,对于具有分享精神的开发者而言还能够创建weex插件模版并发布插件到weex应用市场。 使用weexpack 能够方便的在在weex工程和native工程中安装插件。
    具体介绍见:https://github.com/weexteam/weex-pack

    原生开发之路


    创建工程

    首先,全局安装weexpack

    $ npm install -g weexpack
    

    然后,创建工程

    weexpack create weexpack-demo
    

    安装依赖

    cd weexpack-demo && npm install
    

    生成的目录结构如下:
    图片名称

    添加平台应用模版

    *我这里添加的是Android

     $ weexpack platform add android
    

    添加成功后platforms目录下会多出一个android目录
    图片名称

    调试

    这里的调试我们可以通过https://weex.apache.org/cn/guide/tools/toolkit.html的方法来进行调试。
    这个调试分两种:
    在浏览器上进行网页调试
    通过Playground 在手机上扫描调试
    但是这两种感觉Biger不够,我想要开发原生应用的free-使用真机来调试。

    真机开发调试

    这里就需要用到Android Studio了,下载AS,安装JDK,配置环境变量这是前置步骤。
    这里就不再赘述这些流程了,我相信你可以(网上很多教程)。
    当前置的步骤全部完成时,我们就要开始进入大坑了。
    1.第一个坑
    weex推荐使用weex run android命令来运行起安卓应用,但是很快会报错No android devices found.
    图片名称 <img src="http://images2017.cnblogs.com/blog/743207/201708/743207-20170815174731131-1238833548.png" width = "300" height = 340" alt="图片名称"/>

    Chrome中开的服务是可以的
    图片名称

    你可能会疑问,我已经通过USB链接了手机为何还是不行?这个坑一般会耽误你一天左右时间。

    解决方案:使用Android Studio打开我们的weex应用。

    2.第二个坑
    使用AS打开应用的时候没有发现Android应用

    解决方案:应该打开weex下的platforms/android。具体可以看:https://segmentfault.com/q/1010000010652802

    选择安卓文件后,AS需要安装很多东西,稍等下,一般较长时间。报错信息只要按照AS的提示进行安装即可。
    等一切完毕后,运行安卓项目。

    手机上的效果

    图片名称 图片名称

    模拟器开发调试并自动热更新

    这篇文章Android Studio集成到Genymotion模拟器已经告诉了我们如何集成模拟器

    在我们的weex项目中运行下面这个命令,将会将native JSbundle替换成新的。

    $ weexpack run android
    
    ...
    :weexplugin:compileDebugShaders
    :weexplugin:generateDebugAssets
    :weexplugin:mergeDebugAssets
    :weexplugin:mergeDebugProguardFiles
    :weexplugin:packageDebugRenderscript UP-TO-DATE
    :weexplugin:processDebugJavaRes UP-TO-DATE
    :weexplugin:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
    :weexplugin:transformClassesAndResourcesWithSyncLibJarsForDebug UP-TO-DATE
    :weexplugin:mergeDebugJniLibFolders UP-TO-DATE
    :weexplugin:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
    :weexplugin:transformNativeLibsWithSyncJniLibsForDebug UP-TO-DATE
    :weexplugin:bundleDebug UP-TO-DATE
    :weexplugin:compileDebugSources UP-TO-DATE
    :weexplugin:assembleDebug UP-TO-DATE
    :weexplugin:compileReleaseSources
    :weexplugin:assembleRelease
    :weexplugin:assemble
    
    BUILD SUCCESSFUL
    
    Total time: 7.404 secs
     => Install app ...
     => Running app ...
    

    这时候在AS中会提示你有代码需要同步。

    点击同步后,模拟器自动更新。
    图片名称

  • 相关阅读:
    常见排序算法(上)
    二.CSS的伪类
    ASP.NET_编码模型
    一.CSS工作原理
    如何拦截来电,并检测到某些特定号码时自动挂断电话
    如何获取短信内容
    Android导入项目时出现红色感叹号
    如何接收广播;如何发送广播
    设置Activity显示和关闭时的动画效果
    将Activity设置成半透明的对话框
  • 原文地址:https://www.cnblogs.com/zqzjs/p/7365726.html
Copyright © 2020-2023  润新知