##javascript调用App方法 安卓的webview会在页面上设置一个全局的对象window.local_obj.callHandler, js调用此方法即可。
window.local_obj.callHandler(args);
苹果的webview会在页面设置JavascriptBridge,并返回一个bridge
connectWebViewJavascriptBridge(function (bridge) { bridge.callHandler(args); });
##方法传参约定 安卓和苹果统一约定只传两个参数, commond, options两个参数。
//以打开贴子详情页为例 //安卓 window.local_obj.callHandler('open_post_detail', { post_id : 100 }); //苹果 connectWebViewJavascriptBridge(function (bridge) { bridge.callHandler('open_post_detail', { post_id : 100 }); });
##分享交互的实现
####思路:
- 首先在html上埋好需要分享的内容
- 当用户点击分享的时候,原生分享插件去html上获取相应内容,并分享。
- 埋信息,我们则采用自定义meta来解决
####设置分享内容 通常分享一个网页的时候,需要分享以下4项内容。
<meta name="app_share_title" content="分享的标题" /> <meta name="app_share_description" content="分享的内容" /> <meta name="app_share_url" content="分享的链接" /> <meta name="app_share_image" content="分享的图片" />
##社区接口约定
###打开 新开一个webview
//安卓 window.local_obj.callHandler('open_webview_page', { url : 'http://abc.com/' }); //苹果 connectWebViewJavascriptBridge(function (bridge) { bridge.callHandler('open_webview_page', { url : 'http://abc.com/' }); });
####返回 返回,关闭当前webview
//安卓 window.local_obj.callHandler('exit_current_page', {}); //苹果 connectWebViewJavascriptBridge(function (bridge) { bridge.callHandler('exit_current_page', {}); });
####设置头像 启用设置头像组件。
//安卓 window.local_obj.callHandler('set_head_picture', {}); //苹果 connectWebViewJavascriptBridge(function (bridge) { bridge.callHandler('set_head_picture', {}); });