实现卡片从创建到释放的完整生命周期-移动开发平台 mPaaS-阿里云

组装卡片信息

Android

创建配置信息，并设置各种参数。

/**
 * 组装卡片配置信息
 * @return
 */
private CubeCardConfig assembleCubeCardConfig(){
    // 创建卡片配置
    CubeCardConfig cardConfig = new CubeCardConfig();
    // 后台创建的卡片ID
    cardConfig.setTemplateId("hello_cube");
    // 卡片版本
    cardConfig.setVersion("1.0.0.0");
    // 卡片宽度，这里选取屏幕宽度
    cardConfig.setWidth(MFSystemInfo.getPortraitScreenWidth());
    return cardConfig;
}

iOS

创建配置信息，并设置各种参数。

- (void)createCubeConfig {
                // 设置卡片参数
    CubeCardConfig *cardConfig = [[CubeCardConfig alloc] init];
    // 卡片版本
    [cardConfig setVersion:@"1.0.0.0"];
    // 后台创建的卡片 ID
    [cardConfig setTemplteId:@"987654321"];
    // 预设宽度
    [cardConfig setWidth:MP_Screen_Width];
    // 预设高度
    [cardConfig setHeight:CGFLOAT_MAX];
}

鸿蒙

let cardConfig:CubeCardConfig = CubeCardConfig
  .obtain()
  //卡片ID
  .setTemplateId(this.cardId)
  //卡片版本
  .setVersion(this.cardVer)
  //卡片宽度，这里选取屏幕宽度
  .setWidth(CKSystemInfo.getDisplayMetricsWidth())

创建卡片

Android

根据组装好的卡片配置信息，请求卡片。卡片引擎会去服务端获取卡片模板信息，可以使用 createCard 方法一次请求一个卡片，也可以使用 createCards 方法一次请求多个卡片。

/**
 * 请求卡片信息
 * @param cardConfig
 */
private void requestCubeCard(final CubeCardConfig cardConfig){
    // 创建卡片信息
    CubeService.instance().getEngine().createCard(cardConfig, new CCardCallback() {
        @Override
        public void onLoaded(final CubeCard cubeCard, CCardType cardType, CubeCardConfig cubeCardConfig, CubeCardResultCode resultCode) {
            renderCubeCard(cubeCard,cardType,cubeCardConfig,resultCode);
        }
    });
}

iOS

根据组装好的卡片配置信息请求卡片，卡片引擎会去服务端获取卡片模板信息。可以使用 createCard 方法一次请求一个卡片，也可以使用 createCards 方法一次请求多个卡片。

[[[CubeService sharedInstance] getEngine] createCard:cardConfig callback:self];

鸿蒙

CubeEngine.getInstance().createCard(
  cardConfig
  ,
  {
    onLoaded: (card: CubeCard | null, cardType: CCardType, config: CubeCardConfig, code: CubeCardResultCode) => {
      if (CubeCardResultCode.CubeCardResultSucc == code) {
        this.instance = card;
      }
    }
  });

渲染卡片

Android

获取到卡片信息后，生成卡片 View，在主线程中进行渲染。这一步也要做异常判断，防止未顺利获取到卡片信息的情况发生。

/**
 * 渲染卡片
 * @param cubeCard
 * @param cardType
 * @param cubeCardConfig
 * @param resultCode
 */
private void renderCubeCard(final CubeCard cubeCard, CCardType cardType, CubeCardConfig cubeCardConfig, CubeCardResultCode resultCode) {
    if (resultCode == CubeCardResultCode.CubeCardResultSucc) {
        // 需要运行在主线程
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mCard = cubeCard;
                // 创建卡片View
                CubeView view = CubeService.instance().getEngine().createView(FastActivity.this);
                // 添加到外层 ViewGroup 里
                mWrapperLl.addView(view);
                // 渲染卡片
                cubeCard.renderView(view);
            }
        });
        MPLogger.info(TAG, "succ " + cubeCardConfig.getTemplateId() + " style " + cardType);
    } else {
        MPLogger.info(TAG, "fail " + cubeCardConfig.getTemplateId() + " style " + cardType + " error " + resultCode);
    }
}

iOS

拿到卡片信息之后，生成卡片 View，然后在主线程中进行渲染。在此环节中需要进行异常判断，防止未顺利获取到卡片信息的情况发生。

#pragma mark---CrystalCardCallback
- (void)onLoaded:(CubeCard *)card cardType:(CCardType)cardType config:(CubeCardConfig *)config erroCode:(CubeCardResultCode)erroCode {
    if (!card) {
        NSString *errMsg = [NSString stringWithFormat:@"创建失败：templteId=%@,style=%d, error=%d", [config templteId], cardType, erroCode];
        NSLog(@"错误信息:%@", errMsg); 
        return;
    }
    
    NSLog(@"创建成功 succ %@ style %d error %d", [config templteId], cardType, erroCode);

    dispatch_async(dispatch_get_main_queue(), ^{        
        //主线程刷新UI操作
        CubeView *view = [[[CubeService sharedInstance] getEngine] createView];
        CGSize size = [card getSize];
        
        if (![view isEqual:[NSNull null]]) {
            [view setFrame:CGRectMake(0, 0, MP_Screen_Width - 40, size.height)];
            [card renderView:view];
        }
        
        [self.view addSubView:view];
    });
}

鸿蒙

build() {
  Stack() {
    Column() {
      ···
      if (this.instance) {
        CubeCardComponent({ instance: this.instance })
      }
      ···
    }
    .justifyContent(FlexAlign.Start)
  }
}

通知卡片生命周期

通知 didApear

Android

mCard.notifyState(CCardState.CCardStateAppear);

iOS

[card notifyState:CCardStateAppear];

鸿蒙

this.instance.notify(CCardState.CCardStateAppear)

通知 disApear

Android

mCard.notifyState(CCardState.CCardStateDisappear);

iOS

[card notifyState:CCardStateDisappear];

鸿蒙

this.instance.notify(CCardState.CCardStateDisappear)

通知前台

Android

mCard.notifyState(CCardState.CCardStateForeGround);

iOS

[card notifyState:CCardStateForeGround];

鸿蒙

this.instance.notify(CCardState.CCardStateForeGround)

通知后台

Android

mCard.notifyState(CCardState.CCardStateBackGround);

iOS

[card notifyState:CCardStateBackGround];

鸿蒙

this.instance.notify(CCardState.CCardStateBackGround)

释放卡片

Android

卡片使用完成之后，释放卡片的内存资源，通常是在页面的 onDestroy 生命周期里调用。

/**
 * 释放卡片资源
 */
private void releaseCubeCard(){
    if (mCard != null) {
        mCard.recycle();
    }
    int chidrenCount = mWrapperLl.getChildCount();
    for (int i = 0; i < chidrenCount; i++) {
        if (mWrapperLl.getChildAt(i) instanceof CubeView) {
            ((CubeView) mWrapperLl.getChildAt(i)).destroy();
        }
    }
    mWrapperLl.removeAllViews();
}

iOS

卡片使用完成之后，需要释放卡片的内存资源，通常是在页面的 dealloc 生命周期里调用或主动销毁。

- (void)destoryCubeService {
    //销毁卡片引擎
    if (![[[CubeService sharedInstance] getEngine] isEqual:[NSNull null]]) {
        [[CubeService sharedInstance] destroyEngine];
    }
    
    //删除卡片视图
    [self.view removeAllSubviews];
}

鸿蒙

this.instance.destroy();