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: 包名

d)cd 进入根目录，添加android开发平台：cordova platform add android

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

2.编译cordova项目：

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

   两种解决方法：
   方法一：
    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文件

        该应用包就可以安装到手机上正常运行。

        方法二：
           1.指定安装Cordova版本（stackoverflow上有解决方法，亲测有效）

注:第一次build会去自动下载相应版本的gradle，不但速度慢，而且可能在等了十几分钟后还会报网络连接错误，所以此步可以终止自动下载，果断去手动下载gradle。

手动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作为切换页面时使用

b)在MainActivity中引入布局并重写两个方法
i.引入布局

ii.重写方法

c)在底部Button上绑定监听，即可实现页面切换。

5.h5页面跳转到原生页面
    有两种方式：
           方式一：通过cordova 插件的方法实现intent跳转，也是比较推荐的方式；
           方式二：javascript调用java，常规方式。
           接下来我们通过第二种方式来实现该功能：
                 1.在MainActivity页面添加js调用的接口和方法

2. 在index.html页面添加button及js代码，用作触发跳转Native

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

查看图片附件

更多相关文章

随机推荐