热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Android篇_使用Cordova框架把Webapp封装成HybridApp实践——Android篇

篇首语:本文由编程笔记#小编为大家整理,主要介绍了使用Cordova框架把Webapp封装成HybridApp实践——Android篇相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了使用Cordova框架把Webapp封装成Hybrid App实践——Android篇相关的知识,希望对你有一定的参考价值。



公司没有ios和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成。记录一下从中遇到的问题和需要用到的开发环境的配置

将Webapp封装成Hybrid App有如下步骤

        1.下载安装1.8的JDK,并且配置环境变量        (注意:最新版本的cordova,必须要下载1.8的JDK不然会报错)

        2.下载安装Ant构建工具并且配置环境变量      (注意:Ant目录不能是中文,不然编译不成功)

        3.下载安装android并且配置开发环境

        4.下载安装Node.js

        5.使用npm安装cordova全局环境

        6.使用cordova创建cordova项目

        7.将cordova编译为android项目

        8.安装.apk文件

        9.Eclipse安装ant插件

        10.导入创建好的android项目

        11.下载安装连接第三方模拟器 (注意:这里舍弃了自带的android模拟器使用第三方的,因为android自带的模拟器半天才打开,又不支持window系统下载x86)

         以下是百度云的链接,打包所需要的所有工具、插件、安装包都在里面

        链接:http://pan.baidu.com/s/1mhQYD0s 密码:7x16


1.JDK的配置环境如下:

      在环境变量新建系统变量 变量名:JAVA_HOME  变量值为:安装路径的根目录即可(C:\\Program Files\\Java\\jdk1.8.0_111)

      

 


2.安装Ant构建工具如下:

    1.  新建系统变量   变量名:ANT_HOME  变量值为:安装路径的根目录即可(D:\\phonegap\\apache-ant-1.9.8) 把bin目录的路径添加到path里面

        

          添加到path的截图如下:

        

 

         完成以上两点之后打开cmd输入  java -version 和 ant -version 出现以下如则安装成功,否则请检查配置的环境变量路径

         

     


3.安装android开发环境配置如下:

     解压后的目录是如下图:

    

 

    1.将SDK目录下的:platform-tools、tools添加到环境变量的path里面去

    2.安装完成后cmd运行adb 如图则安装成功,

      

 


4.下载安装Node.js

     下载下来的包含有Node.js安装包直接安装即可,无需配置环境


5.使用npm安装cordova全局环境

    1.运行cmd

    2..输入此命令:  npm install -g cordova   回车        这里需要等待一段时间        如以下图说明安装成功    因为我已经安装过了

        

        可运行cordova -v 查看是否安装成功,如图示 6.4.0版本的cordova 如图

        


6.使用cordova创建cordova项目

      1.切换到任意路径 输入命令:cordova create myapp    回车

      2.进入项目输入命令:  cd myapp   回车


7.将cordova编译为android项目              (注意:如何报android-24的错误,请在添加平台时修改两个文件


                                                                                      1. D:\\phonegap\\myapp\\platforms\\android目录下的project.properties文件将24改成25


                                                                                      2. D:\\phonegap\\myapp\\platforms\\android\\CordovaLib目录下的project.properties文件将24改成25即可)

    1.添加安卓平台输入命令:cordova platform add android    回车

     添加成功如下:

    

     检查环境是否配置好:输入命令: cordova requirements          回车        出现以下则OK

     


8.安装.apk文件

     如果以上都完成了就开始构建安卓.apk    

     输入命令: cordova build android   回车   如下图则构建成功

     

   此时此刻你的D:\\phonegap\\myapp\\platforms\\android\\build\\outputs\\apk  有一个apk的文件  到了这里ok说明你已经成功了  

            现在的目录结构为:

            

                            

                       现在将webapp移动端项目copy到www目录下,将原先的文件删掉,如图   主程序入口在config.xml配置(后缀不能是.jsp)


                         (注意:所以的请求必须是绝对路径)

                        

 

                       

                    


9.Eclipse安装ant插件

    打开Eclipse--->Help--->Install New Software---出现以下

    

 

       Ant插件安装成功后重启Eclipse ----->添加SDK所在的目录

      

 

   


    10.导入创建好的android项目

           File--->New--->project-->

           

           选择上面创建好的安卓项目   勾选两个就行了    CordovaLib、MainActivity

          


  11.下载安装连接第三方模拟器

          先下载安装第三方模拟器(注意:模拟器要打开才能连接成功)

          下载安装完成后运行cmd 连接第三方模拟器  输入命令   adb connect 127.0.0.1:26944  回车   ---》26944是第三方模拟器的端口号

           

    此时进入Eclipse---》Window---Show View-->Devices则出现以下图

    

 

     运行MainActivity---》Run As---》Android-Application  出现如下界面   选择第三方模拟器  OK

 

      

 

 模拟器出现如下图则运行成功OK

 

          

      

          将apk安装包发送到手机进行安装如下效果:

             

 

                   

    

         希望对大家有帮助   

                  有问题可以加QQ交流---969351680

        



推荐阅读
  • 本文详细介绍了如何在现有的Android Studio项目中集成JNI(Java Native Interface),包括下载必要的NDK和构建工具,配置CMakeLists.txt文件,以及编写和调用JNI函数的具体步骤。 ... [详细]
  • 了解如何快速搭建属于自己的个人博客,无需编程基础,适合Mac和Windows用户。通过本文,您将学会使用GitHub Pages和Hexo构建一个完全自主的在线空间。 ... [详细]
  • 本文记录了Android学习的初期阶段,包括Android的基本架构、Dalvik虚拟机与JVM的区别、ADB工具的使用以及应用程序的打包安装流程。 ... [详细]
  • 如何使用Ionic3框架创建首个混合开发应用
    混合开发是指结合原生(Native)与网页(Web)技术进行移动应用开发的方法。本文将详细介绍如何利用Ionic3这一流行的混合开发框架,从环境搭建到创建并运行首个应用的全过程。 ... [详细]
  • Android开发技巧:实现带描边的圆角图片
    本文介绍了一种在Android应用中实现带描边的圆角图片的方法。通过使用BitmapShader类,开发者可以轻松地为图片添加圆角和描边效果,提升应用的视觉体验。 ... [详细]
  • 本文探讨了Vue项目在Internet Explorer浏览器中遇到的问题及解决方案,包括axios请求失效和页面在低版本浏览器中显示为空白的问题。 ... [详细]
  • 本文介绍了ADB(Android Debug Bridge)的基本概念、安装方法、环境配置、连接真机步骤以及常用命令和高级技巧。ADB是一个强大的工具,适用于Android设备的开发和调试。 ... [详细]
  • 解决Android测试包与正式版APK冲突的方法
    本文介绍了一种有效的方法来避免Android测试包APK覆盖正式版APK的问题,主要通过调整build.gradle文件中的applicationId以及修改APK名称来实现。这种方法特别适用于需要频繁进行小范围功能更新的项目。 ... [详细]
  • 本文深入探讨了 Prototype.js 框架及其与 JavaScript 原生 toString() 方法之间的区别,适合对前端开发感兴趣的开发者阅读。文章将帮助读者理解两者在功能实现和应用场景上的不同,从而更好地利用这些工具进行高效编程。 ... [详细]
  • 本教程旨在指导开发者如何在Mac上设置React Native的开发环境,以进行iOS应用的开发。文中详细介绍了必要的软件安装步骤,包括Xcode、Homebrew、Node.js、Watchman以及React Native CLI等工具的安装方法。 ... [详细]
  • 本文详细介绍了如何在Linux系统中安装和配置Node.js,包括从官方下载、编译安装到运行基本示例的全过程。 ... [详细]
  • 利用NVM实现Node.js多版本管理
    本文详细介绍如何使用NVM(Node Version Manager)进行Node.js的多版本管理,包括安装配置、版本切换等操作。 ... [详细]
  • 本文详细介绍了C++标准模板库(STL)中各容器的功能特性,并深入探讨了不同容器操作函数的异常安全性。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • 每位开发者都应该拥有一个展示自我技能与分享知识的空间——个人技术博客。本文将指导你如何使用静态网站生成器Hexo结合GitHub Pages搭建这样一个平台。 ... [详细]
author-avatar
sky梦幻
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有