Mobile Platform as a Service：快速開始

選擇基準。

Cube 卡片目前已在主基準 10.2.3 版本中提供支援。根據您採用的接入方式，請選擇相應的添加方式。

• 使用 mPaaS Xcode Extension。

  此方式適用於採用了 基於 mPaaS 架構接入 或 基於已有工程且使用 mPaaS 外掛程式接入 的接入方式。

  1. 單擊 Xcode 功能表項目 Editor > mPaaS > 編輯工程 > 升級基準，切換工程到 10.2.3 基準。

     說明

     如果 升級基準 不可點擊，請確保工程配置已經匯入，參考 前置條件 開啟編輯工程頁面。

     

  2. 升級基準後，單擊 編輯模組 > 修改模組，選擇 Cube 卡片，儲存後單擊 開始編輯，即可完成添加。

     

• 使用 cocoapods-mPaaS 外掛程式。

  此方式適用於採用了 基於已有工程且使用 CocoaPods 接入 的接入方式。

  1. 在 Podfile 檔案中執行如下操作。

     1. 修改 mPaaS_baseline 為 10.2.3。

     2. 使用 mPaaS_pod "mPaaS_Cube" 添加 Cube 卡片 組件依賴。

        

  2. 執行 pod install即可完成接入。

初始化卡片。

1. 編譯 Xcode 工程。如果遇到標頭檔找不到的情況，請開啟選項，將 Allow Non-modular Includes In Framework Modules置為 Yes。如下圖所示：

   

2. 添加系統依賴。

   

3. 引入 Cube 卡片需要的庫。

   #import <CubeCrystal/CubeEngine.h>
   #import <AntCube/CubeService.h>

4. 使用單例初始化卡片引擎。

   - (void)initEngie{
       static dispatch_once_t onceToken;
       NSString *mockBundlePath = [NSString stringWithFormat:@"%@/%@/crystal", [[NSBundle mainBundle] resourcePath], @"MPCubeDemo.bundle"];
       dispatch_once(&onceToken, ^{
           CubeEngineConfig* config = [[CubeEngineConfig alloc] init];
           [config setBundlePath:mockBundlePath];
           [[CubeService sharedInstance] initWithConfig:config]; 
       });
   }

構建一個卡片工程。

1. 初始化工程。在終端裡執行 act init命令。

   • 請選擇應用類型為 Cube，選擇模板卡片 (VUE 格式）。

   • 請輸入應用程式名稱，輸入您的專案名稱，建議採用英文、數字和底線的組合。

   • 請選擇“需要額外建立工程源碼檔案夾”，會額外以應用程式名稱建立一個檔案夾。如果選擇不需要，會在目前的目錄直接初始化。

     

2. 構建工程。使用 cd命令開啟剛建立的卡片工程，運行 act build完成構建。構建完的產物會在您的工程的 /dist/檔案夾下。

   

發布卡片。

1. 進入卡片後台。

   

2. 單擊 建立卡片。

   卡片 ID 建議使用英文、數字和底線的組合，用戶端渲染卡片時會依賴卡片 ID。卡片名稱可以取任意值。

   

3. 添加卡片資源。

   • 建議使用 4 位版本號碼。

   • 選擇剛才編譯的 main.zip。

   • 用戶端範圍指的是可以拉取到該卡片的用戶端版本。如果要覆蓋所有用戶端版本，在最低版本中填入 0.0.0.0 即可。

   

4. 發布卡片。

   1. 單擊 建立發布。

      

   2. 選擇 正式發布。

      

   卡片發布成功後，用戶端就可以拉取到卡片。

渲染卡片。

1. 從網頁複製 卡片ID 和 卡片版本號碼。

   //建立卡片對象
   CubeCardConfig *cardConfig = [[CubeCardConfig alloc] init];
   //配置卡片版本（必填），從控制台複製
   [cardConfig setVersion:@"1.0.0.0"];
   //配置卡片 ID（必填），從控制台複製
   [cardConfig setTemplteId:@"20211118"];
   //預設卡片寬度
   [cardConfig setWidth:[UIScreen mainScreen].bounds.size.width];
   //預設卡片高度
   [cardConfig setHeight:350];
   //設定卡片資料（必填）參數為業務 JSON 資料。
   [cardConfig setData:@{}];
   //載入卡片
   [[[CubeService sharedInstance] getEngine] createCard:cardConfig callback:self];
   

2. 卡片取 key :"iosImage"，會擷取到 key :"iosImage" 對應的 value 值，如下代碼所示：

    [self.cardConfig setData:@{@"iosImage":@"https://img.zcool.cn/community/013edb5c7b5b1ca801213f269fc887.jpg@1280w_1l_2o_100sh.jpg"}];

3. 建立卡片後的代理方法需要遵循 CCardCallback 代理協議，並且需要實現 onLoaded:cardType:config:erroCode協議方法。

   @interface ViewController () <CCardCallback>
   @end

   - (void)onLoaded:(CubeCard *)card cardType:(CCardType)cardType config:(CubeCardConfig *)config erroCode:(CubeCardResultCode)erroCode {
       //建立卡片失敗
       if (!card) {
           NSLog(@"load card fail %@ style %d error %d", [config templteId], cardType, erroCode);
           return;
       }
       
       //建立成功
       NSLog(@"load card success %@ 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];
           [view setFrame:CGRectMake(0, 20, size.width, size.height) ];
           [self.view addSubview:view];
           
           [card renderView:view];
       });
   }

4. Build & Run。

   編譯成功並運行，Xcode 命令列可能會報錯 RPC 請求異常，詳情請參考 RPC 請求異常。

效果預覽。