All Products
Search
Document Center

iOS Mini Program supports custom View

Last Updated: Sep 01, 2021

The Mini Program supports the custom view function since mPaaS 10.1.68.36.

Procedure

  1. Inherit the NBComponent interface.

    1. @interface CustomTestView : NBComponent
  2. Rewrite the following method to return the View created in init.

    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. //Return the View created in `init`.
    2. - (UIView *)contentView {
    3. return self.contentSpaceView;
    4. }
  3. Receive messages from the Mini Program.

    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. Send a message to the Mini Progrm.

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

    The parameters descriptions are as follows:

    Parameter Description
    element ID in the tag.
    eventName The corresponding event, starts with on.
    data Custom event parameter.
  5. Register a custom View.

    1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    2. [[PSDService sharedInstance] registerComponentWithName:@"componentName" clsName:@"className"];
    3. }
  6. The Mini Program calls the custom View.

    1. <mpaas-component
    2. id="mpaas-map"
    3. type="custom_map"
    4. style="{{ width: 200, height: 200 }}"
    5. />

    The label mpaas-component is a fixed value, please do not modify it. Other parameters are described as follows:

    Parameter Description
    id The ID of the instance of custom View, duplicate ID should not occur in one mini program.
    type The type of the custom View must be consistent with the custom View parameter componentName registered by the client. Adding a prefix is recommended.
    style Set the width and height.
  7. The description for custom parameters of Mini Program is as follows:

    1. <mpaas-component
    2. id="mpaas-map"
    3. type="custom_map"
    4. style="{{ width: 200, height: 200 }}"
    5. color="#FFFF00FF"
    6. ···
    7. />
    Note:
    • Color is a custom rendering parameter, and it can also be named arbitrarily.
    • Id, type, and style are the default fields, these fields should not be used as the names of custom rendering parameters for custom View.
    • Custom rendering parameters cannot start with on, and the type cannot be func.
  8. The client receives custom parameters.

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

Other component internal methods

  1. ```objectivec
  2. // self.nbComponentMessageDelegate method
  3. @protocol NBComponentMessageDelegate <NSObject>
  4. @required
  5. /**
  6. * The component actively sends a message to the page (Native->Page)
  7. *
  8. * @param message Message name.
  9. * @param component The component to send the message.
  10. * @param data Content of the message.
  11. * @param callback The callback after the page has processed the message.
  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. * Components can directly execute JS in the execution environment.
  22. *
  23. * @param javaScriptString JS to be executed.
  24. * @param completionHandler Executes the callback function.
  25. *
  26. * @return void
  27. */
  28. - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
  29. /**
  30. * The component actively sends a message to the page (Native->Page).
  31. *
  32. * @param message Message name (message is not processed internally).
  33. * @param component The component to send the message.
  34. * @param data Content of message.
  35. * @param callback The callback after the page has processed the message.
  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. * The component will be destroyed.
  49. *
  50. * @return void
  51. */
  52. - (void)componentWillDestory;
  53. /**
  54. * After the component is destroyed.
  55. *
  56. * @return void
  57. */
  58. - (void)componentDidDestory;
  59. - (void)componentWillResume;
  60. - (void)componentDidResume;
  61. - (void)componentWillPause;
  62. - (void)componentDidPause;
  63. //fullscreen
  64. /**
  65. The component is about to enter the fullscreen callback.
  66. */
  67. - (void)componentWillEnterFullScreen;
  68. /**
  69. Callback when component enters fullscreen.
  70. */
  71. - (void)componentWillExitFullScreen;
  72. /**
  73. The component is about to exit the fullscreen callback.
  74. */
  75. - (void)componentDidEnterFullScreen;
  76. /**
  77. Component exits the callback of fullscreen.
  78. */
  79. - (void)componentDidExitFullScreen;
  80. //visiblity
  81. /**
  82. The component is about to exit the fullscreen callback.
  83. */
  84. - (void)componentDidHidden;
  85. /**
  86. Component exits the callback of fullscreen.
  87. */
  88. - (void)componentDidVisiblity;
  89. @end
  90. @protocol NBComponentDataProtocol <NSObject>
  91. /**
  92. * Component data will be updated.
  93. *
  94. * @param data Data content.
  95. *
  96. * @return void
  97. */
  98. - (void)componentDataWillChangeWithData:(NSDictionary *)data;
  99. /**
  100. * The data of the component has been updated, it is generally necessary to update the interface or perform other operations of the component.
  101. *
  102. * @param data Data content.
  103. *
  104. * @return void
  105. */
  106. - (void)componentDataDidChangeWithData:(NSDictionary *)data;
  107. @end
  108. @protocol NBComponentFullScreenProtocol <NSObject>
  109. /**
  110. Whether it is in fullscreen mode.
  111. @return Whether it is in fullscreen mode.
  112. */
  113. - (BOOL)isFullScreen;
  114. /**
  115. @return If enter fullscreen mode is needed.
  116. */
  117. - (BOOL)shouldEnterFullScreen;
  118. /**
  119. Set whether the ContentView needs to be fullscreen, the business can switch to fullscreen mode by changing it.
  120. @param fullScreen Whether fullscreen is required.
  121. @param shouldRotate Whether you need to rotate the screen.
  122. */
  123. - (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
  124. @end
  125. @protocol NBComponentVisibilityProtocol <NSObject>
  126. /**
  127. State of visibilityState.
  128. @return State of visibilityState.
  129. */
  130. - (NBComponentVisibilityState)visibilityState;
  131. /**
  132. Set the state of VisibilityState
  133. @param state VisibilityState
  134. @return set successfully or not
  135. */
  136. - (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
  137. /**
  138. Business rewrites this method to return the result of monitoring visibility changes or not, the default is NO.
  139. @return if monitor the changing of visibility is needed.
  140. */
  141. - (BOOL)shouldObServerVisibilityStateChange;
  142. @end
  143. ```