全部产品

使用 H5 容器

更新时间:2020-11-04 16:43:00

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

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

  1. 给工程添加自定义的类 MyApplication,该类继承自 Application
    11
  2. 在自定义的 MyApplication 类中进行初始化,初始化方法如下:

    1. @Override
    2. protected void attachBaseContext(Context base) {
    3. super.attachBaseContext(base);
    4. QuinoxlessFramework.setup(this, new IInitCallback() {
    5. @Override
    6. public void onPostInit() {
    7. // 在这里开始使用mPaaS功能
    8. }
    9. });
    10. }
    11. @Override
    12. public void onCreate() {
    13. super.onCreate();
    14. QuinoxlessFramework.init();
    15. }
  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.example.h5application">
    4. <application
    5. android:name=".MyApplication"
    6. android:allowBackup="true"
    7. android:icon="@mipmap/ic_launcher"
    8. android:label="@string/app_name"
    9. android:roundIcon="@mipmap/ic_launcher_round"
    10. android:supportsRtl="true"
    11. android:theme="@style/AppTheme">
    12. <activity android:name=".MainActivity">
    13. <intent-filter>
    14. <action android:name="android.intent.action.MAIN" />
    15. <category android:name="android.intent.category.LAUNCHER" />
    16. </intent-filter>
    17. </activity>
    18. </application>
    19. </manifest>
  4. activity_main.xml 文件中,重新设置 Button 样式并修改 Button 的 id 为 start_url_btn

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. xmlns:tools="http://schemas.android.com/tools"
    5. android:layout_width="match_parent"
    6. android:layout_height="match_parent"
    7. tools:context=".MainActivity">
    8. <Button
    9. android:id="@+id/start_url_btn"
    10. android:layout_width="match_parent"
    11. android:layout_height="wrap_content"
    12. android:layout_marginTop="40dp"
    13. android:background="#108EE9"
    14. android:gravity="center"
    15. android:text="启动一个在线页面"
    16. android:textColor="#ffffff"
    17. app:layout_constraintEnd_toEndOf="parent"
    18. app:layout_constraintHorizontal_bias="0.0"
    19. app:layout_constraintStart_toStartOf="parent"
    20. app:layout_constraintTop_toTopOf="parent" />
    21. </androidx.constraintlayout.widget.ConstraintLayout>
  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. 在工程主 Module 下的 build.gradle(:app) 中添加以下配置:
    34

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

前端调用 Native 接口

  1. 在开发前端页面时,可以通过 Nebula 容器提供的 bridge,通过 JSAPI 的方式 与 Native 进行通信,获取 Native 处理的相关信息或数据。Nebula 容器内预置了部分基础的 JSAPI 能力(详情请查看 链接),您可以在 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_marginTop="20dp"
    6. android:background="#108EE9"
    7. android:gravity="center"
    8. android:text="前端调用Native"
    9. android:textColor="#ffffff"
    10. app:layout_constraintEnd_toEndOf="parent"
    11. app:layout_constraintHorizontal_bias="0.0"
    12. app:layout_constraintStart_toStartOf="parent"
    13. app:layout_constraintTop_toBottomOf="@+id/start_url_btn" />
  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. 编译工程后,在手机上安装应用。打开应用后界面如下:
    15

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

    17

    18

前端调用自定义 JSAPI

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

    1. package com.example.h5application;
    2. import com.alibaba.fastjson.JSONObject;
    3. import com.alipay.mobile.h5container.api.H5BridgeContext;
    4. import com.alipay.mobile.h5container.api.H5Event;
    5. import com.alipay.mobile.h5container.api.H5EventFilter;
    6. import com.alipay.mobile.h5container.api.H5SimplePlugin;
    7. public class MyJSApiPlugin extends H5SimplePlugin {
    8. private static final String API = "myapi";
    9. @Override
    10. public void onPrepare(H5EventFilter filter) {
    11. super.onPrepare(filter);
    12. filter.addAction(API);
    13. }
    14. @Override
    15. public boolean handleEvent(H5Event event, H5BridgeContext context) {
    16. String action = event.getAction();
    17. if (API.equalsIgnoreCase(action)) {
    18. JSONObject params = event.getParam();
    19. String param1 = params.getString("param1");
    20. String param2 = params.getString("param2");
    21. JSONObject result = new JSONObject();
    22. result.put("success", true);
    23. result.put("message", API + " with " + param1 + "," + param2 + " was handled by native.");
    24. context.sendBridgeResult(result);
    25. return true;
    26. }
    27. return false;
    28. }
    29. }
  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. }
    15. @Override
    16. public void onCreate() {
    17. super.onCreate();
    18. QuinoxlessFramework.init();
    19. }
    20. private void registerCustomJsapi(){
    21. MPNebula.registerH5Plugin(
    22. // 插件的 class name
    23. MyJSApiPlugin.class.getName(),
    24. // 填空即可
    25. "",
    26. // 作用范围,填"page"即可
    27. "page",
    28. // 注册的 jsapi 名称
    29. new String[]{"myapi"});
    30. }
    31. }
  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 idcustom_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_marginTop="20dp"
    6. android:background="#108EE9"
    7. android:gravity="center"
    8. android:text="自定义 JSAPI"
    9. android:textColor="#ffffff"
    10. app:layout_constraintEnd_toEndOf="parent"
    11. app:layout_constraintHorizontal_bias="1.0"
    12. app:layout_constraintStart_toStartOf="parent"
    13. app:layout_constraintTop_toBottomOf="@+id/h5_to_native_btn" />
  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. 编译工程后,在手机上安装应用。打开应用后界面如下:
    18

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

    20

自定义 H5 页面的 TitleBar

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

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

    1. package com.example.h5application;
    2. import android.content.Context;
    3. import android.view.ViewGroup;
    4. import com.alipay.mobile.nebula.provider.H5ViewProvider;
    5. import com.alipay.mobile.nebula.view.H5NavMenuView;
    6. import com.alipay.mobile.nebula.view.H5PullHeaderView;
    7. import com.alipay.mobile.nebula.view.H5TitleView;
    8. import com.alipay.mobile.nebula.view.H5WebContentView;
    9. import com.mpaas.nebula.adapter.view.MpaasDefaultH5TitleView;
    10. public class H5ViewProviderImpl implements H5ViewProvider {
    11. @Override
    12. public H5TitleView createTitleView(Context context) {
    13. return new MpaasDefaultH5TitleView(context);
    14. }
    15. @Override
    16. public H5NavMenuView createNavMenu() {
    17. return null;
    18. }
    19. @Override
    20. public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
    21. return null;
    22. }
    23. @Override
    24. public H5WebContentView createWebContentView(Context context) {
    25. return null;
    26. }
    27. }
  2. activity_main.xml 文件中,新增按钮 button, button idcustom_title_btn

    1. <Button
    2. <Button
    3. android:id="@+id/custom_title_btn_before"
    4. android:layout_width="match_parent"
    5. android:layout_height="wrap_content"
    6. android:layout_marginTop="20dp"
    7. android:background="#108EE9"
    8. android:gravity="center"
    9. android:text="自定义 Title 之前"
    10. android:textColor="#ffffff"
    11. app:layout_constraintEnd_toEndOf="parent"
    12. app:layout_constraintStart_toStartOf="parent"
    13. app:layout_constraintTop_toBottomOf="@+id/custom_jsapi_btn" />
    14. <Button
    15. android:id="@+id/custom_title_btn_after"
    16. android:layout_width="match_parent"
    17. android:layout_height="wrap_content"
    18. android:layout_marginTop="20dp"
    19. android:background="#108EE9"
    20. android:gravity="center"
    21. android:text="自定义 Title 之后"
    22. android:textColor="#ffffff"
    23. app:layout_constraintEnd_toEndOf="parent"
    24. app:layout_constraintHorizontal_bias="0.0"
    25. app:layout_constraintStart_toStartOf="parent"
    26. app:layout_constraintTop_toBottomOf="@+id/custom_title_btn_before" />
  3. MainActivity 类定义点击按钮 custom_title_btn 后的行为,将自定义 View Provider 设给容器,并打开一个在线网页。实现代码如下所示:

    1. findViewById(R.id.custom_title_btn_before).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
    5. }
    6. });
    7. findViewById(R.id.custom_title_btn_after).setOnClickListener(new View.OnClickListener() {
    8. @Override
    9. public void onClick(View v) {
    10. // 设置自定义 title(设置一次即可)
    11. MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
    12. // 随意启动一个地址,title 已经改变
    13. MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
    14. }
    15. });
  4. 编译工程后,在手机上安装应用。打开应用后界面如下:
    24

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

使用 UC 内核

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

代码示例

点此下载 此教程中使用的代码示例。