客户端调用卡片内JS方法-移动开发平台mPaaS-阿里云

JS 实现方法

<template>
    <div class="root">
        <text class="message" :value="message" @click="onClick()"></text>
        <custom-widget ref="widget" class="custom" :value="message2" @on-WidgetToCube="clientToCube(param)">
        </custom-widget>
    </div>
</template>

<script>

    export default {
        data: {
            message : '我是卡片的text，点我调用自定义组件',
            message2 : '我是传给自定义组件的value'
        },
        beforeCreate() {
            this.message = '我是卡片的text，点我调用自定义组件'
            this.message2 = '我是传给自定义组件的value'
        },
        didAppear() {
            
        },        
        methods: {
            onClick() {
                console.info('invoke on-click event');
                this.$refs.widget.cubeToWidget({
                    'auto':"我是发给自定义组件方法的参数"
                },ret=>{
                    this.message = "接收到自定义组件方法的回调，参数："+JSON.stringify(ret);
                });
            },
            //原生调用自定义标签的方法(调用JS)
            clientToCube(param){
                console.info(param.p1)
                this.message2 = "接收到自定义组件的事件回调，参数："+JSON.stringify(param)
            }
        }
    }
</script>

<style>
    .root {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
        width: 100%;
        height: 800rpx;
    }
    .custom {
        color: black;
        font-size: 20rpx;
        width: 100%;
        height: 600rpx;
    }
    .message {
        color: black;
        font-size: 20rpx;
        width: 100%;
        height: 200rpx;
    }
</style>

客户端调用 JS 方法

Android

实现 CubeCard 实例 mCard 然后调用以下方法。

mCard.callJsFunction(String methodName, final CJSFunctionCallback callback, Object... params)

iOS

在卡片加载的代理方法中获取卡片实例，调用对应的 JS 方法，并发送数据。

#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(), ^{        
        NSString *text = @"客户端调用卡片JS方法传参：Hello World";
        if (![text isEqualToString:@""]) {
            NSArray *valueArray = @[text];
            //调用与卡片约定的JS方法，传入参数
            [card callJsFunction:@"clientToCube" arguments:valueArray];
        }
    });
}

鸿蒙

实现 CubeCard 实例 instance 然后调用以下方法。

instance.callJsFunction(functionName: string, params: Array<Object>)