标签：des style c class blog code
最近在写微网站，发现了微信内置浏览器的很多不称心的地方：
1.安卓版的微信内浏览器底部总是出现一个刷新、前进、后退的底部栏，宽度很大，导致屏幕显示尺寸被压缩
2.分享当前网站至朋友圈时，分享的图片一般是网站的截图或者是首张图片，而分享的标题一般是网页title
3.当微网站图片很大或者需要加载耗费流量很大时，怎么提醒用户注意自己的网络状态呢？
就这最简单的两个问题，然后百度了一下，看了些研究过这个的牛们的博客，知道怎么搞了
为什么会有下面的toolbar，为什么会有那么个讨厌的底部栏？而且这个不同终端不同，安卓是有的，IOS默认没有，Winphone里面只显示窄窄的一小条，并且可以上拉
为了综合考虑，只能把toolbar禁掉。这样才能让微网站首屏显示长度更大、可以针对于客户需求开发底部菜单栏；
禁掉的代码在微信的官方文档里面已经给了咯。
为什么要改分享设置？很明显，微信内置浏览器的上方的标题字数显示有限，不可能为了分享方便而给网页起一个怪怪长长的标题，所以只能另想办法。
什么办法呢？
WeixinJSBridge。这个WeixinJSBridge可以认为是微信内置浏览器在开发中预留的API接口，可以通过javascript调用API接口实现一些操作。在稍早期的微信版本里面，可以实现一键关注、一键访问资料等很多功能，但是随着微信的改版升级，这些"缺口"已经被堵上许多，这样也好，让开发微网站的人能够更专心的开发微网站，而现在仅存的几个能够使用的微网站的小”缺口“基本能满足我们的使用。
下面放上常用的微信内操作的javascript代码
1 <script type="text/javascript"> 2 3 document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady() { 4 5 /*隐藏底部toolbar栏*/ 6 WeixinJSBridge.call(‘hideToolbar‘); 7 //获取当前网络状态：wifi\2G\3G... 8 WeixinJSBridge.invoke(‘getNetworkType‘,{},function(e){ 9 alert(e.err_msg); 10 /*network_type:wifi wifi网络 11 network_type:edge 非wifi,包含3G/2G 12 network_type:fail 网络断开连接 13 network_type:wwan 2g或者3g*/ 14 }); 15 //设置分享到朋友圈的内容 16 sendMessage(); 17 }); 18 19 //退出微信内浏览器 20 function close_wechat(){ 21 if( window.confirm(‘你确定要离开微网站吗?‘) ){ 22 WeixinJSBridge.call("closeWindow"); 23 } 24 } 25 //初始化分享内容的函数 26 function sendMessage(){ 27 WeixinJSBridge.on(‘menu:share:timeline‘, function(argv){ 28 WeixinJSBridge.invoke(‘shareTimeline‘,{ 29 "appid":"", //appid 设置为空 30 "img_url":"http://www.baidu.com/img/bdlogo.gif",//分享图片路径 31 "img_width": "120", //图片宽度 32 "img_height": "120", //图片高度 33 "link":"http://www.sina.com.cn/",//源链接地址 34 "desc":"这是介绍，但是介绍一般不会显示出来",//分享内容介绍 35 "title":"这是分享的标题。" 36 }, function(res){/*** 回调函数，最好设置为空 ***/}); 37 }); 38 } 39 </script>
整段代码很简单，也写了注释，这里解释一点：
addEventListener(‘WeixinJSBridgeReady‘,.....
这个代码的作用是通过listener来判断weixinJSBridge是否准备完毕。可能是因为初始化或者加载的问题，网页直接加载时不能执行对微信浏览器操作的代码，因为相对应的接口或者说操作对象是undefined，只有在WeixinJSBridgeReady之后调用才有效。
<!--最后放一下实现的效果，已经把底部栏彻底隐藏了咯-->
【微网站开发】之微信内置浏览器API使用,布布扣,bubuko.com
标签：des style c class blog code
原文地址：http://www.cnblogs.com/limingxi/p/3751929.html
