Mobile Platform as a Service:カスタムビュー

手順

1. NBComponent インターフェースを継承します。

    @interface CustomTestView : NBComponent

2. init で作成されたビューを返すように、次のメソッドを再書き込みします。

    - (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` で作成されたビューを返します。
    - (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	対応するイベント。 on で始まります。
   data	カスタムイベントパラメーター。

5. カスタムビューを登録します。

    - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   
        [[PSDService sharedInstance] registerComponentWithName:@"componentName" clsName:@"className"];
   
    }

6. ミニプログラムはカスタムビューを呼び出します。

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

   mpaas-component ラベルは固定値です。変更しないでください。その他のパラメーターの説明は次のとおりです。

   パラメーター	説明
   id	カスタムビューのインスタンスの ID。1 つのミニプログラム内で重複する ID が発生しないようにしてください。
   type	カスタムビューのタイプは、クライアントによって登録されたカスタムビューパラメーター componentName と一致している必要があります。プレフィックスを追加することをお勧めします。
   style	幅と高さを設定します。

7. ミニプログラムのカスタムパラメーターの説明は次のとおりです。

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

   重要

   • Color はカスタムレンダリングパラメーターであり、任意に名前を付けることもできます。

   • id、type、style はデフォルトフィールドです。これらのフィールドは、カスタムビューのカスタムレンダリングパラメーターの名前として使用しないでください。

   • カスタムレンダリングパラメーターは 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 メッセージ名 (メッセージは内部的に処理されません)。
 * @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
/**
 コンポーネントがフルスクリーンコールバックに入ろうとしています。
 */
- (void)componentWillEnterFullScreen;
/**
 コンポーネントがフルスクリーンに入ったときのコールバック。
 */
- (void)componentWillExitFullScreen;
/**
 コンポーネントがフルスクリーンコールバックを終了しようとしています。
 */
- (void)componentDidEnterFullScreen;
/**
 コンポーネントがフルスクリーンのコールバックを終了します。
 */
- (void)componentDidExitFullScreen;

//visiblity
/**
 コンポーネントがフルスクリーンコールバックを終了しようとしています。
 */
- (void)componentDidHidden;
/**
 コンポーネントがフルスクリーンのコールバックを終了します。
 */
- (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;
/**
 ビジネスはこのメソッドを再書き込みして、可視性の変更を監視する結果を返します。デフォルトは NO です。
 @return 可視性の変更を監視する必要があるかどうか。
 */
- (BOOL)shouldObServerVisibilityStateChange;
@end