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特色所在,比较推荐,有兴趣可以去尝试实现。(完)
相关推荐
> 此实例代码为 Android Studio 原生项目集成 Cordova 插件演示,而非通过 Cordova 直接编译,方便您在现有 Android Studio 项目中集成 Cordova 进行 H5 混合开发。 为了结构清晰及易维护性,项目分三个 Module ,...
cordova-plugin-app-update App updater for Cordova/PhoneGap Demo Try it yourself: Just clone and install this demo. cordova-plugin-app-update-DEMO :tada: 如果喜欢它,请别忘了给我一颗鼓励的星 Support ...
Cordova Background Plugin Plugin for the Cordova framework to perform infinite background execution. Most mobile operating systems are multitasking capable, but most apps dont need to run while in ...
cordova plugin add https://github.com/nchutchind/cordova-plugin-streaming-media iOS specifics Uses the AVPlayerViewController Tested on iOS 12 or later Android specifics Uses VideoView and ...
Android-cordova-plugin-background-mode.zip,使应用程序在后台运行,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性优势。
cordova 微信分享插件,这是一个很不错的Demo,适合初学者!
cordova-android ≥ 9.0.0 cordova-ios ≥ 5.0.0 flutter ≥ 1.17.0 示例代码:https://github.com/waitaction/cordovaFlutterDemo 安装 安装cordova-plugin-flutter插件 cordova plugin add cordova-plugin-flutter...
安卓v4支持库cordova-plugin-android-support-v4-jar-master.zip
cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="" --variable IOS_KEY="" //此处的API_KEY_XX来自于第一步,直接替换,也可以最后跟 --save 参数,将插件信息保存到config....
cordova-android-3.6.4.tgz - TAR+GZIP 压缩文件, 解包大小为 3,618,518 字节
cordova plugin fingerprint-aio
1,cordova-android-3.3.0 源码 2,cordova-android-3.3.0 plugins源码 3,cordova-android-3.3.jar https://git-wip-us.apache.org/repos/asf?s=cordova config.xml请移步看文章:...
cordova-screenshot cordova截屏插件 document.addEventListener("deviceready", init, false); function init() { document.querySelector("#share").addEventListener("touchend", function() { navigator....
热更新时,我们执行命令 npm install -g cordova-hot-code-push-cli安装插件,但运行cordova-hcp server会报错,如:Could not create tunnel: { Error: ngrok is not yet ready to start tunnels...,这时我们找到...
Cordova插件-用于播放海康监控视频
高版本的cordova不再提供jar包,手动编译亲测可用,win10系统,Eclipse-23.0.2,android-22。详细请见 《基于win10的Android + Eclipse-8.0.2 + PhoneGap-8.0.0 环境配置》
ionic 借助插件 cordova-plugin-wechat cordova-plugin-qqsdk 实现微信分享 QQ分享 微博分享
总结了android studio 搭建cordova开发环境的步骤,以及搭建过程中遇到的问题和解决方法。
cordova-android-3.5.0
实实在在经过ant编译的cordova-2.9.1.jar 而不是有些人坑蒙拐骗的rar文件