阿哥论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 344|回复: 0

【微网站开发】之微信内置浏览器API使用

[复制链接]
 楼主| 发表于 2015-4-10 11:16:49 | 显示全部楼层 |阅读模式
【微网站开发】之微信内置浏览器API使用
最近在写微网站,发现了微信内置浏览器的很多不称心的地方:
    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使用
拉自:http://www.cnblogs.com/limingxi/p/3751929.html?utm_source=tuicool
该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表