概要
移动端用户可以通过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
上


此文档对你是否有帮助

