文档反馈
文档反馈
互动白板 > 客户端接入 > 接入webview

概要

移动端用户可以通过webview的方式接入互动白板。云信提供了两个webview，一是互动白板的webview, 二是录像回放的webview。

互动白板的webview地址为: https://app.yunxin.163.com/webdemo/whiteboard/webview.html 录像回放的webview地址为: https://app.yunxin.163.com/webdemo/whiteboard/webview.record.html

在开发阶段，推荐使用带有虚拟控制台的webview接入： https://app.yunxin.163.com/webdemo/whiteboard/webview_vconsole.html https://app.yunxin.163.com/webdemo/whiteboard/webview_vconsole.record.html

虚拟控制台使得开发者能够在webview中打开一个虚拟的开发者控制台，方便开发者查看开发中遇到的问题。

JsBridge

互动白板webview和录像回放webview均通过jsBridge和客户端交互数据。

客户端为了接收webview的数据，需要在Web的window对象上注册NativeFunction。如果客户端无法直接在window上注册，可以选择注册在window.jsBridge.NativeFunction上。

/**
 * 安卓接入示例
 */

//MainActivity.java
webView.addJavascriptInterface(new WebAppInterface(this, webView), "jsBridge");

//WebAppInterface.java
public class WebAppInterface {
    MainActivity mContext;

    /** Show a toast from the web page */
    @JavascriptInterface
    public void NativeFunction(String toast) throws JSONException {}
}

客户端通过window.WebJSBridge, 通知webview处理事件，传给webview的参数为JSON字符串。

//WebAppInterface.java
public class WebAppInterface {
    MainActivity mContext;
    webview webView;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c, webview w) {
        mContext = (MainActivity)c;
        webView = w;
    }

    private void runJs(final String param) {
        final String escapedParam = param.replaceAll("\"", "\\\\\"");
        webView.post(new Runnable() {
            @Override
            public void run() {
                Log.d("native function call js", "javascript:WebJSBridge(\"" + escapedParam + "\")");
                webView.loadUrl("javascript:WebJSBridge(\"" + escapedParam + "\")");
            }
        });
    }
}

其他场景

在云信内部产品接入互动白板时，发现flutter接入时，无法将消息注册在window.jsBridge.NativeFunction上面。 为此，白板的jsBridge也接受将消息注册在window.jsBridge.postMessage方法上。

flutter可以将webview ->> 客户端的消息注册在window.jsBridge.postMessage上

相关文档

相关产品

×

反馈成功

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