阿里云首页 移动开发平台 mPaaS

iOS 小程序支持自定义 View

自 mPaaS 10.1.68.36 起,小程序支持自定义 View 功能。

操作步骤

  1. 继承 NBComponent 接口。

    1. @interface CustomTestView : NBComponent
  2. 重写以下方法,返回 init 中创建的 View。

    1. - (id)initWithConfig:(NSDictionary *)config messageDelegate:(id<NBComponentMessageDelegate>)messageDelegate {
    2. self = [super initWithConfig:config messageDelegate:messageDelegate];
    3. if (self) {
    4. self.contentSpaceView = [[UIView alloc] init];
    5. self.contentSpaceView.backgroundColor = [UIColor orangeColor];
    6. self.contentSpaceView.frame = CGRectMake(0, 0, 100, 100);
    7. UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(postMessage)];
    8. [self.contentSpaceView addGestureRecognizer:tap];
    9. }
    10. return self;
    11. }
    1. //返回 init 中创建的 View
    2. - (UIView *)contentView {
    3. return self.contentSpaceView;
    4. }
  3. 接收小程序传来的消息。

    1. - (void)componentReceiveMessage:(NSString *)message data:(NSDictionary *)data callback:(NBComponentCallback)callback {
    2. if ([message isEqualToString:@"setColor"]) {
    3. callback(@{@"success":@"1"});
    4. }else if ([message isEqualToString:@"startAnimation"]) {
    5. [self.nbComponentMessageDelegate sendCustomEventMessage:@"nbcomponent.mpaasComponent.customEvent" component:self data:@{@"sth":@"start"} callback:^(NSDictionary * _Nonnull data) {
    6. }];
    7. }
    8. }
  4. 发送消息给小程序。

    1. [self.nbComponentMessageDelegate sendCustomEventMessage:@"nbcomponent.mpaasComponent.customEvent" component:self data:@{
    2. @"element":@"elementId",
    3. @"eventName":@"onXxx",
    4. @"data":{}
    5. } callback:^(NSDictionary * _Nonnull data) {
    6. }];

    参数说明如下:

    参数 说明
    element 标签里的 ID。
    eventName 对应的 event,以 on 开头。
    data 自定义事件参数。
  5. 注册自定义 View。

    1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    2. [[PSDService sharedInstance] registerComponentWithName:@"componentName" clsName:@"className"];
    3. }
  6. 小程序调用自定义 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 参数 componentName 要保持一致,建议加上前缀。
    style 设置宽度和高度。
  7. 小程序自定义参数。

    1. <mpaas-component
    2. id="mpaas-map"
    3. type="custom_map"
    4. style="{{ width: 200, height: 200 }}"
    5. color="#FFFF00FF"
    6. ···
    7. />
    注意
    • color 为自定义渲染参数,也可以对其任意命名。
    • id、type、style 为默认字段,请勿使用这些字段作为自定义 View 的自定义渲染参数。
    • 自定义渲染参数不可以 on 开头,类型不可以是 func。
  8. 客户端接收自定义参数。

    1. - (void)componentDataWillChangeWithData:(NSDictionary *)data {
    2. }
    3. - (void)componentDataDidChangeWithData:(NSDictionary *)data {
    4. }

其他组件内方法

  1. ```objectivec
  2. // self.nbComponentMessageDelegate 方法
  3. @protocol NBComponentMessageDelegate <NSObject>
  4. @required
  5. /**
  6. * 组件主动发送消息给页面(Native->Page)
  7. *
  8. * @param message 消息名称
  9. * @param component 要发送消息的组件
  10. * @param data 消息内容
  11. * @param callback 页面处理完消息后的回调
  12. *
  13. * @return void
  14. */
  15. - (void)sendMessage:(NSString *)message
  16. component:(id<NBComponentProtocol>)component
  17. data:(NSDictionary *)data
  18. callback:(NBComponentCallback)callback;
  19. @optional
  20. /**
  21. * 组件可以在执行环境中直接执行JS
  22. *
  23. * @param javaScriptString 需要执行的JS
  24. * @param completionHandler 执行回调函数
  25. *
  26. * @return void
  27. */
  28. - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
  29. /**
  30. * 组件主动发送消息给页面(Native->Page)
  31. *
  32. * @param message 消息名称(内部不处理message)
  33. * @param component 要发送消息的组件
  34. * @param data 消息内容
  35. * @param callback 页面处理完消息后的回调
  36. *
  37. * @return void
  38. */
  39. - (void)sendCustomEventMessage:(NSString *)message
  40. component:(id<NBComponentProtocol>)component
  41. data:(NSDictionary *)data
  42. callback:(NBComponentCallback)callback;
  43. @end
  44. @protocol NBComponentLifeCycleProtocol <NSObject>
  45. - (void)componentWillAppear;
  46. - (void)componentDidAppear;
  47. /**
  48. * 组件将要销毁
  49. *
  50. * @return void
  51. */
  52. - (void)componentWillDestory;
  53. /**
  54. * 组件销毁之后
  55. *
  56. * @return void
  57. */
  58. - (void)componentDidDestory;
  59. - (void)componentWillResume;
  60. - (void)componentDidResume;
  61. - (void)componentWillPause;
  62. - (void)componentDidPause;
  63. //fullscreen
  64. /**
  65. component即将进入全屏的回调
  66. */
  67. - (void)componentWillEnterFullScreen;
  68. /**
  69. component进入全屏的回调
  70. */
  71. - (void)componentWillExitFullScreen;
  72. /**
  73. component即将退出全屏的回调
  74. */
  75. - (void)componentDidEnterFullScreen;
  76. /**
  77. component退出全屏的回调
  78. */
  79. - (void)componentDidExitFullScreen;
  80. //visiblity
  81. /**
  82. component即将退出全屏的回调
  83. */
  84. - (void)componentDidHidden;
  85. /**
  86. component退出全屏的回调
  87. */
  88. - (void)componentDidVisiblity;
  89. @end
  90. @protocol NBComponentDataProtocol <NSObject>
  91. /**
  92. * 组件数据将要更新
  93. *
  94. * @param data 数据内容
  95. *
  96. * @return void
  97. */
  98. - (void)componentDataWillChangeWithData:(NSDictionary *)data;
  99. /**
  100. * 组件数据已经更新,这时候一般是要作界面更新,或者组件的其他操作
  101. *
  102. * @param data 数据内容
  103. *
  104. * @return void
  105. */
  106. - (void)componentDataDidChangeWithData:(NSDictionary *)data;
  107. @end
  108. @protocol NBComponentFullScreenProtocol <NSObject>
  109. /**
  110. 是否处于全屏模式
  111. @return 是否处于全屏模式
  112. */
  113. - (BOOL)isFullScreen;
  114. /**
  115. @return 是否需要进入全屏模
  116. */
  117. - (BOOL)shouldEnterFullScreen;
  118. /**
  119. 设置ContentView是否需要全屏幕,业务通过换个来切换全屏模式
  120. @param fullScreen 是否需要全屏幕
  121. @param shouldRotate 是否需要旋转屏幕
  122. */
  123. - (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
  124. @end
  125. @protocol NBComponentVisibilityProtocol <NSObject>
  126. /**
  127. visibilityState状态
  128. @return VisibilityState状态
  129. */
  130. - (NBComponentVisibilityState)visibilityState;
  131. /**
  132. 设置VisibilityState状态
  133. @param state VisibilityState
  134. @return 是否设置成功
  135. */
  136. - (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
  137. /**
  138. 业务重写此方法给出是否需要监听visibility变化,默认是NO
  139. @return 是否需要监听visibility变化
  140. */
  141. - (BOOL)shouldObServerVisibilityStateChange;
  142. @end
  143. ```