Android使用Cordova系列详解-android项目集成Cordova模块

转载请表明出处：https://mp.csdn.net/mdeditor/82694862
欢迎关注微信公众号 破旧的小窝

Cordova简介

在客户端app开发的过程中,许多变动的业务需要前端来处理,随着业务的不断变动,前端和客户端需要支持复杂的交互来满足业务的增长.

如今大部分的app都有自己的前端和客户端交互框架,大公司都会自己开发搭建JSBridge来满足,也有一些开源的框架如Weex,Cordova等之流,因在使用cordova过程中,发现网上并没有很详细的具体实践使用文档,许多坑都得自己摸索着解决,因此把自己使用的一些坑和感悟记录下来.接下来就不啰嗦理论东西,主要是实践.

Cordova安装使用

1.安装Cordova

npm install -g cordova

如果没装npm的百度就好,实际安装会比较慢,能就,装好之后可以看下版本

2.建立cordova项目

cordova create mycordova

3.添加android平台

cordova platform add android 添加cordova android 平台

上面会说cordova-plugin-whitelist 已经添加到project中了,这个之后会说,ok现在可以在platform目录下发现Android相应的目录.

4.集成cordova到android 项目中

这里找了很多资料,集成到自己到android项目中,一般比较简单的是有一个cordova.jar包集成到android项目里. 官网上也有相关到资料,不过比较坑, 自己可以从官网看,接下来说的是直接把cordova的代码移植到项目中

集成之前,我们先用android studio打开cordova目录下platform目录下到android项目

app目录下就类似我们自己到app,可以看到有个MainActivity,
其他的主要是CordovaLib模块,这里包含了Cordova Android 端的一些核心类
platform_www里面是一些js代码
在项目的最外层还有一个config.xml的配置文件,这个后续文章会提到
因此我们只要把CordovaLib相关类弄进来就ok了;

首先建立一个新的project, File->new->import Module, 选择CordovaLib
setting.gradle 更改如下

include ':app',":CordovaLib"

app下到build.gradle 添加相应依赖

dependencies {
    implementation project(':CordovaLib')
}

把之前cordova项目里的config,和assest拷贝到自己到项目里面

则我们到项目最终如下

在activity里到onCreate加入对应代码

public class MyCordovaActivity extends CordovaActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }

        // Set by  in config.xml
        loadUrl("http://www.baidu.com");
    }
}

因为要访问网络记得在AndroidManifest.xml加入一下permission

<uses-permission android:name="android.permission.INTERNET"/>

此时打包运行一下app
打开,发现出现crash

我们修改config.xml

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
    id="com.example.sunquan.cordovademo"
    version="1.0.0"
    xmlns="http://www.w3.org/ns/widgets">
    <name>cordovaDemoname>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    description>
    <author
        email="[email protected]"
        href="http://cordova.io">
        Apache Cordova Team
    author>

    <feature name="Whitelist">
        <param
            name="android-package"
            value="org.apache.cordova.whitelist.WhitelistPlugin"/>
        <param
            name="onload"
            value="true"/>
    feature>

    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="market:*" />

    <preference
        name="loglevel"
        value="DEBUG" />
widget>

增加Whitelist插件,参数param value指向的是这个插件所处的类

这个类怎么来呢, 之前在cordova platform add android 的时候提示说cordova-plugin-whitelist 已经添加到project中了, OK, 我们从之前的cordova android platform 中找到Whitelist插件, 把它拷贝到项目中,并设置对应的param 路径名

此时再次安装运行apk, 发现已经可以打开www.baidu.com网址了.