使用 H5 容器

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

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

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

  1. 给工程添加自定义的类 MyApplication，该类继承自 Application。
    编写代码step04

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

    1.  package com.mpaas.demo.myh5application;
    3.  import android.app.Application;
    4.  import android.content.Context;
    6.  import com.alipay.mobile.framework.quinoxless.IInitCallback;
    7.  import com.alipay.mobile.framework.quinoxless.QuinoxlessFramework;
    9.  public class MyApplication extends Application {
    10.  @Override
    11.  protected void attachBaseContext(Context base) {
    12.  super.attachBaseContext(base);
    13.  QuinoxlessFramework.setup(this, new IInitCallback() {
    14.  @Override
    15.  public void onPostInit() {
    16.  // 在这里开始使用mPaaS功能
    17.  }
    18.  });
    19.  }
    21.  @Override
    22.  public void onCreate() {
    23.  super.onCreate();
    24.  QuinoxlessFramework.init();
    25.  }
    26.  }

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

    1.  <?xml version="1.0" encoding="utf-8"?>
    2.  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    3.      package="com.mpaas.demo.myh5application">
    5.      <application
    6.          android:name=".MyApplication"
    7.          android:allowBackup="true"
    8.          android:icon="@mipmap/ic_launcher"
    9.          android:label="@string/app_name"
    10.          android:roundIcon="@mipmap/ic_launcher_round"
    11.          android:supportsRtl="true"
    12.          android:theme="@style/AppTheme">
    13.          <activity android:name=".MainActivity">
    14.              <intent-filter>
    15.                  <action android:name="android.intent.action.MAIN" />
    17.                  <category android:name="android.intent.category.LAUNCHER" />
    18.              </intent-filter>
    19.          </activity>
    20.      </application>
    22.  </manifest>

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

    1.  <?xml version="1.0" encoding="utf-8"?>
    2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.      android:layout_width="match_parent"
    4.      android:layout_height="match_parent"
    5.      android:orientation="vertical">
    7.      <Button
    8.          android:id="@+id/start_url_btn"
    9.          android:layout_width="match_parent"
    10.          android:layout_height="wrap_content"
    11.          android:layout_marginBottom="10dp"
    12.          android:layout_marginLeft="10dp"
    13.          android:layout_marginRight="10dp"
    14.          android:layout_marginTop="20dp"
    15.          android:background="#108EE9"
    16.          android:gravity="center"
    17.          android:text="启动一个在线页面"
    18.          android:textColor="#ffffff" />
    20.  </LinearLayout>

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

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

  6. 编译工程后，在手机上安装应用。打开应用后界面如下：

  7. 点击按钮后即可应用内打开金融科技官网首页，即说明接口调用成功。至此，您已完成 在应用内打开一个在线网页。

前端调用 Native 接口

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

  1. 在开发前端页面时，可以通过 Nebula 容器提供的 bridge，通过 JSAPI 的方式 与 Native 进行通信，获取 Native 处理的相关信息或数据。Nebula 容器内预置了部分基础的 JSAPI 能力（详情请查看 API 说明），您可以在 H5 页面的 js 文件中，直接通过 AlipayJSBridge.call 的方式进行调用。示例如下：

    1.  AlipayJSBridge.call('alert', {
    2.    title: '原生 Alert Dialog',
    3.    message: '这是一个来自原生的 Alert Dialog',
    4.    button: '确定'
    5.  }, function (e) {
    6.    alert("点击了按钮");
    7.  });
    说明：https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html 是已经写好的前端页面，您可以调用此页面以体验前端调用 Native 接口的功能。

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

    1.  <Button
    2.      android:id="@+id/h5_to_native_btn"
    3.      android:layout_width="match_parent"
    4.      android:layout_height="wrap_content"
    5.      android:layout_margin="10dp"
    6.      android:background="#108EE9"
    7.      android:gravity="center"
    8.      android:text="前端调用Native"
    9.      android:textColor="#ffffff" />

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

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

  4. 编译工程后，在手机上安装应用。打开应用后界面如下：

  5. 点击按钮后即可打开前端页面，点击按钮 显示原生 Alert Dialog，会弹出原生的警示框，警示框的标题是 原生 Alert Dialog，消息框的内容是 这是一个来自原生的 Alert Dialog ；点击警示框的 确定 按钮，会再弹出一个无标题警示框，内容是 点击了按钮。说明接口调用成功。至此，您已完成 前端调用 Native 接口。

前端调用自定义 JSAPI

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

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

    1.  package com.mpaas.demo;
    3.  import com.alibaba.fastjson.JSONObject;
    4.  import com.alipay.mobile.h5container.api.H5BridgeContext;
    5.  import com.alipay.mobile.h5container.api.H5Event;
    6.  import com.alipay.mobile.h5container.api.H5EventFilter;
    7.  import com.alipay.mobile.h5container.api.H5SimplePlugin;
    9.  public class MyJSApiPlugin extends H5SimplePlugin {
    11.      private static final String API = "myapi";
    13.      @Override
    14.      public void onPrepare(H5EventFilter filter) {
    15.          super.onPrepare(filter);
    16.          filter.addAction(API);
    17.      }
    19.      @Override
    20.      public boolean handleEvent(H5Event event, H5BridgeContext context) {
    21.          String action = event.getAction();
    22.          if (API.equalsIgnoreCase(action)) {
    23.              JSONObject params = event.getParam();
    24.              String param1 = params.getString("param1");
    25.              String param2 = params.getString("param2");
    26.              JSONObject result = new JSONObject();
    27.              result.put("success", true);
    28.              result.put("message", API + " with " + param1 + "," + param2 + " was handled by native.");
    29.              context.sendBridgeResult(result);
    30.              return true;
    31.          }
    32.          return false;
    33.      }
    35.  }

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

    1.  public class MyApplication extends Application {
    2.          @Override
    3.          protected void attachBaseContext(Context base) {
    4.              super.attachBaseContext(base);
    5.              // 建议判断下是否主进程，只在主进程初始化
    6.              QuinoxlessFramework.setup(this, new IInitCallback() {
    7.                  @Override
    8.                  public void onPostInit() {
    9.                      // 在这里开始使用mPaaS功能
    10.          //调用registerCustomJsapi()完成自定义 JSAPI的注册。
    11.                      registerCustomJsapi();
    12.                  }
    13.              });
    14.          }
    16.      @Override
    17.      public void onCreate() {
    18.          super.onCreate();
    19.          QuinoxlessFramework.init();
    20.      }
    22.      private void registerCustomJsapi(){
    23.          MPNebula.registerH5Plugin(
    24.                  // 插件的 class name
    25.                  MyJSApiPlugin.class.getName(),
    26.                  // 填空即可
    27.                  "",
    28.                  // 作用范围，填"page"即可
    29.                  "page",
    30.                  // 注册的 jsapi 名称
    31.                  new String[]{"myapi"});
    32.      }
    33.  }

  3. 在前端页面中，调用该自定义 JSAPI。示例如下：

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

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

    1.  <Button
    2.      android:id="@+id/custom_jsapi_btn"
    3.      android:layout_width="match_parent"
    4.      android:layout_height="wrap_content"
    5.      android:layout_margin="10dp"
    6.      android:background="#108EE9"
    7.      android:gravity="center"
    8.      android:text="自定义 JSAPI"
    9.      android:textColor="#ffffff" />

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

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

  6. 编译工程后，在手机上安装应用。打开应用后界面如下：

  7. 点击按钮后即可打开前端页面，点击按钮 自定义 JSAPI，会打开包含了一个按钮 自定义 JSAPI 的前端页面。点击该 自定义 JSAPI 按钮，会再弹出一个无标题警示框，内容按照自定义 API 定义的功能处理了的前端调用时传入的参数。至此，您已完成 前端调用 自定义 JSAPI 接口。

自定义H5 页面的 TitleBar

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

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

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

    1.  package com.mpaas.demo.myh5application;
    3.  import android.content.Context;
    4.  import android.view.ViewGroup;
    6.  import com.alipay.mobile.nebula.provider.H5ViewProvider;
    7.  import com.alipay.mobile.nebula.view.H5NavMenuView;
    8.  import com.alipay.mobile.nebula.view.H5PullHeaderView;
    9.  import com.alipay.mobile.nebula.view.H5TitleView;
    10.  import com.alipay.mobile.nebula.view.H5WebContentView;
    11.  import com.mpaas.nebula.adapter.view.MpaasDefaultH5TitleView;
    13.  public class H5ViewProviderImpl implements H5ViewProvider {
    14.      @Override
    15.      public H5TitleView createTitleView(Context context) {
    16.          return new MpaasDefaultH5TitleView(context);
    17.      }
    19.      @Override
    20.      public H5NavMenuView createNavMenu() {
    21.          return null;
    22.      }
    24.      @Override
    25.      public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
    26.          return null;
    27.      }
    29.      @Override
    30.      public H5WebContentView createWebContentView(Context context) {
    31.          return null;
    32.      }
    33.  }

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

    1.  <Button
    2.      android:id="@+id/custom_title_btn"
    3.      android:layout_width="match_parent"
    4.      android:layout_height="wrap_content"
    5.      android:layout_margin="10dp"
    6.      android:background="#108EE9"
    7.      android:gravity="center"
    8.      android:text="自定义 Title"
    9.      android:textColor="#ffffff" />

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

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

  4. 编译工程后，在手机上安装应用。打开应用后界面如下：

  5. 点击按钮 自定义TITLE，自定义 JSAPI，会打开在线网页，可以看到此页面的 titlebar 的颜色、字体颜色都发生了变化。至此，您已完成 自定义H5 页面的 TitleBar。
    • 自定义 TitleBar 之前
    • 自定义 TitleBar 之后

使用 UC 内核

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