iOS 小程序支持自定义 View

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

操作步骤

  1. 继承 NBComponent 接口。

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

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

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

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

    参数说明如下:

    参数

    说明

    element

    标签里的 ID。

    eventName

    对应的 event,以 on 开头。

    data

    自定义事件参数。

  5. 注册自定义 View。

     - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
         [[PSDService sharedInstance] registerComponentWithName:@"componentName" clsName:@"className"];
    
     }
  6. 小程序调用自定义 View。

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

    标签 mpaas-component 为固定值,请勿修改。其他参数说明如下:

    参数

    说明

    id

    自定义 View 实例的 ID,单个小程序内请勿重复。

    type

    自定义 View 的 type,与客户端注册的自定义 View 参数 componentName 要保持一致,建议加上前缀。

    style

    设置宽度和高度。

  7. 小程序自定义参数。

     <mpaas-component
       id="mpaas-map"
       type="custom_map"
       style="{{ width: 200, height: 200 }}"
       color="#FFFF00FF"
       ···
     />
    注意
    • color 为自定义渲染参数,也可以对其任意命名。

    • id、type、style 为默认字段,请勿使用这些字段作为自定义 View 的自定义渲染参数。

    • 自定义渲染参数不可以 on 开头,类型不可以是 func。

  8. 客户端接收自定义参数。

     - (void)componentDataWillChangeWithData:(NSDictionary *)data {
    
     }
    
     - (void)componentDataDidChangeWithData:(NSDictionary *)data {
    
     }

其他组件内方法

// self.nbComponentMessageDelegate 方法
@protocol NBComponentMessageDelegate <NSObject>
@required
/**
 * 组件主动发送消息给页面(Native->Page)
 *
 * @param message 消息名称
 * @param component 要发送消息的组件
 * @param data 消息内容
 * @param callback 页面处理完消息后的回调
 *
 * @return void
 */
- (void)sendMessage:(NSString *)message
          component:(id<NBComponentProtocol>)component
               data:(NSDictionary *)data
           callback:(NBComponentCallback)callback;
@optional
/**
 * 组件可以在执行环境中直接执行JS
 *
 * @param javaScriptString 需要执行的JS
 * @param completionHandler 执行回调函数
 *
 * @return void
 */
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
/**
 * 组件主动发送消息给页面(Native->Page)
 *
 * @param message 消息名称(内部不处理message)
 * @param component 要发送消息的组件
 * @param data 消息内容
 * @param callback 页面处理完消息后的回调
 *
 * @return void
 */
- (void)sendCustomEventMessage:(NSString *)message
                     component:(id<NBComponentProtocol>)component
                          data:(NSDictionary *)data
                      callback:(NBComponentCallback)callback;
@end
@protocol NBComponentLifeCycleProtocol <NSObject>
- (void)componentWillAppear;
- (void)componentDidAppear;
/**
 * 组件将要销毁
 *
 * @return void
 */
- (void)componentWillDestory;
/**
 * 组件销毁之后
 *
 * @return void
 */
- (void)componentDidDestory;
- (void)componentWillResume;
- (void)componentDidResume;
- (void)componentWillPause;
- (void)componentDidPause;
//fullscreen
/**
 component即将进入全屏的回调
 */
- (void)componentWillEnterFullScreen;
/**
 component进入全屏的回调
 */
- (void)componentWillExitFullScreen;
/**
 component即将退出全屏的回调
 */
- (void)componentDidEnterFullScreen;
/**
 component退出全屏的回调
 */
- (void)componentDidExitFullScreen;

//visiblity
/**
 component即将退出全屏的回调
 */
- (void)componentDidHidden;
/**
 component退出全屏的回调
 */
- (void)componentDidVisiblity;
@end
@protocol NBComponentDataProtocol <NSObject>
/**
 * 组件数据将要更新
 *
 * @param data 数据内容
 *
 * @return void
 */
- (void)componentDataWillChangeWithData:(NSDictionary *)data;
/**
 * 组件数据已经更新,这时候一般是要作界面更新,或者组件的其他操作
 *
 * @param data 数据内容
 *
 * @return void
 */
- (void)componentDataDidChangeWithData:(NSDictionary *)data;
@end
@protocol NBComponentFullScreenProtocol <NSObject>
/**
 是否处于全屏模式

 @return 是否处于全屏模式
 */
- (BOOL)isFullScreen;
/**
 @return 是否需要进入全屏模
 */
- (BOOL)shouldEnterFullScreen;
/**
 设置ContentView是否需要全屏幕,业务通过换个来切换全屏模式
 @param fullScreen 是否需要全屏幕
 @param shouldRotate 是否需要旋转屏幕
 */
- (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
@end
@protocol NBComponentVisibilityProtocol <NSObject>
/**
 visibilityState状态
 @return VisibilityState状态
 */
- (NBComponentVisibilityState)visibilityState;
/**
 设置VisibilityState状态
 @param state VisibilityState
 @return 是否设置成功
 */
- (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
/**
 业务重写此方法给出是否需要监听visibility变化,默认是NO
 @return 是否需要监听visibility变化
 */
- (BOOL)shouldObServerVisibilityStateChange;
@end
阿里云首页 移动开发平台 mPaaS 相关技术圈