最近项目计划开发单页面应用,计划使用cordova进行包装,本篇对Cordova开发需要的环境和创建过程进行总结,由于小弟也是在学习过程中,文章出错处欢迎大神指正...,废话多说无意,开始撸码~~~
一 环境安装:
首先要准备android平台下cordova开发用到的环境...
这里提供的为这些工具的官网或下载地址：
- 安装Node.js
https://nodejs.org/en- 安装Cordova
http://cordova.apache.org
1.安装Node.js
因为 Cordova 命令行工具是作为一个 npm 包来分发的，因此需要预先安装 Node.js ，并且能够调用 node 和 npm命令 。因为 Cordova 命令行工具是作为一个 npm 包来分发的，因此需要预先安装 Node.js ，并且能够调用 node 和 npm命令 。
2.安装Cordova
安装好 Node.js 以及 npm，利用 npm 工具能自动下载 Cordova 模块。
C:\>npm install -g cordova
二 创建Cordova APP
官方文档： http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html
1.新建一个cordova android应用
新建一个目录(F:\workroom\Cordova)，Shift+鼠标右键，在此处打开命令窗口
F:\workroom\Cordova>cordova create helloworld com.example.hello HelloWorld
创建一个HelloWorld的应用，helloworld文件夹名，com.example.hello包名，HelloWorld应用名
创建Cordova APP.png
2.添加平台
cd helloworld
添加Android平台
cordova platform add android --save
检查当前添加的平台
cordova platform ls
添加平台.png
3.创建app
cordova build android
三 用Android studio打开Cordova 应用
1.运行项目
运行studio,打开File -->Open... 对话框,选择创建的helloworld\platform文件夹下的android项目,点击OK,等待项目编译
图片.png
注意: 如果你使用的studio版本较高(最新的是android studio 3.0),因为cordova创建的应用版本低,会有Android Gradle Plugin Update提示,为了不跳坑可以先选择忽略更新
图片.png
Cordova和Android版本支持对应关系
Cordova每个版本所支持Android最高的API有可能是不一样的，目前Cordova最新的版本支持Android API为23，其他的版本支持对应关系可以参考如下：
图片.png
2.查看目录结构
选择Project视图,查看cordova编译的完整目录结构
图片.png
3. 项目运行结果
使用真机或者模拟器运行HelloWorld项目,如下
项目运行结果.png
四 Cordova加载远程网站
1.修改默认加载页面
Corvoda应用的 MainActivity.java 有个 loadUrl(launchUrl) 的方法，将launchUrl 修改为远程网站的地址，即可加载远程网站。eg：loadUrl("https://www.baidu.com")；
或者修改项目的根文件夹里的 config.xml 文件，将 content src 指定为远程网站的地址<content src="https://www.baidu.com" />这样运行后，直接在应用内部加载该网页。不过点网站里面的链接跳转会调用系统自带的浏览器打开，不是我们想要的效果。我们想在应用的内部直接跳转。
2.使用Cordova内部浏览器跳转链接
目前网上有两种解决方案，第一种是重写shouldOverrideUrlLoading方法，第二种是修改config.xml
- 重写
shouldOverrideUrlLoading方法
之前的版本可以在OnCreate方法中重写 shouldOverrideUrlLoading 方法，最新的版本改动比较大，MainActivity.java 是这样的：
import android.os.Bundle;
import org.apache.cordova.*;
public class MainActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}
不过可以找到 shouldOverrideUrlLoading 方法，在 SystemWebViewClient.java 中，直接修改
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
//return parentEngine.client.onNavigationAttempt(url);
view.loadUrl(url);
return true;
}
- 修改config.xml
在res\config.xml中添加<allow-navigation href="http://*/*" />
好了,到这里你的第一个Android平台的Cordova项目已经可以运行了,要想体验Cordova带给我们的更多惊喜可以关注我后面要写的Cordova自定义插件开发~~
(文章参考地址:http://www.jianshu.com/p/c86581cb343e)
网友评论