使用 H5 容器_Android 使用教程 - mPaaS Inside_使用教程_H5 容器和离线包

您可使用 H5 容器完成以下操作：

在应用内打开一个在线网页
前端调用 Native 接口
前端调用自定义 JSAPI
自定义H5 页面的 TitleBar
使用 UC 内核

在应用内打开一个在线网页

点击查看视频，查看对应的视频教程。

给工程添加自定义的类 MyApplication，该类继承自 Application。

初始化 mPaaS Inside。在自定义的 MyApplication 类中进行初始化，初始化方法如下：

 package com.mpaas.demo.myh5application;
 import android.app.Application;
 import android.content.Context;
 import com.alipay.mobile.framework.quinoxless.IInitCallback;
 import com.alipay.mobile.framework.quinoxless.QuinoxlessFramework;
 public class MyApplication extends Application {
 @Override
 protected void attachBaseContext(Context base) {
 super.attachBaseContext(base);
 QuinoxlessFramework.setup(this, new IInitCallback() {
 @Override
 public void onPostInit() {
 // 在这里开始使用mPaaS功能
 }
 });
 }
 @Override
 public void onCreate() {
 super.onCreate();
 QuinoxlessFramework.init();
 }
 }

在 app/src/main/AndroidManifest.xml 文件中，添加 android:name=".MyApplication"。

 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.mpaas.demo.myh5application">
     <application
         android:name=".MyApplication"
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/AppTheme">
         <activity android:name=".MainActivity">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
     </application>
 </manifest>

在 activity_main.xml 文件中，重写之前的按钮 button，将 button id 改为 start_url_btn，并进行简单样式调整。

 <?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">
     <Button
         android:id="@+id/start_url_btn"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="10dp"
         android:layout_marginLeft="10dp"
         android:layout_marginRight="10dp"
         android:layout_marginTop="20dp"
         android:background="#108EE9"
         android:gravity="center"
         android:text="启动一个在线页面"
         android:textColor="#ffffff" />
 </LinearLayout>

在 MainActivity 类重写点击按钮后的行为，实现打开蚂蚁金服金融科技官网的功能。实现代码如下所示：

         findViewById(R.id.start_url_btn).setOnClickListener(new View.OnClickListener(){
             @Override
             public void onClick(View v) {
                 MPNebula.startUrl("https://tech.antfin.com/");
             }
         });

编译工程后，在手机上安装应用。打开应用后界面如下：
点击按钮后即可应用内打开金融科技官网首页，即说明接口调用成功。至此，您已完成 在应用内打开一个在线网页。

前端调用 Native 接口

点击查看视频，查看对应的视频教程。

在开发前端页面时，可以通过 Nebula 容器提供的 bridge，通过 JSAPI 的方式与 Native 进行通信，获取 Native 处理的相关信息或数据。Nebula 容器内预置了部分基础的 JSAPI 能力（详情请查看链接），您可以在 H5 页面的 js 文件中，直接通过 AlipayJSBridge.call 的方式进行调用。示例如下：
```
 AlipayJSBridge.call('alert', {
   title: '原生 Alert Dialog',
   message: '这是一个来自原生的 Alert Dialog',
   button: '确定'
 }, function (e) {
   alert("点击了按钮");
 });
```
说明：https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html 是已经写好的前端页面，您可以调用此页面以体验前端调用Native接口的功能。

在 activity_main.xml 文件中，新增按钮 button， button id 改为 h5_to_native_btn。

 <Button
     android:id="@+id/h5_to_native_btn"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="10dp"
     android:background="#108EE9"
     android:gravity="center"
     android:text="前端调用Native"
     android:textColor="#ffffff" />

在 MainActivity 类定义点击按钮 h5_to_native_btn 后的行为，实现打开前端页面的功能。实现代码如下所示：

 findViewById(R.id.h5_to_native_btn).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         MPNebula.startUrl("https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html");
     }
 });

编译工程后，在手机上安装应用。打开应用后界面如下：
点击按钮后即可打开前端页面，点击按钮 显示原生 Alert Dialog，会弹出原生的警示框，警示框的标题是 原生 Alert Dialog，消息框的内容是 这是一个来自原生的 Alert Dialog ；点击警示框的确定按钮，会再弹出一个无标题警示框，内容是 点击了按钮。说明接口调用成功。至此，您已完成 前端调用 Native 接口。

前端调用自定义 JSAPI

点击查看视频，查看对应的视频教程。

构建一个自定义类 MyJSApiPlugin，用来定义自定义的 JSAPI。

 package com.mpaas.demo;
 import com.alibaba.fastjson.JSONObject;
 import com.alipay.mobile.h5container.api.H5BridgeContext;
 import com.alipay.mobile.h5container.api.H5Event;
 import com.alipay.mobile.h5container.api.H5EventFilter;
 import com.alipay.mobile.h5container.api.H5SimplePlugin;
 public class MyJSApiPlugin extends H5SimplePlugin {
     private static final String API = "myapi";
     @Override
     public void onPrepare(H5EventFilter filter) {
         super.onPrepare(filter);
         filter.addAction(API);
     }
     @Override
     public boolean handleEvent(H5Event event, H5BridgeContext context) {
         String action = event.getAction();
         if (API.equalsIgnoreCase(action)) {
             JSONObject params = event.getParam();
             String param1 = params.getString("param1");
             String param2 = params.getString("param2");
             JSONObject result = new JSONObject();
             result.put("success", true);
             result.put("message", API + " with " + param1 + "," + param2 + " was handled by native.");
             context.sendBridgeResult(result);
             return true;
         }
         return false;
     }
 }

在工程中注册自定义的 JSAPI——MyJSApiPlugin。推荐在应用启动的时候注册。此处我们注册在 MyApplication 中。

 public class MyApplication extends Application {
         @Override
         protected void attachBaseContext(Context base) {
             super.attachBaseContext(base);
             // 建议判断下是否主进程，只在主进程初始化
             QuinoxlessFramework.setup(this, new IInitCallback() {
                 @Override
                 public void onPostInit() {
                     // 在这里开始使用mPaaS功能
         //调用registerCustomJsapi()完成自定义 JSAPI的注册。
                     registerCustomJsapi();
                 }
             });
         }
     @Override
     public void onCreate() {
         super.onCreate();
         QuinoxlessFramework.init();
     }
     private void registerCustomJsapi(){
         MPNebula.registerH5Plugin(
                 // 插件的 class name
                 MyJSApiPlugin.class.getName(),
                 // 填空即可
                 "",
                 // 作用范围，填"page"即可
                 "page",
                 // 注册的 jsapi 名称
                 new String[]{"myapi"});
     }
 }

在前端页面中，调用该自定义 JSAPI。示例如下：
```
 AlipayJSBridge.call('myapi', {
   param1: 'JsParam1',
   param2: 'JsParam2'
 }, function (result) {
   alert(JSON.stringify(result));
 });
```
说明：https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_all/nebula/fallback/custom_jsapi.html 是已经写好的前端页面，您可以调用此页面以体验前端调用自定义 JSAPI 接口的功能。

在 activity_main.xml 文件中，新增按钮 button， button id 为 custom_jsapi_btn。

 <Button
     android:id="@+id/custom_jsapi_btn"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="10dp"
     android:background="#108EE9"
     android:gravity="center"
     android:text="自定义 JSAPI"
     android:textColor="#ffffff" />

在 MainActivity 类定义点击按钮 custom_jsapi_btn 后的行为，实现前端调用自定义 JSAPI 接口的功能。实现代码如下所示：

 findViewById(R.id.custom_jsapi_btn).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         MPNebula.startUrl("https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_all/nebula/fallback/custom_jsapi.html");
     }
 });

编译工程后，在手机上安装应用。打开应用后界面如下：
点击按钮后即可打开前端页面，点击按钮 自定义 JSAPI，会打开包含了一个按钮 自定义 JSAPI 的前端页面。点击该 自定义 JSAPI 按钮，会再弹出一个无标题警示框，内容按照自定义 API 定义的功能处理了的前端调用时传入的参数。至此，您已完成 前端调用自定义 JSAPI 接口。

自定义H5 页面的 TitleBar

点击查看视频，查看对应的视频教程。

H5 容器提供方法可以设置自定义的标题栏，您可以继承 mPaaS 提供的默认标题栏 MpaasDefaultH5TitleView，然后根据自己的需求，重写其中的一些方法。当然，您也可以自己实现 H5TitleView。在本教程中我们使用 MpaasDefaultH5TitleView。

构建一个 H5ViewProvider 实现类，在 createTitleView 方法中返回您定义的 H5TitleView。

 package com.mpaas.demo.myh5application;
 import android.content.Context;
 import android.view.ViewGroup;
 import com.alipay.mobile.nebula.provider.H5ViewProvider;
 import com.alipay.mobile.nebula.view.H5NavMenuView;
 import com.alipay.mobile.nebula.view.H5PullHeaderView;
 import com.alipay.mobile.nebula.view.H5TitleView;
 import com.alipay.mobile.nebula.view.H5WebContentView;
 import com.mpaas.nebula.adapter.view.MpaasDefaultH5TitleView;
 public class H5ViewProviderImpl implements H5ViewProvider {
     @Override
     public H5TitleView createTitleView(Context context) {
         return new MpaasDefaultH5TitleView(context);
     }
     @Override
     public H5NavMenuView createNavMenu() {
         return null;
     }
     @Override
     public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
         return null;
     }
     @Override
     public H5WebContentView createWebContentView(Context context) {
         return null;
     }
 }

在 activity_main.xml 文件中，新增按钮 button， button id 为 custom_title_btn。

 <Button
     android:id="@+id/custom_title_btn"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="10dp"
     android:background="#108EE9"
     android:gravity="center"
     android:text="自定义 Title"
     android:textColor="#ffffff" />

在 MainActivity 类定义点击按钮 custom_title_btn 后的行为，将自定义 View Provider 设给容器，并打开一个在线网页。实现代码如下所示：

 findViewById(R.id.custom_title_btn).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         // 设置自定义 title（设置一次即可）
         MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
         // 随意启动一个地址，title 已经改变
         MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
     }
 });

编译工程后，在手机上安装应用。打开应用后界面如下：
点击按钮 自定义TITLE，自定义 JSAPI，会打开在线网页，可以看到此页面的 titlebar 的颜色、字体颜色都发生了变化。至此，您已完成 自定义H5 页面的 TitleBar。
- 自定义 TitleBar 之前
- 自定义 TitleBar 之后

使用 UC 内核

在 Android 应用中接入 UC SDK 能够有效解决各种厂商浏览器的兼容性问题，保持比系统浏览器更低闪退率并且性能卓越。使用 UC 内核前，您需要申请 UCKey，操作参考添加 UC 内核。