2018-10-30 14:31:50 qq_36933797 阅读数 1816
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1737 人正在学习 去看看 姜博

看到一篇不错的文章https://www.jianshu.com/p/e74bc7abac8d

看了好多教程都没有找到怎么实现这个功能,今天把它试出来了
在这里插入图片描述
将cordova导入到原生项目网上很多教程,不再赘述
接下来修改首页,首页要继承CDVViewController,
在这里插入图片描述
但是这样写总是加载首页下的index.html页面。要让他们加载别的html,仅仅需要设置父类的几个属性。
在这里插入图片描述
wwwFolderName这个属性是设置网页所在文件夹
startPage设置的是要加载的html文件
在这里插入图片描述
加载成功!Over!

2019-09-09 14:52:45 qq_35213765 阅读数 90
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1737 人正在学习 去看看 姜博

首先你得要有一个cordova的项目,因为太多太多的东西需要从那里复制粘贴了。。。
那我们就开始吧!

第一步:打开你的android原生项目;

第二步:将Cordova项目的Cordovalib导入安卓项目,并在app的build.gradle中添加依赖;

图1


第三步:在main文件夹下创建assets文件夹,然后将Cordova项目的H5端代码(即WWW文件夹)拷贝到assets里面;
在这里插入图片描述
第四步:在res下创建一个新的文件夹xml,然后将Cordova项目中res\xml\config.xml拷贝进去;
在这里插入图片描述
第五步:创建一个包,包名为com.test.MyPlugin,然后把Cordova项目对应目录下的MyPlugin.java文件复制粘贴进去;

第六步:再把cordova项目中的白名单的包复制粘贴过来;
在这里插入图片描述
第七步:开始测试:

7.1 新建类TestCordovaActivity,继承CordovaActivity,加载index.html

public class TestCordova 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 <content src="index.html" /> in config.xml
    // 加载H5首页
    loadUrl(launchUrl);
}
}

7.2 在MainActivity添加按钮,点击跳转至TestCordovaActivity页面

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button button = findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(MainActivity.this,
                    TestCordova.class);
            MainActivity.this.startActivity(intent);
        }
    });
}
}

在这里插入图片描述
上面是我看别人做的,顺便写下来让自己印象深刻一点,不过借鉴过来的时候并不能一次性就跑通,还是有些问题的,下面就写出我觉得需要注意的点:

第一点:白名单一点要按照上面我写的那样,包名一致,类名一致;

第二点:config.xml文件中一定要注意value的值!!!
在这里插入图片描述
value的值就是MyPlugin.java文件的路径!!!

第三点:就是注意cordova.plugin.js文件中的内容!
在这里插入图片描述

2018-09-19 16:21:57 qq_29730273 阅读数 301
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1737 人正在学习 去看看 姜博

@Android原生应用加载部署于服务器的Cordova项目的链接调用原生功能TOC
Cordova项目代码platform文件夹下对应平台中的www文件夹下的代码作为webapp项目部署到服务器上,安卓对应的activity继承CordovaActivity加载服务器上的webapp。
第一步:注释掉if (pluginManager.shouldAllowBridgeAccess(origin)) {的判断,改为红圈所示。
在这里插入图片描述
第二步:双击assembleRelease将Cordova项目中的CordovaLib生成为jar包。assembleRelease执行完毕build的outputs会有一个.aar包,从其中提取jar包即可。
在这里插入图片描述
在这里插入图片描述
第三步:将第一步生成的jar包导入到原生项目。
第四步:将Cordova项目中的main源码复制到原生项目中。在这里插入图片描述
第五步:拷贝xml文件夹中的所有xml到原生项目。
在这里插入图片描述
第六步:拷贝AndroidManifest中的provider到原生项目,${applicationId}改为原生项目包名。
在这里插入图片描述

2019-08-08 11:26:00 weixin_30247781 阅读数 4
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1737 人正在学习 去看看 姜博
Android H5混合开发(3):原生Android项目里嵌入Cordova


如果安卓项目已经存在了,那么如何使用Cordova做混合开发?

方案1(适用于插件会持续增加或变化的项目):
新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平台(我们的安卓项目需要做目录结构、配置等很多内容调整),后续开发中,可通过命令在Codova项目中统一快速添加插件,进行原生与H5通信。

方案2(适用于插件较稳定的项目):
新建Cordova项目并添加Android平台,添加相关插件,将Android平台下H5代码、插件相关的内容导入到我们的项目中(我们的安卓项目目录结构、配置信息等变化较小)。后续开发中,如果新增、编辑插件,则无法直接通过命令在我们的项目中维护插件,需要在新建的Cordova项目中维护好,然后手动复制过来相关的文件。

本次讲解,我们使用第二种方案吧。实现也很简单,大致过程如下:
1.准备安卓项目
2.将Cordova项目的Cordovalib导入安卓项目,并在gradle中添加依赖
3.将Cordova项目的H5端代码(即/WWW/)拷贝到 /安卓项目/src/assets/4.将Cordova项目的config.xml拷贝到 /安卓项目/res/xml/5.将Cordova项目的于H5端约定的插件.java代码拷贝到 /安卓项目/src/对应包名下/(我们主要此处写代码)
6.将Cordova项目的WhitelistPlugin拷贝到 /安卓项目/src/下


注意,本次讲解:
1.我们新建一个项目mynativeapp作为已存在的安卓项目;
2.我们直接使用《Android H5混合开发(2):自定义Cordova插件》中的Demo作为Cordova项目;

1.准备安卓项目
在/TestCordova/mynativeapp/目录下,使用AndroidStudio创建一个普通的安卓项目,取名:mynativeapp,如下图:


新建的安卓项目
2.将Cordova项目的Cordovalib导入安卓项目,并在gradle中添加依赖
一般方案:
使用cordova命令新建一个混合项目,添加android平台,里面包含Cordovalib。然后在我们的安卓项目中导入即可。


此处,我们直接导入上一节课 /Cordova项目/android平台下的Cordovalib:
导入后的mynativeapp项目目录结构和gradle
3.将Cordova项目的H5端代码(即/WWW/)拷贝到 /安卓项目/src/assets/下
注意:因为咱们这里只是做Demo,实际上并没有找H5端的人员写这块的代码。在上一节课,咱们在Cordova项目的android平台中,已经写了个测试的H5代码,那么,就直接使用这个吧,如下图:


H5的代码


复制到/mynativeapp/src/assets/下
复制过来的H5的代码
4.将Cordova项目的config.xml拷贝到 /安卓项目/res/xml/下
我们将Cordova项目/res/xml/config.xml文件,拷贝到/mynativeapp/res/xml/下


Cordova项目/res/xml/config.xml文件
拷贝到/mynativeapp/res/xml/5.将Cordova项目的于H5端约定的插件.java代码拷贝到 /安卓项目/src/对应包名下/
正常开发时,我们主要此处写代码。
在上节课,我们的自定义插件的代码已经有了,所以直接复制过来就可以了。

Cordova项目的于H5端约定的插件.java代码
自定义的插件代码拷贝到 /安卓项目/src/对应包名下/
6.将Cordova项目的WhitelistPlugin(插件白名单)拷贝到 /安卓项目/src/下
Cordova项目的WhitelistPlugin
拷贝到 /安卓项目/src/下
准备工作完毕,开始测试
至此,安卓项目中所需的Cordova依赖、H5代码、插件相关信息都手动导入了。接下来我们测试一下H5的功能吧。
1.新建类TestCordovaActivity,继承CordovaActivity,加载index.html

package com.ccc.ddd;
import android.os.Bundle;
import org.apache.cordova.CordovaActivity;

/**
 * @author xc
 * @date 2018/9/25
 * @desc 测试H5的页面
 */
public class TestCordovaActivity 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 <content src="index.html" /> in config.xml
        // 加载H5首页
        loadUrl(launchUrl);
    }
}
2.MainActivity添加按钮,点击跳转至TestCordovaActivity页面

package com.ccc.ddd;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, 
                                            TestCordovaActivity.class);
                MainActivity.this.startActivity(intent);
            }
        });
    }
}
编译安卓项目,运行到手机


MainActivity.jpg

TestCordovaActivity.jpg
总结
本章介绍了在已有安卓项目中如何使用Cordova,没有太多技术点。
如果有不明白的地方,建议去官网多查查资料。
[https://cordova.apache.org/docs/en/latest/)

Cordova的命令、插件的命令等只是方便我们快速管理维护项目和插件的工具。我们可以使用,但是不能太过依赖,要活学活用。


源码已上传至网盘:
https://pan.baidu.com/s/1THPUbfCgRQHZGLWy7_Zkww

第一篇:Android H5混合开发(1):构建Cordova 项目
https://www.jianshu.com/p/058a0dd7f809

第二篇:Android H5混合开发(2):自定义Cordova插件
https://www.jianshu.com/p/8fcbf06a4c3a

第三篇:Android H5混合开发(3):原生Android项目里嵌入Cordova
https://www.jianshu.com/p/e306ae0f1f03

第四篇:Android H5混合开发(4):构建Cordova Jar包
https://www.jianshu.com/p/447d41a1299d

 

转载于:https://www.cnblogs.com/Jeely/p/11320120.html

2016-07-21 18:10:52 u013491677 阅读数 22627
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1737 人正在学习 去看看 姜博

一 安装node.js

下载地址:https://nodejs.org/en/

安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova。

注意:可能会有点慢,请耐心等待!


二 cmd创建Android项目

  • 1.新建一个项目:
    路径名>cordova create 文件名 包名 工程名
  • 2.添加Android平台:cordova platform add android

三 导入工程 运行一下

  • 1.导入工程

  • 2.运行一下,如果出现以下界面,恭喜你,Cordova环境集成成功,你可以开始下一步操作了。


四 调用插件

  • 1.cmd添加摄像机插件:android路径名>cordova plugin add cordova-plugin-camera
  • 2.查看已安装的插件列表

    备注:懒得进行以上步骤的朋友,可以点击以下链接直接下载,对于开发使用没有影响。

    1. 基于node.js4.47无插件下载
    2. 基于node.jd4.4.7全插件下载
  • 3.编写index.html文件

在head里加入:

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <script type="text/javascript" charset="utf-8">

            var destinationType;

            document.addEventListener("deviceready",onDeviceReady,false);

            //Cordova加载完成会触发
            function onDeviceReady() {
                destinationType=navigator.camera.DestinationType;
            }

            //拍照
            function capturePhoto() {
                if(!navigator.camera){
                    alert('camera:')
                }
                //拍照并获取Base64编码的图像(quality : 存储图像的质量,范围是[0,100])
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                            destinationType: destinationType.DATA_URL }
                                            );
            }

            //拍照成功
            function onPhotoDataSuccess(imageData) {
                console.log(imageData);
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = "data:image/jpeg;base64," + imageData;
            }

            //拍照失败
            function onFail(message) {
                alert('拍照失败: ' + message);
            }
        </script>
</head>

在body里加入:

 <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="capturePhoto();">拍摄照片</button> <br>
        <img style="display:none;width:240px;height:320px;" id="smallImage" src="" />
 </body>
  • 4.调用相机插件:

1.将CordovaLib作为Library引入到项目中;
2.把示例demo中的src目录下的org文件夹、assets文件夹下内容、res文件夹下xml文件夹下的config.xml、AndroidManifest.xml中权限服务考到自己项目中。
3.写代码:
(1).创建一个activity extends CordovaActivity;
(2).loadUrl(“file:///android_asset/www/index.html”);
(3).将步骤3写好的index.html考到assets/www/目录下;
(4).运行到手机上,应该据可以调用摄像头功能了。

添加插件一览:

1.Device(设备)获取一些设备信息。

cordova plugin add cordova-plugin-device

2.Connection(网络连接)用来判断网络连接类型(2G、3G、4G、Wifi、无连接等)。

cordova plugin add cordova-plugin-network-information

3.Battery(电池)可以获取电池状态信息。

cordova plugin add cordova-plugin-battery-status

4.Accelerometer(加速计)让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。

cordova plugin add cordova-plugin-device-motion

5.Compass(指南针)可以让开发者读取移动设备的朝向。

cordova plugin add cordova-plugin-device-orientation

6.Geolocation(地理定位)让应用判断设备的物理位置。

cordova plugin add cordova-plugin-geolocation

7.Camera(相机)用相机获取图像。

cordova plugin add cordova-plugin-camera

8.MediaCapture(媒体捕获)与Camera API相比,不仅能获取图像,还可以录视频或者录音。

cordova plugin add cordova-plugin-media-capture

9.Media(播放/记录媒体文件)让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。

cordova plugin add cordova-plugin-media

10.file(文件访问操作类)提供对设备上的文件进行读取和写入的功能支持。

cordova plugin add cordova-plugin-file

11.fileTransfer(文件传输)实现文件上传、下载及共享等功能。

cordova plugin add cordova-plugin-file-transfer

12.VisualNotification(可视化消息提醒)不同于js的alert()、confirm()和prompt()方法是同步的。Cordova的alert()、confirm()和prompt()方法是异步的,并且对显示内容有更大的控制权限。

cordova plugin add cordova-plugin-dialogs

13.HardwareNofifications(硬件消息提醒)让设备蜂鸣或振动。

cordova plugin add cordova-plugin-vibration

14.Contacts(联系人)读取联系人列表并在应用中使用联系人数据,或使用应用数据向联系人列表中写新的联系人。

cordova plugin add cordova-plugin-contacts

15.Globalization(全球化)允许应用查询操作系统的当前设置,判断用户使用的语言。

cordova plugin add cordova-plugin-globalization

16.Splashscreen(闪屏)用来在Cordova应用启动时显示自定义的闪屏。

cordova plugin add cordova-plugin-splashscreen

17.InAppBrowser(内置浏览器)允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理,但有时候需要不同的用户体验,InAppBrowser加载网页内容,应用用户可以更方便的直接返回到主应用。

cordova plugin add cordova-plugin-inappbrowser

18.Console(调试控制台)让程序可以在控制台中打印输出日志。

cordova plugin add cordova-plugin-console

19.exitApp(退出应用)让 Android 或者 Windows Phone 8 上的APP关闭退出(iOS系统不支持)

cordova plugin add cordova-plugin-exitapp

20.barcodeScanner(条形码/二维码扫描)不仅可以通过摄像头识别二维码/条形码,还能生成二维码。

cordova plugin add cordova-plugin-barcodescanner

命令一览:

1.查看所有已经安装的插件

cordova plugin ls

2.安装插件(以camera插件为例)

cordova plugin add cordova-plugin-camera

3.删除插件(以camera插件为例)

cordova plugin rm cordova-plugin-camera

4.更新插件

cordova plugin update


五 Android studio环境下将CordovaLib作为依赖导入

环境:Android Studio 2.2
- 1.将CordovaLib作为module导入


- 2.添加依赖


六 自定义插件

  • 1.自定义你的java类

1.1.包名,等下会用到。
1.2.集成的父类。
1.3.重写的方法。
1.4.传递的参数。
1.5.action匹配。

  • 2.在config.xml文件中添加配置

2.1.js文件名
2.2.java类路径名(详见1.1)

  • 3.在assets/www/plugins文件夹下新建文件夹cordova-plugin-xxxx文件夹,并在此文件夹下新建xxxx.js文件。

3.1.js的文件夹名.文件名
3.2.方法名
3.3.与config.xml文件下一致
3.4.方法名==2(与java文件下action一致)
3.5.成功回调函数
3.6.失败回调函数 [content,type]是传递的参数

  • 4.在cordova_plugins.js中添加必要配置

4.1.file:js路径名
4.2.id:js的文件夹名.文件名
4.3.html文件中方法名的前缀 在module.exports.metadata中添加
4.5. js的文件夹名
4.6.版本号

  • 5.在index.html中调用
function Toast(){
    navigator.Toast.getTost("Toast测试",0,onSuccess,onError);
    function onSuccess(Data){
        alert(JSON.stringify(Data));
    }
    function onError(Data){
        alert(JSON.stringify(Data));
    }
 }

七 java类中的一些问题

  • 1.startActivityForResult

    查看CordovaActivty源码:

    查看CordovaPlugin源码:

    在webView的CordovaActivity获取到Result后,会调用cordovaInterface.onActivityResult(requestCode, resultCode, intent)方法通知CordovaPlugin。如果使用cordova.getActivity().startActivityForResult(intent,CORDOVA_SPEEN)方式,并没有将CordovaPlugin传进去,在webView的CordovaActivity获取到Result后,结果只会返回到的webView的CordovaActivity当中,并不会进行下一步。

  • 2.回调

mCallbackContext.success(JSONObject);
mCallbackContext.error(JSONObject);


八 在CordovaActivity中添加原生View组件 #

原因:继承CordovaActivity的子类中默认只有一个WebView,实际开发中不能满足需求。
解决方案:可以使用setContentView设置XML布局,需要重写的两种方法:makewebview 和createviews。(亲测通过extends Activity implements CordovaInterface方法实现时,cordova.startActivityForResult不回调,具体原因尚不明)
- makewebview() : 很重要,它使用R.id.cordovawebview,会定义在XML布局文件。
- createViews() : 它会默认使用setContentView,想使用自己定义的布局,需要重写该方法。

实现功能:在WebView上增加TitleBar。
- 1.布局文件(R.layout.activity_cordova_title)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:background="#25C28B" >

        <ImageButton
            android:id="@+id/cordova_back"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#00FFFFFF"
            android:paddingLeft="10dp"
            android:paddingRight="20dp"
            android:src="@drawable/back" />

        <TextView
            android:id="@+id/cordova_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="原生头部"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />

        <Button
            android:id="@+id/cordova_close"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="#00FFFFFF"
            android:paddingLeft="10dp"
            android:paddingRight="20dp"
            android:text="关闭"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />
    </RelativeLayout>

       <org.apache.cordova.engine.SystemWebView
        android:id="@+id/cordovaWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
  • 2.自定义CordovaActivity类(CordovaTitleActivity)

参照源码copy过来的,因为要使用自定义布局,所以setContentView相关代码注掉

public class CordovaTitleActivity extends CordovaActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cordova_title);
        loadUrl(launchUrl);

    }

    @Override
    protected CordovaWebView makeWebView() {
        SystemWebView webView = (SystemWebView) findViewByI(R.id.cordov_webView);
        CordovaWebView cordovaWebView = new CordovaWebViewImpl(new SystemWebViewEngine(webView));
        return cordovaWebView;
    }
    @Override
    protected void createViews() {
        //因为要使用自定义布局,此处setContentView需要注掉
//      appView.getView().setId(100);
//      appView.getView().setLayoutParams(new FrameLayout.LayoutParams(
//              ViewGroup.LayoutParams.MATCH_PARENT,
//              ViewGroup.LayoutParams.MATCH_PARENT));
//      setContentView(appView.getView());

      if (preferences.contains("BackgroundColor")) {
          int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
          // Background of activity:
          appView.getView().setBackgroundColor(backgroundColor);
      }
      appView.getView().requestFocusFromTouch();
    }
}
  • 3.使用Cordova需要注意的问题
1. 在Activity的onCreate方法中,loadUrl(launchUrl)调用之后,CordovaLib中的WebView对象appView才有值,因此使用appView时,必须写在loadUrl的后面。
2. 在Cordova中,appView是不能直接调用addJavascriptInterface()方法的,在调用该方法之前,需要加上一行代码: 
   WebView Wv = (WebView) appView.getEngine().getView();
   调用WebView的其他方法类似。

九 在Fragment里使用CordovaWebView

  • 1.Fragment的布局文件(cordova_fragmrnt.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

     <org.apache.cordova.engine.SystemWebView
        android:id="@+id/cordov_webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

-2.Fragment

public class MyFragmentNew extends BaseFragment implements CordovaInterface {

    public static MyFragmentNew newInstance() {
        MyFragmentNew fragment = new MyFragmentNew();
        return fragment;
    }

    private String TAG = "MyFragmentNew";

    private CordovaWebView myCordovaWebView;

    private Context mContext;

    // Plugin to call when activity result is received
    protected CordovaPlugin activityResultCallback = null;
    protected boolean activityResultKeepRunning;
    // Keep app running when pause is received. (default = true)
    // If true, then the JavaScript and native code continue to run in the
    // background
    // when another application (activity) is started.
    protected boolean keepRunning = true;

    private final ExecutorService threadPool = Executors.newCachedThreadPool();

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        mContext = inflater.getContext();
        View thisView = inflater.inflate(R.layout.home_pager_fragment_new,
                container, false);
        SystemWebView homeWebView = (SystemWebView) thisView
                .findViewById(R.id.cordov_webView_home);
        ConfigXmlParser parser = new ConfigXmlParser();
        parser.parse(getActivity());// 这里会解析res/xml/config.xml配置文件
        myCordovaWebView = new CordovaWebViewImpl(new SystemWebViewEngine(
                homeWebView));// 创建一个cordovawebview
        myCordovaWebView.init(new CordovaInterfaceImpl(getActivity()),
                parser.getPluginEntries(), parser.getPreferences());// 初始化
        myCordovaWebView.loadUrl("file:///android_asset/www/index.html");// 加载网页

        return thisView;
    }

    @Override
    public void startActivityForResult(CordovaPlugin command, Intent intent,
            int requestCode) {
        this.activityResultCallback = command;
        this.activityResultKeepRunning = this.keepRunning;
        // If multitasking turned on, then disable it for activities that return
        if (command != null) {
            this.keepRunning = false;
        }
        // Start activity
        super.startActivityForResult(intent, requestCode);

    }

    @Override
    public void setActivityResultCallback(CordovaPlugin plugin) {
        this.activityResultCallback = plugin;

    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (myCordovaWebView != null) {
            myCordovaWebView.handleDestroy();
        }
    }

    @Override
    public Object onMessage(String id, Object data) {
        return null;
    }

    @Override
    public ExecutorService getThreadPool() {
        return threadPool;
    }

    @Override
    public void requestPermission(CordovaPlugin plugin, int requestCode,
            String permission) {
        // TODO Auto-generated method stub

    }

    @Override
    public void requestPermissions(CordovaPlugin plugin, int requestCode,
            String[] permissions) {
        // TODO Auto-generated method stub

    }

    @Override
    public boolean hasPermission(String permission) {
        // TODO Auto-generated method stub
        return false;
    }

}
  • 3.需要在Fragment所在的Activity中重写onActivityResult()方法,将结果通知给自定义插件
public static CordovaPlugin mCordovaPlugin;

    /**
     * 为了将回调结果回传给Cordova插件
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        // TODO Auto-generated method stub
        CordovaPlugin cordovaPlugin = this.mCordovaPlugin;
        if(cordovaPlugin != null){
            cordovaPlugin.onActivityResult(requestCode,resultCode,data);
        }
        super.onActivityResult(requestCode, resultCode, data);
    }
  • 4.在自定义插件类里给步骤3里的mCordovaPlugin赋值
public boolean execute(String action, JSONArray args,
        CallbackContext callbackContext) throws JSONException {
        // TODO Auto-generated method stub
        mCallbackContext = callbackContext;

        /*给fragment所在activity里的mCordovaPlugin赋值,否则fragment所在activity里onActivityResult()
         * 无法将结果传给插件的onActivityResult()。*/
        MyFragmentActivity.mCordovaPlugin = (CordovaPlugin) this;

       // 语音识别
        if ("getSpeechData".equals(action)) {
            RequestData = args.getJSONObject(0);
            Intent intent = new Intent(cordova.getActivity(),
                    SpeechActivity.class);
            intent.putExtra("flag", RequestData.getInt("flag"));
            this.cordova.startActivityForResult((CordovaPlugin) this, intent,
                    CORDOVA_SPEEN);

        return true;
}

十 Fragment拦截返回键

  • 1.原理:利用Fragment的生命周期,在Fragment显示时通知到Activity,并由Activity保持。当用户按下物理返回键时,首先将back键请求交给Fragment处理,如果处理返回true,未处理时返回false。如果Fragment没有处理则由Activity处理。为保证Fragment存在嵌套的情况下也能正常使用,可以使用FragmentManager去管理持有的子Fragment,FragmentManager使用递归方式处理。

  • 2.定义FragmentBackHandler接口

public interface FragmentBackHandler {
    //用于判断子fragment是否对返回键做处理
    boolean onGoBack();
}
  • 3.定义一个BackHandlerHelper工具类,用于实现分发back事件,Fragment和Activity的外理逻辑是一样,所以两者都需要调用该类的方法。
public class BackHandlerHelper {

    /**
     * 将back事件分发给 FragmentManager 中管理的子Fragment,如果该 FragmentManager
     * 中的所有Fragment都 没有处理back事件,则尝试 FragmentManager.popBackStack()
     * 
     * @param fragmentManager
     * @return
     */
    public static boolean handleBackPress(FragmentManager fragmentManager) {
        List<Fragment> fragments = fragmentManager.getFragments();

        if (fragments == null)
            return false;

        for (int i = fragments.size() - 1; i >= 0; i--) {
            Fragment child = fragments.get(i);

            if (isFragmentBackHandled(child)) {
                return true;
            }
        }

        if (fragmentManager.getBackStackEntryCount() > 0) {
            fragmentManager.popBackStack();
            return true;
        }
        return false;
    }

    public static boolean handleBackPress(Fragment fragment) {
        return handleBackPress(fragment.getChildFragmentManager());
    }

    public static boolean handleBackPress(FragmentActivity fragmentActivity) {
        return handleBackPress(fragmentActivity.getSupportFragmentManager());
    }

    public static boolean isFragmentBackHandled(Fragment fragment) {
        return fragment != null
                && fragment.isVisible()
                && fragment.getUserVisibleHint() // for ViewPager
                && fragment instanceof FragmentBackHandler
                && ((FragmentBackHandler) fragment).onGoBack();

    }
}
  • 3.在Fragment里实现FragmentBackHandler接口
public class MyFragmentNew extends BaseFragment implements FragmentBackHandler{

    @Override
    public boolean onGoBack() {
        if(myCordovaWebView.canGoBack()){
            myCordovaWebView.getEngine().goBack();
            return true;
        }
        //return BackHandlerHelper.handleBackPress(this);
        //当确认没有子Fragmnt时可以直接return false
        return false;
    }
}
  • 4.在宿主Activity覆盖onBackPressed方法
public class MyActivity extends FragmentActivity {
    //.....
    @Override
    public void onBackPressed() {
        //子Fragment没有做拦截处理
        if (!BackHandlerHelper.handleBackPress(this)) {
            super.onBackPressed();
        }
    }
}
没有更多推荐了,返回首页