您可使用 H5 容器完成以下操作:
点击 查看视频,查看对应的视频教程。
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/");
}
});
编译工程后,在手机上安装应用。打开应用后界面如下:
点击 查看视频,查看对应的视频教程。
在开发前端页面时,可以通过 Nebula 容器提供的 bridge,通过 JSAPI 的方式 与 Native 进行通信,获取 Native 处理的相关信息或数据。Nebula 容器内预置了部分基础的 JSAPI 能力(详情请查看 API 说明),您可以在 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 接口。
点击 查看视频,查看对应的视频教程。
构建一个自定义类 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");
}
});
编译工程后,在手机上安装应用。打开应用后界面如下:
点击 查看视频,查看对应的视频教程。
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");
}
});
编译工程后,在手机上安装应用。打开应用后界面如下:
在 Android 应用中接入 UC SDK 能够有效解决各种厂商浏览器的兼容性问题,保持比系统浏览器更低的闪退率并且性能卓越。使用 UC 内核前,您需要申请 UCKey,操作参考 添加 UC 内核。
在文档使用中是否遇到以下问题
更多建议
匿名提交