Mobile Platform as a Service:Tampilan Kustom

Prosedur

1. Warisi antarmuka NBComponent.

    @interface CustomTestView : NBComponent

2. Tulis ulang metode berikut untuk mengembalikan Tampilan yang dibuat di 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;
    }

    //Kembalikan Tampilan yang dibuat di `init`.
    - (UIView *)contentView {
        return self.contentSpaceView;
    }

3. Terima pesan dari Mini Program.

    - (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. Kirim pesan ke Mini Program.

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

   Deskripsi parameter adalah sebagai berikut:

   Parameter	Deskripsi
   element	ID dalam tag.
   eventName	Peristiwa yang sesuai, dimulai dengan on.
   data	Parameter acara kustom.

5. Daftarkan Tampilan Kustom.

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

6. Mini Program memanggil Tampilan Kustom.

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

   Label mpaas-component adalah nilai tetap, jangan ubah. Parameter lainnya dijelaskan sebagai berikut:

   Parameter	Deskripsi
   id	ID instance dari Tampilan Kustom, ID duplikat tidak boleh terjadi dalam satu mini program.
   type	Jenis Tampilan Kustom harus sesuai dengan parameter Tampilan Kustom componentName yang didaftarkan oleh klien. Menambahkan awalan dianjurkan.
   style	Atur lebar dan tinggi.

7. Deskripsi untuk parameter kustom Mini Program adalah sebagai berikut:

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

   null

   • Warna adalah parameter rendering kustom, dan juga bisa diberi nama secara bebas.

   • Id, type, dan style adalah bidang default, bidang ini tidak boleh digunakan sebagai nama parameter rendering kustom untuk Tampilan Kustom.

   • Parameter rendering kustom tidak boleh dimulai dengan on, dan jenisnya tidak boleh func.

8. Klien menerima parameter kustom.

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

Metode internal komponen lainnya

// self.nbComponentMessageDelegate method
@protocol NBComponentMessageDelegate <NSObject>
@required
/**
 * Komponen secara aktif mengirim pesan ke halaman (Native->Page)
 *
 * @param message Nama pesan.
 * @param component Komponen yang mengirim pesan.
 * @param data Isi pesan.
 * @param callback Callback setelah halaman memproses pesan.
 *
 * @return void
 */
- (void)sendMessage:(NSString *)message
          component:(id<NBComponentProtocol>)component
               data:(NSDictionary *)data
           callback:(NBComponentCallback)callback;
@optional
/**
 * Komponen dapat langsung mengeksekusi JS di lingkungan eksekusi.
 *
 * @param javaScriptString JS yang akan dieksekusi.
 * @param completionHandler Fungsi callback eksekusi.
 *
 * @return void
 */
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
/**
 * Komponen secara aktif mengirim pesan ke halaman (Native->Page).
 *
 * @param message Nama pesan (pesan tidak diproses secara internal).
 * @param component Komponen yang mengirim pesan.
 * @param data Isi pesan.
 * @param callback Callback setelah halaman memproses pesan.
 *
 * @return void
 */
- (void)sendCustomEventMessage:(NSString *)message
                     component:(id<NBComponentProtocol>)component
                          data:(NSDictionary *)data
                      callback:(NBComponentCallback)callback;
@end
@protocol NBComponentLifeCycleProtocol <NSObject>
- (void)componentWillAppear;
- (void)componentDidAppear;
/**
 * Komponen akan dihapus.
 *
 * @return void
 */
- (void)componentWillDestory;
/**
 * Setelah komponen dihapus.
 *
 * @return void
 */
- (void)componentDidDestory;
- (void)componentWillResume;
- (void)componentDidResume;
- (void)componentWillPause;
- (void)componentDidPause;
//layar penuh
/**
 Komponen akan masuk ke callback layar penuh.
 */
- (void)componentWillEnterFullScreen;
/**
 Callback saat komponen masuk ke layar penuh.
 */
- (void)componentWillExitFullScreen;
/**
 Komponen akan keluar dari callback layar penuh.
 */
- (void)componentDidEnterFullScreen;
/**
 Komponen keluar dari callback layar penuh.
 */
- (void)componentDidExitFullScreen;

//visibilitas
/**
 Komponen akan keluar dari callback layar penuh.
 */
- (void)componentDidHidden;
/**
 Komponen keluar dari callback layar penuh.
 */
- (void)componentDidVisiblity;
@end
@protocol NBComponentDataProtocol <NSObject>
/**
 * Data komponen akan diperbarui.
 *
 * @param data Isi data.
 *
 * @return void
 */
- (void)componentDataWillChangeWithData:(NSDictionary *)data;
/**
 * Data komponen telah diperbarui, umumnya perlu untuk memperbarui antarmuka atau melakukan operasi lain dari komponen.
 *
 * @param data Isi data.
 *
 * @return void
 */
- (void)componentDataDidChangeWithData:(NSDictionary *)data;
@end
@protocol NBComponentFullScreenProtocol <NSObject>
/**
 Apakah dalam mode layar penuh.

 @return Apakah dalam mode layar penuh.
 */
- (BOOL)isFullScreen;
/**
 @return Jika perlu masuk ke mode layar penuh.
 */
- (BOOL)shouldEnterFullScreen;
/**
 Tetapkan apakah ContentView perlu layar penuh, bisnis dapat beralih ke mode layar penuh dengan mengubahnya.
 @param fullScreen Apakah layar penuh diperlukan.
 @param shouldRotate Apakah Anda perlu memutar layar.
 */
- (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
@end
@protocol NBComponentVisibilityProtocol <NSObject>
/**
 Status visibilityState.
 @return Status visibilityState.
 */
- (NBComponentVisibilityState)visibilityState;
/**
 Tetapkan status VisibilityState
 @param state VisibilityState
 @return berhasil disetel atau tidak
 */
- (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
/**
 Bisnis menulis ulang metode ini untuk mengembalikan hasil pemantauan perubahan visibilitas atau tidak, defaultnya adalah NO.
 @return jika perlu memantau perubahan visibilitas.
 */
- (BOOL)shouldObServerVisibilityStateChange;
@end