全部产品

Android 小程序自定义 View

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

升级基线

  1. 参考 mPaaS 升级指南 升级基线版本至 10.1.68.29 及以上,并添加小程序组件至工程。
  2. 使用定制的 appx 基础库,代码示例如下:
         
    1. dependencies {
    2. ···
    3. implementation ('com.mpaas.tinyapp.commonres:tinyappcommonres:1.14.2-beta4.1') {
    4. force = true
    5. }
    6. ···
    7. }

实现自定义 View

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

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

注册自定义 View

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

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

小程序调用自定义 View

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

   
  1. <mpaas-component
  2. id="mpaas-map"
  3. type="custom_map"
  4. style="{{ width: 200, height: 200 }}"
  5. />
说明
  • mpaas-component 标签为固定值,请勿修改。
  • id 为自定义 View 实例的 ID,单个小程序内请勿重复。
  • type 为自定义 View 的 type,和客户端的注册自定义 View 的第三个参数要保持一致,建议加上前缀。
  • style 里面输入宽度和高度。

MPBaseEmbedView 的回调

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

   
  1. public class MPBaseEmbedView{
  2. /**
  3. * 当自定义 View 被实例化时调用,第一个被调用的回调
  4. *
  5. * @param context
  6. * @param h5Page
  7. */
  8. public void onEmbedViewCreate(Context context, H5Page h5Page) {
  9. }
  10. /**
  11. * 获取嵌入是 View 的实例
  12. *
  13. * @param width 自定义 view 宽
  14. * @param height 自定义 view 高
  15. * @param viewId 自定义 view 自增 id,可以忽略
  16. * @param mType 固定值 "application/view",可以忽略
  17. * @param params 参数
  18. * @return
  19. */
  20. @Override
  21. public View getView(int width, int height, String viewId, String mType, Map<String, String> params) {
  22. }
  23. /**
  24. * 当自定义 View 附着在 webview 时回调
  25. *
  26. * @param width 自定义 view 宽
  27. * @param height 自定义 view 高
  28. * @param viewId 自定义 view 自增 id,可以忽略
  29. * @param mType 固定值 "application/view",可以忽略
  30. * @param params 参数
  31. */
  32. @Override
  33. public void onEmbedViewAttachedToWebView(int width, int height, String viewId, String mType, Map<String, String> params) {
  34. }
  35. /**
  36. * 当自定义 View 离开 webview 时回调
  37. *
  38. * @param width 自定义 view 宽
  39. * @param height 自定义 view 高
  40. * @param viewId 自定义 view 自增 id,可以忽略
  41. * @param mType 固定值 "application/view",可以忽略
  42. * @param params 参数
  43. */
  44. @Override
  45. public void onEmbedViewDetachedFromWebView(int width, int height, String viewId, String mType, Map<String, String> params) {
  46. }
  47. /**
  48. * 当自定义 View 销毁时回调
  49. *
  50. * @param width 自定义 view 宽
  51. * @param height 自定义 view 高
  52. * @param viewId 自定义 view 自增 id,可以忽略
  53. * @param mType 固定值 "application/view",可以忽略
  54. * @param params 参数
  55. */
  56. @Override
  57. public void onEmbedViewDestory(int width, int height, String viewId, String mType, Map<String, String> params) {
  58. }
  59. /**
  60. * 当 webview resume 时回调
  61. */
  62. @Override
  63. public void onWebViewResume() {
  64. }
  65. /**
  66. * 当 webview pause 时回调
  67. */
  68. @Override
  69. public void onWebViewPause() {
  70. }
  71. /**
  72. * 当 webview destroy 时回调
  73. */
  74. @Override
  75. public void onWebViewDestory() {
  76. }
  77. /**
  78. * 当接收到小程序端 context 指令时调用
  79. *
  80. * @param actionType 指令名称
  81. * @param data 指令参数
  82. * @param bridgeContext 回调桥
  83. */
  84. @Override
  85. public void onReceivedMessage(String actionType, JSONObject data, H5BridgeContext bridgeContext) {
  86. }
  87. /**
  88. * 当自定义 View 创建时的渲染指令
  89. *
  90. * @param data 渲染数据
  91. * @param bridgeContext 回调桥,可忽略
  92. */
  93. @Override
  94. public void onReceivedRender(JSONObject data, H5BridgeContext bridgeContext) {
  95. }
  96. }

代码示例