文档反馈
文档反馈

流程

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

API

webview ->> 客户端

webPageLoaded

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

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

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

webLoginIMSucceed

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

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

webCreateWBSucceed

创建白板房间成功。开发者可以不用处理该事件。

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

webJoinWBSucceed

加入白板房间成功。开发者应该在等到该事件之后,再调用jsDirectCall, jsGetState等接口

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

webLoginIMFailed

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

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

webJoinWBFailed

加入白板频道失败。请根据错误信息对业务代码进行调整。客户端应退出webview

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

webCreateWBFailed

创建白板频道失败。请根据错误信息对业务代码进行调整。客户端应退出webview

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

webLeaveWB

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

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

webJsError

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

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

webSendAppState

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

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

webAppStateChange

在初始参数中设置appStateToListen数组,当数组中代表的状态改变时,webview会发送webAppStateChange给客户端。具体参数为:

{
    action: 'webAppStateChange',
    param: {
        name: string
        data: res     //更新后的应用状态, 这个值和drawPlugin.on('event:appState:change', (name, ...res))的res一样
    }
}

webLog

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

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

客户端 ->> webview

jsLoginIMAndJoinWB

客户端通知Web登录IM,并建立白板信令连接。该命令应该在webPageLoaded之后调用

参数为:

{
    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,
        /**
         * 指定客户端监听哪些白板状态变化。
         * 请参考SDK接口中event:appState:change,查看能接收的状态
         *
         * 比如设置 appStateToListen: ['page'], 则所有page相关的变化都会通知客户端
         *
         * webview会通过webAppStateChange通知客户端该状态的最新数值
         */
        appStateToListen?: Array<string>
        /**
         * 请参考SDK接口中WhiteboardSDK.getInstance中的drawPluginParams
         */
        drawPluginParams: any
    }
}

jsLogoutIMAndLeaveWB

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

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

jsDirectCall

通过jsDirectCall直接操作drawPlugin, toolCollection, whiteboardSDK对象, 请参考SDK文档中whiteboardSDK, drawPlugin, 或者toolCollection的接口

{
    action: 'jsDirectCall',
    param: {
        target: 'whiteboardSDK' | 'drawPlugin' | 'toolCollection'
        funcName: string      //请参考SDK API文档。funcName为函数名
        arg1?: any
        arg2?: any
        arg3?: any
        arg4?: any
        arg5?: any
    }
}

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

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

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

{
    action: 'jsDirectCall',
    param: {
        target: 'drawPlugin',
        funcName: 'enableDraw',
        arg1: true
    }
}

若要调用zoomTo,则参数为:

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

jsGetState

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

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

反馈成功

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