阿里云首页 移动开发平台 mPaaS 相关技术圈

使用 H5 容器

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

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

  1. 给工程添加自定义的类 MyApplication,该类继承自 Application11

  2. 在自定义的 MyApplication 类中进行初始化,初始化方法如下:

         @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();
         }
  3. 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.example.h5application">
    
         <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>
  4. activity_main.xml 文件中,重新设置 Button 样式并修改 Button 的 id 为 start_url_btn

     <?xml version="1.0" encoding="utf-8"?>
     <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context=".MainActivity">
    
         <Button
             android:id="@+id/start_url_btn"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginTop="40dp"
             android:background="#108EE9"
             android:gravity="center"
             android:text="启动一个在线页面"
             android:textColor="#ffffff"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
    
     </androidx.constraintlayout.widget.ConstraintLayout>
  5. MainActivity 类重写单击按钮事件,实现打开 蚂蚁科技 官网的功能。实现代码如下所示:

             findViewById(R.id.start_url_btn).setOnClickListener(new View.OnClickListener(){
                 @Override
                 public void onClick(View v) {
                     MPNebula.startUrl("https://tech.antfin.com/");
                 }
             });
  6. 在工程主 Module 下的 build.gradle(:app) 中添加以下配置:34

  7. 编译工程后,在手机上安装应用。打开应用后界面如下:12

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

前端调用 Native 接口

  1. 在开发前端页面时,可以通过 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 接口的功能。

  2. 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_marginTop="20dp"
         android:background="#108EE9"
         android:gravity="center"
         android:text="前端调用Native"
         android:textColor="#ffffff"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/start_url_btn" />
  3. 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");
             }
         });
  4. 编译工程后,在手机上安装应用。打开应用后界面如下:15

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

    1718

前端调用自定义 JSAPI

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

     package com.example.h5application;
    
     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;
         }
     }
  2. 在工程中注册自定义的 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"});
         }
     }
  3. 在前端页面中,调用该自定义 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 接口的功能。

  4. activity_main.xml 文件中,新增按钮 button,button idcustom_jsapi_btn

     <Button
         android:id="@+id/custom_jsapi_btn"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="20dp"
         android:background="#108EE9"
         android:gravity="center"
         android:text="自定义 JSAPI"
         android:textColor="#ffffff"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/h5_to_native_btn" />
  5. 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");
         }
     });
  6. 编译工程后,在手机上安装应用。打开应用后界面如下:18

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

    20

自定义 H5 页面的 TitleBar

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

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

     package com.example.h5application;
    
     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;
         }
     }
  2. activity_main.xml 文件中,新增按钮 button, button idcustom_title_btn

     <Button
     <Button
         android:id="@+id/custom_title_btn_before"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="20dp"
         android:background="#108EE9"
         android:gravity="center"
         android:text="自定义 Title 之前"
         android:textColor="#ffffff"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/custom_jsapi_btn" />
    
     <Button
         android:id="@+id/custom_title_btn_after"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="20dp"
         android:background="#108EE9"
         android:gravity="center"
         android:text="自定义 Title 之后"
         android:textColor="#ffffff"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/custom_title_btn_before" />
  3. MainActivity 类定义单击按钮 custom_title_btn 后的行为,将自定义 View Provider 设给容器,并打开一个在线网页。实现代码如下所示:

         findViewById(R.id.custom_title_btn_before).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 MPNebula.startUrl("https://www.cloud.alipay.com/docs/2/49549");
             }
         });
         findViewById(R.id.custom_title_btn_after).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");
             }
         });
  4. 编译工程后,在手机上安装应用。打开应用后界面如下:

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

    • 自定义 TitleBar 之前

      25
    • 自定义 TitleBar 之后

      25

使用 UC 内核

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

代码示例

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