全部产品

使用 H5 容器

更新时间:2020-10-15 16:27:33

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

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

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

  1. 给工程添加自定义的类 MyApplication,该类继承自 Application
    编写代码step04
  2. 初始化 mPaaS Inside。在自定义的 MyApplication 类中进行初始化,初始化方法如下:

    1. package com.mpaas.demo.myh5application;
    2. import android.app.Application;
    3. import android.content.Context;
    4. import com.alipay.mobile.framework.quinoxless.IInitCallback;
    5. import com.alipay.mobile.framework.quinoxless.QuinoxlessFramework;
    6. public class MyApplication extends Application {
    7. @Override
    8. protected void attachBaseContext(Context base) {
    9. super.attachBaseContext(base);
    10. QuinoxlessFramework.setup(this, new IInitCallback() {
    11. @Override
    12. public void onPostInit() {
    13. // 在这里开始使用mPaaS功能
    14. }
    15. });
    16. }
    17. @Override
    18. public void onCreate() {
    19. super.onCreate();
    20. QuinoxlessFramework.init();
    21. }
    22. }
  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">
    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. <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">
    6. <Button
    7. android:id="@+id/start_url_btn"
    8. android:layout_width="match_parent"
    9. android:layout_height="wrap_content"
    10. android:layout_marginBottom="10dp"
    11. android:layout_marginLeft="10dp"
    12. android:layout_marginRight="10dp"
    13. android:layout_marginTop="20dp"
    14. android:background="#108EE9"
    15. android:gravity="center"
    16. android:text="启动一个在线页面"
    17. android:textColor="#ffffff" />
    18. </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 能力(详情请查看 链接),您可以在 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;
    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_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;
    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. 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 内核