CordovaCrodova

Cordova android平台开发一(应用创建)

2017-11-22  本文已影响71人  西瓜皮TWO

最近项目计划开发单页面应用,计划使用cordova进行包装,本篇对Cordova开发需要的环境和创建过程进行总结,由于小弟也是在学习过程中,文章出错处欢迎大神指正...,废话多说无意,开始撸码~~~

一 环境安装:

首先要准备android平台下cordova开发用到的环境...
这里提供的为这些工具的官网或下载地址:

1.安装Node.js

因为 Cordova 命令行工具是作为一个 npm 包来分发的,因此需要预先安装 Node.js ,并且能够调用 node 和 npm命令 。因为 Cordova 命令行工具是作为一个 npm 包来分发的,因此需要预先安装 Node.js ,并且能够调用 nodenpm命令 。

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

之前的版本可以在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;   
 }

    在res\config.xml中添加<allow-navigation href="http://*/*" />

好了,到这里你的第一个Android平台的Cordova项目已经可以运行了,要想体验Cordova带给我们的更多惊喜可以关注我后面要写的Cordova自定义插件开发~~
(文章参考地址:http://www.jianshu.com/p/c86581cb343e)

上一篇 下一篇

猜你喜欢

热点阅读