Android混合开发之------ AndroidStudio集成Cordova项目

 目录

1.Cordova环境搭建

2.编译cordova项目

3.Cordova编译的项目引入到AndroidStudio中

4.页面嵌套

5.h5页面跳转到原生页面

 

android开发环境设置略过,直接进入正题。

1.Cordova环境搭建

 a)安装nodejs(下载地址:https://nodejs.org/),一路next即可。
 b)安装Cordova 命令:npm install -g cordova(默认安装的是最新版cordova)。这个过程取决于网速,可能会稍久一点。
 c)创建Cordova项目:cordova create Demo com.jewell.ery
   Demo:项目名称
   com.jewell.ery: 包名
   Android混合开发之------ AndroidStudio集成Cordova项目
 d)cd 进入根目录,添加android开发平台:cordova platform add android
   Android混合开发之------ AndroidStudio集成Cordova项目

 Ok 至此,我们的corodva 开发android项目环境搭建完毕,在开发平台下会系统会自动添加一个android文件夹,我们的项目文件就在此文件夹里。

 

2.编译cordova项目:

 a)cordova build
   (正常请忽略)错误信息:

   Android混合开发之------ AndroidStudio集成Cordova项目

   两种解决方法:
   方法一:
    1.备份tools下的文件。
    2.下载tools压缩包,解压到tools目录下。
   (下载链接: https://dl.google.com/android/repository/tools_r25.2.3-windows.zip)

    3.重新cordova build。

 

   等几分钟后,正常显示编译成功 BUILD SUCCESSFUL,此时我们在android/build/output下查看刚打包的apk文件
           Android混合开发之------ AndroidStudio集成Cordova项目

        该应用包就可以安装到手机上正常运行。
                              Android混合开发之------ AndroidStudio集成Cordova项目
        方法二:
           1.指定安装Cordova版本(stackoverflow上有解决方法,亲测有效)

 

:第一次build会去自动下载相应版本的gradle,不但速度慢,而且可能在等了十几分钟后还会报网络连接错误,所以此步可以终止自动下载,果断去手动下载gradle。
           Android混合开发之------ AndroidStudio集成Cordova项目

手动copy 链接地址,下载完成后,将压缩包copy到gradle对应版本文件夹里:(C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e345df8iofg8ghvk7),再执行cordova build。

 

3.Cordova编译的项目引入到AndroidStudio中

 

作为开发android App的利器,AndroidStudio 早已名闻天下,而Eclipse+ADT已是昨日黄花,话不多说,进入正题:

  a)打开Androidstudio: File----new----import project,选择刚才Cordova 打包时的build.gradle文件导入,等几分钟gradle构建完成后,连接手机,运行正常。

 

4.页面嵌套------将cordovawebview嵌入到layout布局文件中 

(官网资料:http://cordova.apache.org/docs/en/latest/guide/platforms/android/webview.html)

a)新建xml布局文件,将SystemWebView作为子View引入其中,并在页面底部添加3个button作为切换页面时使用
                              Android混合开发之------ AndroidStudio集成Cordova项目

b)在MainActivity中引入布局并重写两个方法
           i.引入布局
                              Android混合开发之------ AndroidStudio集成Cordova项目

   ii.重写方法
                              Android混合开发之------ AndroidStudio集成Cordova项目

c)在底部Button上绑定监听,即可实现页面切换。
                              Android混合开发之------ AndroidStudio集成Cordova项目


5.h5页面跳转到原生页面
    有两种方式:
           方式一:通过cordova 插件的方法实现intent跳转,也是比较推荐的方式;
           方式二:javascript调用java,常规方式。
           接下来我们通过第二种方式来实现该功能:
                 1.在MainActivity页面添加js调用的接口和方法
                         Android混合开发之------ AndroidStudio集成Cordova项目

          2. 在index.html页面添加button及js代码,用作触发跳转Native
                               Android混合开发之------ AndroidStudio集成Cordova项目

通过以上两步即可实现js调用MainActivity中标记的方法jump2NativeActivity(),从而达到跳转页面的目的,这是一种传统方法,还有一种是通过引入插件的方式实现该功能,也是Cordova特色所在,比较推荐,有兴趣可以去尝试实现。(完)

相关推荐