最近在写微网站,发现了微信内置浏览器的很多不称心的地方:

    1.安卓版的微信内浏览器底部总是出现一个刷新、前进、后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩

    2.分享当前网站至朋友圈时,分享的图片一般是网站的截图或者是首张图片,而分享的标题一般是网页title

    3.当微网站图片很大或者需要加载耗费流量很大时,怎么提醒用户注意自己的网络状态呢?

  就这最简单的两个问题,然后百度了一下,看了些研究过这个的牛们的博客,知道怎么搞了

  为什么会有下面的toolbar,为什么会有那么个讨厌的底部栏?而且这个不同终端不同,安卓是有的,IOS默认没有,Winphone里面只显示窄窄的一小条,并且可以上拉

  为了综合考虑,只能把toolbar禁掉。这样才能让微网站首屏显示长度更大、可以针对于客户需求开发底部菜单栏;

  禁掉的代码在微信的官方文档里面已经给了咯。

  为什么要改分享设置?很明显,微信内置浏览器的上方的标题字数显示有限,不可能为了分享方便而给网页起一个怪怪长长的标题,所以只能另想办法。

  

  什么办法呢?

  WeixinJSBridge。这个WeixinJSBridge可以认为是微信内置浏览器在开发中预留的API接口,可以通过javascript调用API接口实现一些操作。在稍早期的微信版本里面,可以实现一键关注、一键访问资料等很多功能,但是随着微信的改版升级,这些"缺口"已经被堵上许多,这样也好,让开发微网站的人能够更专心的开发微网站,而现在仅存的几个能够使用的微网站的小”缺口“基本能满足我们的使用。

  

  下面放上常用的微信内操作的javascript代码

  

 <script type="text/javascript">

     document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

         /*隐藏底部toolbar栏*/
WeixinJSBridge.call('hideToolbar');
//获取当前网络状态:wifi\2G\3G...
WeixinJSBridge.invoke('getNetworkType',{},function(e){
alert(e.err_msg);
/*network_type:wifi wifi网络
network_type:edge 非wifi,包含3G/2G
network_type:fail 网络断开连接
network_type:wwan 2g或者3g*/
});
//设置分享到朋友圈的内容
sendMessage();
}); //退出微信内浏览器
function close_wechat(){
if( window.confirm('你确定要离开微网站吗?') ){
WeixinJSBridge.call("closeWindow");
}
}
//初始化分享内容的函数
function sendMessage(){
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 设置为空
"img_url":"http://www.baidu.com/img/bdlogo.gif",//分享图片路径
"img_width": "120", //图片宽度
"img_height": "120", //图片高度
"link":"http://www.sina.com.cn/",//源链接地址
"desc":"这是介绍,但是介绍一般不会显示出来",//分享内容介绍
"title":"这是分享的标题。"
}, function(res){/*** 回调函数,最好设置为空 ***/});
});
}
</script>

  

    整段代码很简单,也写了注释,这里解释一点:

      addEventListener('WeixinJSBridgeReady',.....
   这个代码的作用是通过listener来判断weixinJSBridge是否准备完毕。可能是因为初始化或者加载的问题,网页直接加载时不能执行对微信浏览器操作的代码,因为相对应的接口或者说操作对象是undefined,只有在WeixinJSBridgeReady之后调用才有效。    <!--最后放一下实现的效果,已经把底部栏彻底隐藏了咯-->    
      
    

  

【微网站开发】之微信内置浏览器API使用的更多相关文章

  1. 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  2. 2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题

    前言 今天投产了一个小项目,一个很简单的H5,有播放视频功能,使用了videojs插件. 之前也做过数个视频播放,视频的转压都按照既定流程进行,文件放到FTP后,iphone和安卓机测试下来都没有问题 ...

  3. 如何判断微信内置浏览器(通过User Agent实现)

    在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信 ...

  4. 微信内置浏览器和小程序的 User Agent 区别及判断方法

    通过UA来判断不同的设备或者浏览器是开发者最常用的方式方法,而对于微信开发和小程序也是同样的一个情况,我们可以通过微信内置浏览器 User Agent 信息来判断其具体类型或者设备. 所以子凡就通过徒 ...

  5. 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

    原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

  6. 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

    微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...

  7. ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别

    最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...

  8. 微信内置浏览器中的cookie很诡异呀

    微信内置浏览器中的cookie很诡异呀 这是设置和删除COOKIE的代码 function set_cookie($var ,$value = '' ,$expire = 0){ $path = '/ ...

  9. 微信内置浏览器对于html5的支持

    微信内置浏览器对于html5的支持 来源: 作者: 热度:102 日期:14-06-10, 09:10 AM 我在做针对微信的HTML5应用, 目前遇到的几个问题是 一. 安卓版微信直接调用系统浏览器 ...

随机推荐

  1. 未完全关闭数据库导致ORA-01012: not logged的解决

    首先使用SHUTDOWN 没加任何参数方式关闭数据库,在数据库未关闭时CTRL+Z停止执行,退出用SQLPLUS重登陆,出现报错:ORA-01012: not logged on SQL> st ...

  2. Effective Modern C++翻译(7)-条款6:当auto推导出意外的类型时,使用显式的类型初始化语义

    条款6:当auto推导出意外的类型时,使用显式的类型初始化语义 条款5解释了使用auto来声明变量比使用精确的类型声明多了了很多的技术优势,但有的时候,当你想要zag的时候,auto可能会推导出了zi ...

  3. 如何利用百度地图JSAPI画带箭头的线?

    百度地图JSAPI提供两种绘制多折线的方式,一种是已知多折线经纬度坐标串通过AddOverlay接口进行添加:另一种是通过在地图上鼠标单击进行绘制(鼠标绘制工具条库).目前这两种方式只能绘制多折线,并 ...

  4. 网络资源管理系统LANsurveyor实战体验

    网络资源管理系统LANsurveyor实战体验 用于生成网络拓扑并管理网络各种设备的软件很多(例如上一篇文章展示的CiscoWorks 2000,我还介绍过开源领域的Cheops-NG),今天为大家介 ...

  5. 菜鸟学WEB开发 ASP.NET 5.0 1.0

    在学习之初我要强调一点“微软要向跨平台开发”大举进军了,不管他能走多远,这是微软的必经之路. 一.学习流程: 创建ASP.NET APPLICATION 项目——项目结构——结构分析. 1.创建ASP ...

  6. JAVA语法细节(1)

    1.变量的作用域 变量的作用域从变量定义的位置开始,到变量所在的那对大括号结束.变量定义内存开辟一块空间用于该变量,变量到达作用域时,该变量从内存中消失. 2.变量的数据类型 变量基本数据类型:byt ...

  7. (笔记)angular 单选选项卡

  8. MVC开发Markdown编辑器(1)

    MVC markdown MVC开发Markdown编辑器(1) 前言 安装 解析 结束语 前言 想在近段时间通过mvc开发个人博客,编辑器希望是markdown风格的,这样写文字会很方便.首先先解决 ...

  9. 网络基础知识、ASP.NET 核心知识(1)*

    为什么要写网络? 我原本的计划是这样的,连续两天梳理ASP.NET开发的核心知识.说到这呢,有人问了.“不是说好了做ASP.NET笔记吗?为啥要写网络基础知识?是不是傻?” 原因是这样的.作为网站开发 ...

  10. 编程作业—C++初探 简单的学生信息处理程序实现

    简单的学生信息处理程序实现 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 ...