【微网站开发】之微信内置浏览器API使用
最近在写微网站,发现了微信内置浏览器的很多不称心的地方:
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使用的更多相关文章
- 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub
最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...
- 2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题
前言 今天投产了一个小项目,一个很简单的H5,有播放视频功能,使用了videojs插件. 之前也做过数个视频播放,视频的转压都按照既定流程进行,文件放到FTP后,iphone和安卓机测试下来都没有问题 ...
- 如何判断微信内置浏览器(通过User Agent实现)
在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信 ...
- 微信内置浏览器和小程序的 User Agent 区别及判断方法
通过UA来判断不同的设备或者浏览器是开发者最常用的方式方法,而对于微信开发和小程序也是同样的一个情况,我们可以通过微信内置浏览器 User Agent 信息来判断其具体类型或者设备. 所以子凡就通过徒 ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]
原文地址: http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记
微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...
- ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别
最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...
- 微信内置浏览器中的cookie很诡异呀
微信内置浏览器中的cookie很诡异呀 这是设置和删除COOKIE的代码 function set_cookie($var ,$value = '' ,$expire = 0){ $path = '/ ...
- 微信内置浏览器对于html5的支持
微信内置浏览器对于html5的支持 来源: 作者: 热度:102 日期:14-06-10, 09:10 AM 我在做针对微信的HTML5应用, 目前遇到的几个问题是 一. 安卓版微信直接调用系统浏览器 ...
随机推荐
- 使用 iMacros 来自动化日常的工作
利用 iMacros 的浏览器附加组件来提高工作效率 介绍 iMacros 这个强大的工具,使用简单的范例演示了如何使用这个工具来完成对于网页的操作,对于大量的具有重复性的工作内容尤其可以提高效率.对 ...
- WEB前端研发工程师编程能力成长之路(1)(转)
WEB前端研发工程师编程能力成长之路(1) [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧: ...
- 2014年值得学习的25个PS CS6教程(一)
热爱PS的朋友看过来~~~下面跟大家推荐10个高端大气上档次的PS教程(都是英文的哦) 1.为4D电影创建一副3D海报 2.制作3D水果文字 3.肖像图混合数字工艺 4.‘Doctrich – Pos ...
- Operator overloading
By defining other special methods, you can specify the behavior of operators on user-defined types. ...
- [vsftp]500 OOPS: cannot change directory
这个报错需要检查 1./etc/passwd 用户的主目录 2./etc/vsftpd/vuser_conf 下每个用户的local_root 3.每个用户目录给ftpuser加上rwx权限,一定要有 ...
- UNICODE字符串与多字节字符串的转换
相互转换的两个函数的声明: 1. 多字节字符串与宽字符串的转换 int MultiByteToWideChar( UINT CodePage, // code page,一般设为 CP_ACP DWO ...
- 智能指针(二):shared_ptr实现原理
前面讲到auto_ptr有个很大的缺陷就是所有权的转移,就是一个对象的内存块只能被一个智能指针对象所拥有.但我们有些时候希望共用那个内存块.于是C++ 11标准中有了shared_ptr这样的智能指针 ...
- JQ仿select框
点击[cy_title]后弹出[cy_list]层,选中里面的元素把值赋给 [cy_title] 在[cy_list] 打开的时候,点击其他地方可以关闭: HTML: <div class=&q ...
- Java 并发编程实战 摘要
第一部分小结 并发技巧清单: 可变状态是至关重要的(It's the mutable state ,stupid). 所有的并发问题结为如何协调对并发状态的访问,可变状态越少,就越容易确保线程安全性. ...
- Android IOS WebRTC 音视频开发总结(三十)-- ice协议异同
本文主要介绍ICE与SDP交互过程中的一些知识,支持原创,文章来博客园RTC.Blacker,转载请说明出处. 用过libjingle模块的同学都知道连接过程中candidate的获取与连接流程,一边 ...