Android小程序接入自定义View-移动开发平台 mPaaS-阿里云

说明：Android 小程序的自定义 View 功能仅在 mPaaS 10.1.68.29 及以上版本中支持。

升级基线

参考 mPaaS 升级指南升级基线版本至 10.1.68.29 及以上，并添加小程序组件至工程。

使用定制的 appx 基础库，代码示例如下：

dependencies {
 ···
 implementation ('com.mpaas.tinyapp.commonres:tinyappcommonres:1.14.2-beta4.1') {
     force = true
 }
 ···
}

实现自定义 View

自定义 class 继承 MPBaseEmbedView 并实现 getView 方法，获取 Android View 返回给小程序。

public class MyTestEmbedView extends MPBaseEmbedView {
     @Override
    public View getView(int width, int height, String viewId, String mType, Map<String, String> params) {
        // 返回真正的 Android view
        return mRealView;
    }
}

注册自定义 View

请在 QuinoxlessFramework 被调用前调用 MPEmbedViewHelper.registerEmbedView 方法注册自定义 View。registerEmbedView 方法无耗时，不会影响启动性能。

MPEmbedViewHelper.registerEmbedView("com.mpaas.demo.nebula.MyTestEmbedView", "custom_map");

注意：

参数 "com.mpaas.demo.nebula.MyTestEmbedView" 表示自定义 View 的全路径，在 release 时不要混淆。
参数 “custom_map” 表示自定义 View 的 type，在小程序侧也需要填写，建议添加上前缀。

小程序调用自定义 View

小程序调用自定义 View 的代码示例如下：

<mpaas-component
  id="mpaas-map"
  type="custom_map"
  style="{{ width: 200, height: 200 }}"
/>

说明：

mpaas-component 标签为固定值，请勿修改。
id 为自定义 View 实例的 ID，单个小程序内请勿重复。
type 为自定义 View 的 type，和客户端的注册自定义 View 的第三个参数要保持一致，建议加上前缀。
style 里面输入宽度和高度。

MPBaseEmbedView 的回调

自定义 View 所有回调函数如下：

public class MPBaseEmbedView{
    /**
     * 当自定义 View  被实例化时调用，第一个被调用的回调
     *
     * @param context
     * @param h5Page
     */
    public void onEmbedViewCreate(Context context, H5Page h5Page) {
    }
    /**
     * 获取嵌入是 View 的实例
     *
     * @param width  自定义 view 宽
     * @param height 自定义 view 高
     * @param viewId 自定义 view 自增 id，可以忽略
     * @param mType  固定值 "application/view"，可以忽略
     * @param params 参数
     * @return
     */
    @Override
    public View getView(int width, int height, String viewId, String mType, Map<String, String> params) {
    }
    /**
     * 当自定义 View 附着在 webview 时回调
     *
     * @param width  自定义 view 宽
     * @param height 自定义 view 高
     * @param viewId 自定义 view 自增 id，可以忽略
     * @param mType  固定值 "application/view"，可以忽略
     * @param params 参数
     */
    @Override
    public void onEmbedViewAttachedToWebView(int width, int height, String viewId, String mType, Map<String, String> params) {
    }
    /**
     * 当自定义 View 离开 webview 时回调
     *
     * @param width  自定义 view 宽
     * @param height 自定义 view 高
     * @param viewId 自定义 view 自增 id，可以忽略
     * @param mType  固定值 "application/view"，可以忽略
     * @param params 参数
     */
    @Override
    public void onEmbedViewDetachedFromWebView(int width, int height, String viewId, String mType, Map<String, String> params) {
    }
    /**
     * 当自定义 View 销毁时回调
     *
     * @param width  自定义 view 宽
     * @param height 自定义 view 高
     * @param viewId 自定义 view 自增 id，可以忽略
     * @param mType  固定值 "application/view"，可以忽略
     * @param params 参数
     */
    @Override
    public void onEmbedViewDestory(int width, int height, String viewId, String mType, Map<String, String> params) {
    }
    /**
     * 当 webview resume 时回调
     */
    @Override
    public void onWebViewResume() {
    }
    /**
     * 当 webview pause 时回调
     */
    @Override
    public void onWebViewPause() {
    }
    /**
     * 当 webview destroy 时回调
     */
    @Override
    public void onWebViewDestory() {
    }
    /**
     * 当接收到小程序端 context 指令时调用
     *
     * @param actionType    指令名称
     * @param data          指令参数
     * @param bridgeContext 回调桥
     */
    @Override
    public void onReceivedMessage(String actionType, JSONObject data, H5BridgeContext bridgeContext) {
    }
    /**
     * 当自定义 View 创建时的渲染指令
     *
     * @param data          渲染数据
     * @param bridgeContext 回调桥，可忽略
     */
    @Override
    public void onReceivedRender(JSONObject data, H5BridgeContext bridgeContext) {
    }
}

代码示例

Android 代码示例： CustomView。
小程序代码示例：自定义组件。