采用独立应用集成方式,hbuilder&&安卓原生交互一点经历

原创 2016年08月30日 17:45:22

集成方式概述

独立应用集成方式:即Widget集成方式,开发者在集成后可在需要时启动HTML5+ SDK,显示指定目录下的5+ WebAPP

单页面集成方式:即Webview集成方式,用户可在需要时显示一个支持5+扩展API的Webview页面。使用单页面方式集成5+ SDK,在页面内不能调用plus.webview的API创建新的页面,其他5+API的使用不受影响。

由于用户在开发APP首页时,使用了plus.webview.show(),只能采用独立应用集成方式。

导入范例

官方给的离线打包的实例,是HBuilder-Hello,从AndroidManifest.xml文件中可以看到,启动页面是hbuilder封装的Activity——–io.dcloud.PandoraEntry,这样的话,怎么和安卓原生部分交互啊。

android原生页面展示hbuilder页面

搜索了好久,找到了一条出路,使用官方上的SDK_WebApp.java。

SDK_WebApp 源码

package io.dcloud;

import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.FrameLayout;

import io.dcloud.common.DHInterface.IApp;
import io.dcloud.common.DHInterface.IApp.IAppStatusListener;
import io.dcloud.common.DHInterface.ICore;
import io.dcloud.common.DHInterface.ICore.ICoreStatusListener;
import io.dcloud.common.DHInterface.IOnCreateSplashView;
import io.dcloud.common.DHInterface.ISysEventListener.SysEventType;
import io.dcloud.common.DHInterface.IWebview;
import io.dcloud.common.DHInterface.IWebviewStateListener;
import io.dcloud.feature.internal.sdk.SDK;

/**
 * 本demo为以WebApp方式集成5+ sdk,
 */
public class SDK_WebApp extends Activity {

    boolean doHardAcc = true;
    EntryProxy mEntryProxy = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        if (mEntryProxy == null) {
            FrameLayout f = new FrameLayout(this);
            // 创建5+内核运行事件监听
            WebappModeListener wm = new WebappModeListener(this, f);
            // 初始化5+内核
            mEntryProxy = EntryProxy.init(this, wm);
            // 启动5+内核
            mEntryProxy.onCreate(this, savedInstanceState, SDK.IntegratedMode.WEBAPP, null);
            setContentView(f);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        return mEntryProxy.onActivityExecute(this, SysEventType.onCreateOptionMenu, menu);
    }

    @Override
    public void onPause() {
        super.onPause();
        mEntryProxy.onPause(this);
    }

    @Override
    public void onResume() {
        super.onResume();
        mEntryProxy.onResume(this);
    }

    public void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        if (intent.getFlags() != 0x10600000) {// 非点击icon调用activity时才调用newintent事件
            mEntryProxy.onNewIntent(this, intent);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mEntryProxy.onStop(this);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyDown, new Object[]{keyCode, event});
        return _ret ? _ret : super.onKeyDown(keyCode, event);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyUp, new Object[]{keyCode, event});
        return _ret ? _ret : super.onKeyUp(keyCode, event);
    }

    @Override
    public boolean onKeyLongPress(int keyCode, KeyEvent event) {
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyLongPress, new Object[]{keyCode, event});
        return _ret ? _ret : super.onKeyLongPress(keyCode, event);
    }

    public void onConfigurationChanged(Configuration newConfig) {
        try {
            int temp = this.getResources().getConfiguration().orientation;
            if (mEntryProxy != null) {
                mEntryProxy.onConfigurationChanged(this, temp);
            }
            super.onConfigurationChanged(newConfig);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        mEntryProxy.onActivityExecute(this, SysEventType.onActivityResult, new Object[]{requestCode, resultCode, data});
    }
}

class WebappModeListener implements ICoreStatusListener, IOnCreateSplashView {
    Activity activity;
    View splashView = null;
    ViewGroup rootView;
    IApp app = null;
    ProgressDialog pd = null;

    public WebappModeListener(Activity activity, ViewGroup rootView) {
        this.activity = activity;
        this.rootView = rootView;
    }

    /**
     * 5+内核初始化完成时触发
     */
    @Override
    public void onCoreInitEnd(ICore coreHandler) {

        // 表示Webapp的路径在 file:///android_asset/apps/HelloH5
        String appBasePath = "/apps/HelloH5";

        // 设置启动参数,可在页面中通过plus.runtime.arguments;方法获取到传入的参数
        String args = "{url:'http://www.baidu.com'}";

        // 启动启动独立应用的5+ Webapp
        app = SDK.startWebApp(activity, appBasePath, args, new IWebviewStateListener() {
            // 设置Webview事件监听,可在监监听内获取WebIvew加载内容的进度
            @Override
            public Object onCallBack(int pType, Object pArgs) {
                switch (pType) {
                    case IWebviewStateListener.ON_WEBVIEW_READY:
                        // WebApp准备加载事件
                        // 准备完毕之后添加webview到显示父View中,
                        // 设置排版不显示状态,避免显示webview时html内容排版错乱问题
                        View view = ((IWebview) pArgs).obtainApp().obtainWebAppRootView().obtainMainView();
                        view.setVisibility(View.INVISIBLE);
                        rootView.addView(view, 0);
                        break;
                    case IWebviewStateListener.ON_PAGE_STARTED:
                        // 首页面开始加载事件
                        pd = ProgressDialog.show(activity, "加载中", "0/100");
                        break;
                    case IWebviewStateListener.ON_PROGRESS_CHANGED:
                        // WebApp首页面加载进度变化事件
                        if (pd != null) {
                            pd.setMessage(pArgs + "/100");
                        }
                        break;
                    case IWebviewStateListener.ON_PAGE_FINISHED:
                        // WebApp首页面加载完成事件
                        if (pd != null) {
                            pd.dismiss();
                            pd = null;
                        }
                        // 页面加载完毕,设置显示webview
                        // 如果不需要显示spalsh页面将此行代码移动至onCloseSplash事件内
                        app.obtainWebAppRootView().obtainMainView().setVisibility(View.VISIBLE);
                        break;
                }
                return null;
            }
        }, this);

        app.setIAppStatusListener(new IAppStatusListener() {
            // 设置APP运行事件监听
            @Override
            public boolean onStop() {
                // 应用运行停止时调用
                rootView.removeView(app.obtainWebAppRootView().obtainMainView());
                // TODO Auto-generated method stub
                return false;
            }

            @Override
            public void onStart() {
                // 独立应用启动时触发事件
            }

            @Override
            public void onPause(IApp arg0, IApp arg1) {
                // WebApp暂停运行时触发事件
            }
        });
    }

    @Override
    public void onCoreReady(ICore coreHandler) {
        // 初始化5+ SDK,
        // 5+SDK的其他接口需要在SDK初始化后才能調用
        SDK.initSDK(coreHandler);
        // 设置当前应用可使用的5+ API
        SDK.requestAllFeature();
    }

    @Override
    public boolean onCoreStop() {
        // 当返回false时候回关闭activity
        return false;
    }

    // 在Widget集成时如果不需要显示splash页面可按照如下步骤操作
    // 1 删除onCreateSplash方法内的代码
    // 2 将5+mainView添加到rootview时将页面设置为不可见
    // 3 在onCloseSplash方法中将5+mainView设置为可见
    // 4 修改androidmanifest.xml文件 将SDK_WebApp的主题设置为透明
    // 注意!
    // 如果不显示splash页面会造成用户点击后页面短时间内会没有变化,
    // 可能会给用户造成程序没响应的错觉,
    // 所以开发者需要对5+内核启动到5+应用页面显示之间的这段事件进行处理

    @Override
    public Object onCreateSplash(Context pContextWrapper) {
        splashView = new FrameLayout(activity);
        splashView.setBackgroundResource(android.R.color.transparent);
        rootView.addView(splashView);
        return null;
    }

    @Override
    public void onCloseSplash() {
        rootView.removeView(splashView);
    }
}

原生部分为hbuilder提供服务

通俗一点,就是如何让hbuilder调用Android原生部分提供的的方法?如果Android中单独展示一个网页(不采用框架),和服务器交互的话,可以通过webView.addJavascriptInterface,给服务器端传递一个对象,服务器端就和调用本地方法一样调用该对象的方法。可是通过SDK_WebApp.java加载hbuilder之后,没有找到传递JavaScriptInterface的地方,找找其他方法吧。下面是一个精简版的方法,

public class SDK_WebApp extends Activity {


    private static SDK_WebApp context;

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

      ...
        }
    }

    public static void test() {
        System.out.println("xxxxx");
        Toast.makeText(context, "test", Toast.LENGTH_SHORT).show();
    }
    ...

index.html对应的代码如下:

...
function getInfo() {
var mainAct = plus.android.newObject("io.dcloud.SDK_WebApp");
 plus.android.invoke(mainAct,"test");
}

    </script>
</head>

<body style="margin-top:200px">
<center>
    <button onclick="getInfo()">百度一下,你就知道</button>
</center>
</body>

</html>

调用方法补充

上面讲了一个小李子是没有问题的,但是有时,我们很难做到将所有的方法都声明为static,我就想,hbuilder中是否可以随意创建一个使用Java编写的类的对象呢?
官网api地址:
http://www.html5plus.org/doc/zh_cn/android.html
下面让咱们探究一下,这里仅仅写主要部分,其他部分请自行补充。
1.hbuilder调用没有参数Context的方法
hbuilder调用简单类方法。下面就Test写一个简单的例子。

package com.pansoft.oilgas.gaodenavigation;

import android.widget.Toast;

public class Test {
    public static void test(String params1, String params2) {
        System.err.println("test");
        System.err.println(params1);
        System.err.println(params2);
    }

    public static void test(MainActivity mainActivity) {
        System.err.println("test(object)");
        System.err.println(mainActivity);
        Toast.makeText(mainActivity, "xxxxxxxxxxxx", Toast.LENGTH_LONG).show();
    }
}
var testObject = plus.android.newObject("com.pansoft.oilgas.gaodenavigation.Test");
plus.android.invoke(testObject,"test","yyyy","zzzzzzz");
}

查看打印信息,ok,完全可以执行。
1.hbuilder调用含有参数Context的方法

function getInfo() {

    var mainActivity = plus.android.newObject("com.pansoft.oilgas.gaodenavigation.MainActivity");
var appInterface = plus.android.newObject("com.pansoft.oilgas.gaodenavigation.Test");
plus.android.invoke(appInterface,"test",mainActivity);
}

这样吗?通过plus.android.newObject创建一个MainActivity对象,如果通过这个对象调用MainActivity中的static方法是ok的,但是作为参数传入其他Java对象(这里强调是使用原生开发的对象),就蔫了。
plus.android.importClass怎么样呢?


function getInfo() {

    <!--var mainActivity = plus.android.newObject("com.pansoft.oilgas.gaodenavigation.MainActivity");-->
var mainActivity= plus.android.importClass("com.pansoft.oilgas.gaodenavigation.MainActivity");
var appInterface = plus.android.newObject("com.pansoft.oilgas.gaodenavigation.Test");
plus.android.invoke(appInterface,"test",mainActivity);
}

也是不行啊!

在开发过程中,通常仅仅需要使用MainActivity,这里讲述一下,传递MainActivity对象

function getInfo() {

    var main = plus.android.runtimeMainActivity();

var appInterface = plus.android.newObject("com.pansoft.oilgas.gaodenavigation.Test");
plus.android.invoke(appInterface,"test",main);
}

对于将main作为创建其他对象的参数也是ok的!

版权声明: 举报

相关文章推荐

WebApp方式集成5+ sdk

WebApp方式集成5+ sdk的方式集成webview界面的时候,一般都需要我们自己添加一个原生的title。直接上代码 public class SDK_WebApp extends Activi...

数字天堂HBuilder+MUI(三)Native.js指南

Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。 如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

MUI_5+SDK_Native.js

5+SDK提供丰富的API以此来访问Native层的对象/方法,本篇主要功能实现html层调用native层的自定义方法以及从html层调转到指定的Activity 涉及到Html5+方法: ...
  • zcmain
  • zcmain
  • 2016-04-20 19:01
  • 1933

Hbuilder实用技巧

1、文件追踪 Q:怎么实现代码追踪? A:在编辑代码时经常会出现需要跳转到引用文件或者变量定义的地方,HBuilder提供了一个非常好用的代码追踪功能,只需要按住Alt+鼠标左键即可实现追踪。 图示:...

HBuilder实现WebApp,总结MUI使用过程中的坑和方法

MUI尝过的坑和重要知识点总结1:自带的各种标签的 样式权重过高,重写不方便(和BootStrap比较来说,BootStrap更加灵活) 2:链接跳转。常规的a标签 加href是无法跳转的,浏览器有效...

Hbuilder开发app实战-识岁05-Crypto.js实现各种js加密算法

前言 js加密,应该说做js开发的很少接触到这一块,因为很多时候都是做加密,很少有前端做加密的, 很荣幸我接触过两次,找到了crypto.js,很好的东西,可以实现各种js加密。 吐槽 吐槽下前端...
  • uikoo9
  • uikoo9
  • 2015-08-24 00:39
  • 4015

将已有H5项目用Hbuilder打包生成Android原生安装包

首先新建一个移动app项目,填写应用名称和存储位置,选择模版,完成 将其自带的文件以及文件夹删除,只保留manifest.json文件   删除后 将已有的h5项目粘贴到tests项目中 ...

前端开发APP,从HBuilder开始~

内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇崭新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等,...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)