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特色所在,比较推荐,有兴趣可以去尝试实现。(完)