接入与使用Cube卡片-移动开发平台mPaaS-阿里云

蚂蚁动态卡片（下文简称为 Cube 卡片）起源于 Native 页面的动态化诉求，产品形态表现为 Cube 卡片。随着小程序概念的出现，Cube 卡片融入了支付宝小程序技术栈，产品形态为轻量级的支付宝小程序解决方案（相对于以浏览作为核心的 Web 小程序）。

Cube 卡片目前支持 基于 mPaaS 框架接入、基于已有工程且使用 mPaaS 插件接入 和 基于已有工程且使用 CocoaPods 接入 三种接入方式。本文介绍了采用上述方式接入 Cube 卡片和使用 Cube 卡片的过程。

前置条件

您已经接入工程到 mPaaS。更多信息，请参见以下内容：
已经安装 Cube 卡片 AntCubeTool 工具。更多详情请参见关于 AntCubeTool。

说明

如果有更多接入相关问题，欢迎搜索群号 145930007362 加入钉钉群进行咨询交流。该钉钉群已添加 mPaaS 公有云答疑小助手，能够快速回答常见接入问题。更多关于使用公有云答疑小助手的信息，请参见公有云答疑小助手。

接入步骤

选制基线。
1. 添加主基线 10.2.3。
2. 添加卡片组件。
初始化卡片。
构建一个卡片工程。
1. 初始化工程。
2. 构建工程。
发布一个卡片。
1. 进入卡片后台。
2. 创建卡片。
3. 添加卡片资源。
4. 发布卡片。
渲染卡片。

选择基线。
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即可完成接入。

初始化卡片。

编译 Xcode 工程。如果遇到头文件找不到的情况，请打开选项，将 Allow Non-modular Includes In Framework Modules置为 Yes。如下图所示：
添加系统依赖。

引入 Cube 卡片需要的库。

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

使用单例初始化卡片引擎。

- (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. 选择 正式发布。
  卡片发布成功后，客户端就可以拉取到卡片。

渲染卡片。

从网页复制 卡片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];

卡片取 key :"iosImage"，会获取到 key :"iosImage" 对应的 value 值，如下代码所示：

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

创建卡片后的代理方法需要遵循 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];
    });
}

Build & Run。
编译成功并运行，Xcode 命令行可能会报错 RPC 请求异常，详情请参考 RPC 请求异常。

效果预览。

Demo 参考

若需参考此接入方式的 Demo，请单击：MPCubeDemo_Pod.zip。

前置条件

接入步骤

选择基线。

Demo 参考