文档反馈
文档反馈

流程

webview的接入过程是客户端与webview不断互动的过程。在互动白板应用中,客户端应该监听webview传来的各类消息,并根据这些消息,通过window.WebJSBridge操控webview的行为。

客户端事件

下面我们将一一来讲述webview会抛出哪些消息。

webPageLoaded

webview通知客户端脚本加载成功。由于网络环境可能不稳定,有时候页面可能无法加载。客户端应该在加载webview时,设置一个定时器。若超过定时器设置的时间还未收到webPageLoaded,则应该重新加载webview。推荐设置定时器时间为20s。

客户端收到webPageLoaded之后,应该通知webview加入房间:jsLoginIMAndJoinWB

{
    action: 'jsLoginIMAndJoinWB',
    param: {
        account: string,
        nickname: string    
        debug: true | false, //
        token: string,      //IM 账号体系 密码, 通过md5算法加密的密码。现在调试阶段使用pwd明文密码也行,但是以后会禁止。
        channelName: string,
        appKey: string,
        platform: 'android' | 'ios' | 'pc' | 'mac' | 'pad'    //'web'用户可先用'pc',之后版本会添加'web'
        record: true | false,
    }
}

webLoginIMSucceed

登陆IM成功。收到此消息说明传入的用户名和token正确

webLoginIMFailed

登陆IM失败。请仔细检查你的用户名和token是否匹配。如检查后仍遇到此问题,可以询问云信销售人员

webCreateWBSucceed

创建白板频道成功。

webCreateWBFailed

创建白板频道失败。请根据错误信息对业务代码进行调整

webJoinWBSucceed

加入白板频道成功。收到这条消息之后,客户端可以开始对白板进行操作。比如说设置初始颜色,设置工具栏,设置是否允许编辑等等

webJoinWBFailed

加入白板频道失败。请根据错误信息对业务代码进行调整。常见的原因是加入的白板房间不存在

webSendAppState

收到webview发送的白板状态。这是客户端调用jsGetState时,webview通过webSendAppState将返回值传递给webview

webLeaveWB

白板连接中断。客户端此时应该销毁webview,并查看中断原因

webJsError

webview内js运行异常。客户端可根据此消息调试

webLog

webview将页面内日志传递给客户端。客户端可以将日志保存在本地,方便调试

webview接口

webview的接口比较简单。具体说明如下:

jsLoginIMAndJoinWB

加入白板房间。应该在webPageLoaded之后调用

jsLogoutIMAndLeaveWB

离开白板房间。调用后当前客户端的白板连接将断开

jsDirectCall

直接调用SDK文档中whiteboardSDK, drawPlugin, 或者toolCollection的接口

jsGetState

直接调用SDK文档中whiteboardSDK, drawPlugin的接口,接口放回值会通过webSendAppState传递给客户端

API

webview ->> 客户端

webPageLoaded

通知各端Web页面已经准备好了。传递给客户端的数据如下,格式为JSON。

{
    action: 'webPageLoaded',
    param: {}
}

webLoginIMSucceed

NIM登录成功。传递给客户端的数据如下,格式为JSON。

{
    action: 'webLoginIMSucceed',
    param: {}
}

webCreateWBSucceed

NIM登录成功。传递给客户端的数据如下,格式为JSON。

{
    action: 'webCreateWBSucceed',
    param: {}
}

webJoinWBSucceed

NIM登录成功。传递给客户端的数据如下,格式为JSON。

{
    action: 'webJoinWBSucceed',
    param: {}
}

webLoginIMFailed

NIM登录失败。参数为登录失败代号及原因。传递给客户端的数据如下,格式为JSON。

{
    action: 'webLoginIMFailed',
    param: {
        code: number, 
        msg: string  
    }
}

webJoinWBFailed

网络异常。客户端应退出webview。传递给客户端的数据如下,格式为JSON。

{
    action: 'webJoinWBFailed',
    param: {
        code: number, 
        msg: string  
    }
}

webCreateWBFailed

网络异常。客户端应退出webview。传递给客户端的数据如下,格式为JSON。

{
    action: 'webCreateWBFailed',
    param: {
        code: number, 
        msg: string  
    }
}

webLeaveWB

白板信令通道已断开。客户端应退出webview。传递给客户端的数据如下,格式为JSON。

{
    action: 'webLeaveWB',
    param: {}
}

webJsError

Js运行时报错

{
    action: 'webJsError',
    param: {
        msg: string
    }
}

webSendAppState

客户端调用jsGetState后,webview通过此函数将数据传回至客户端

{
    action: 'webSendAppState',
    param: {
        target: 'drawPlugin' | 'whiteboardSDK'
        action: string  //请参考API文档,action为接口名称
        result: res     //接口函数调用后返回的数据
    }
}

webLog

webview给客户端发送webview运行时产生的日志。建议客户端将这些日志保存下来,方便日后调试

{
    action: 'webLog',
    param: {
        type: 'info' | 'error' | 'warn' | 'log' | 'debug',
        msg: string
    }
}

客户端 ->> webview

jsLoginIMAndJoinWB

客户端通知Web登录IM,并建立白板信令连接。

参数为:

{
    action: 'jsLoginIMAndJoinWB',
    param: {
        account: string,
        nickname: string                                    //非必须
        debug: true | false,
        token: string,                                      //IM 账号体系 密码, 通过md5算法加密的密码。现在调试阶段使用pwd明文密码也行,但是以后会禁止。
        channelName: string,
        appKey: string,
        platform: 'android' | 'ios' | 'pc' | 'mac' | 'pad'    //'web'用户可先用'pc',之后版本会添加'web'
        record: true | false,
    }
}

jsLogoutIMAndLeaveWB

客户端通知Web登出IM。Web会销毁白板信令通道,然后登出NIM账号。动作结束后,会发送webLeaveWB事件。

{
    action: 'jsLogoutIMAndLeaveWB',
    param: {}
}

jsDirectCall

设置白板是否可以绘制

{
    action: 'jsDirectCall',
    param: {
        target: 'whiteboardSDK' | 'drawPlugin' | 'toolCollection'
        action: string      //请参考SDK API文档。action为函数名
        params: Array<any>  //接口函数的参数,若接口函数没有参数,可以不传
        /**
         * 如果不传入params, 也可以传入param1, param2, param3,具体可以看下面的示例
         */
    }
}

比如若调用undo操作,则参数应该为:

{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        action: 'undo'
    }
}

若要开启编辑权限, 则参数为:

{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        action: 'enableDraw',
        params: [true]
    }
}

//或者
{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        action: 'enableDraw',
        param1: true
    }
}

若要调用zoomTo,则参数为:

{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        action: 'zoomTo',
        params: [0.3, true]  //缩放比例30%,动画过渡至目标位置
    }
}

//或者
{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        action: 'zoomTo',
        param1: 0.3 ,        //缩放比例30%
        param2: true         //动画过渡至目标位置
    }
}

jsGetState

获取应用内部的状态。SDK获取状态后,会通过webSendAppState将数据传递给客户端。

{
    action: 'jsGetState',
    param: {
        target: 'whiteboardSDK' | 'drawPlugin'
        action: string      //请参考SDK API文档。action为函数名
    }
}
×

反馈成功

非常感谢您的反馈,我们会继续努力做得更好。