使用自定义JSAPI实现卡片调用客户端方法-移动开发平台 mPaaS-阿里云

自定义 JSAPI

Android

public class CustomCubeModule extends CubeModule {
    private static final String TAG = CustomCubeModule.class.getSimpleName();

    // 注解，uiThread 表示是否在主进程回调
    @JsMethod(uiThread = true)
    public void cubeToClient(final CubeJSCallback callback) { 
        // 向卡片发送回调
        if (callback != null) {
            callback.invoke("cubeToClient callback data: " + System.currentTimeMillis());
        }
    }
}

iOS

在工程中新建 NSObject 对象并引入协议 <CubeModuleProtocol>。

#import <Foundation/Foundation.h>
#import <CubeCrystal/CubeModuleProtocol.h>

NS_ASSUME_NONNULL_BEGIN

@interface MPCubeModule : NSObject <CubeModuleProtocol>

@end

NS_ASSUME_NONNULL_END

实现与模板约定的方法。

#import "MPCubeModule.h"
#import <CubeBridge/CKJSDefine.h>

@implementation MPCubeModule

//cardUid 是 module 的属性，在调用 module api 时可以通过 cardUid 判断是哪个卡片产生的调用，cardUid 即 CubeCard 中的 cardUid。
@synthesize cardUid;

//配置约定的方法
CK_EXPORT_METHOD(@selector(cubeToClient:))

- (void)cubeToClient:(CubeModuleMethodCallback)callback {
    //此处执行cubeToClient操作
    if (callback) {
        //回调给模板的参数
        callback(@"cubeToClient");
    }
}

@end

鸿蒙

export class NativeCubeModule implements IFalconModule {
  /**
   * 这里用于卡片调用
   * @returns
   */
  getName(): string {
    return "custom";
  }

  /**
   * 卡片调用的方法
   * @param instance
   * @param params
   * @param callback
   */
  cubeToClient(instance: FalconInstance, params: object, callback: IFalconCallback) {
    hilog.debug(0x0000, `cubeToClient: ${params}`, '');
    promptAction.showToast({
      message: JSON.stringify(params)
    })
    callback.invoke("cubeToClient callback data: " + systemDateTime.getTime())
  }
}

注册 JSAPI

Android

第一个参数是 type，第二个参数是自定义 module 的全路径，第三个参数是调用的方法名称。全路径和方法名称不需要混淆。

Collection<CubeModuleModel> cubeModuleModels = new LinkedList<>();
cubeModuleModels.add(new CubeModuleModel("custom", CustomCubeModel.class.getName(), new String[]{"cubeToClient"}));
CubeService.instance().getEngine().registerModule(cubeModuleModels, null);

iOS

- (void)registerModules {
    [MPCubeManager shareManager];
    
    //注册自定义Module，key为module名称（与服务端约定），value为客户端类名
    NSDictionary *dic = @{@"custom": @"MPCubeModule"};
    [[[CubeService sharedInstance] getEngine] registerModules:dic];
}

鸿蒙

CubeEngine.getInstance().registerModule(new NativeCubeModule())

调用 JSAPI

<script>
    // 注册 module
    const navigator = requireModule("custom");
    export default {
        data: {
            message: 'Hello Cube 1'
        },
        beforeCreate() {
            this.message = 'Hello Cube 2'
        },
        didAppear() {
            
        },        
        methods: {
            onClick() {
                // 调用客户端方法
                navigator.cubeToClient(event=>{
                    this.message = event;
                })
            }
        }
    }
</script>