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

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

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

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

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

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

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

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

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

什么办法呢?

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

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

1

2

3 document.addEventListener('WeixinJSBridgeReady', functiononBridgeReady() {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/2G12 network_type:fail 网络断开连接13 network_type:wwan 2g或者3g*/

14 });15 //设置分享到朋友圈的内容

16 sendMessage();17 });18

19 //退出微信内浏览器

20 functionclose_wechat(){21 if( window.confirm('你确定要离开微网站吗?') ){22 WeixinJSBridge.call("closeWindow");23 }24 }25 //初始化分享内容的函数

26 functionsendMessage(){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

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

addEventListener('WeixinJSBridgeReady',.....

这个代码的作用是通过listener来判断weixinJSBridge是否准备完毕。可能是因为初始化或者加载的问题,网页直接加载时不能执行对微信浏览器操作的代码,因为相对应的接口或者说操作对象是undefined,只有在WeixinJSBridgeReady之后调用才有效。

api 微信内置浏览器js_【微网站开发】之微信内置浏览器API使用相关推荐

  1. 微信开发,微网站开发的详细流程

    把公司开设在微信上,把自己的生意装到用户的手机里,传统生意要做到互联网上,要有互联网站,在移动互联网上,就需要有微网站.对企业而言,微网站不仅是企业的一个手机版网站,更是移动互联网时代的企业应用与商业 ...

  2. [转]微信小程序和H5微网站有什么区别?

    时常有用户咨询:微信小程序和H5微网站有什么区别?哪个更好?这个问题,对于普通用户确实难以区分,今天我们就一起来对比一下两者的区别. 要对比,首先我们要知道,什么是微信小程序?微信官方定义:微信小程序 ...

  3. 手机网站开发必修课[1]:手机浏览器 本文来自:http://www.fool2fish.cn/?p=290

    前言: 头大的是,除了自己公司已有的一些经验,网上恐怕没有过多的(公开的)文档可以参考.  09年上半年的工作重心全在手机网页开发上面,这使得自己某种程度上也成了拓荒者.现将这段时间的开发心得同大家分 ...

  4. 手机网站开发必修课[1]:手机浏览器

    手机浏览器,又称微浏览器.迷你浏览器或者无线因特网浏览器,是被设计用于像手机或者PDA之类的无线设施的网页浏览器.手机浏览器针对在便携设备上的小屏幕网页显示进行了专门的优化,以使网页内容显示最高效.手 ...

  5. pc网站和手机端h5网站开发接入微信支付

    有关支付类开发,现在比以前要简单很多了,微信和支付宝两大支付巨头早已经给出了非常详细的接入文档,并且迭代了好多版本,但在实际开发中其实文档的可读性还是有些磕磕绊绊的,而且也有一些坑需要注意.以微信支付 ...

  6. 微信怎么自动加好友java_iOS逆向开发之微信自动添加好友功能

    这一次,小程演示怎么让一个APP自动地运行,从而代替手工的操作.同样以"微信"以例,实现在一个微信群里面,对所有的成员,自动地一个一个地发出添加好友的请求. 知识点还是之前介绍的东 ...

  7. 微信食堂就餐人数统计小程序开发,微信饭堂报餐人数,怎样统计公司每日就餐人数,就餐人数不固定如何统计,制作报餐微信小程序

    单位食堂想控制成本 ,想弄个小程序 ,只要实现扫二维码预约第二天吃饭和扫二维码领餐 ,方便后厨统计预约人数做饭 并统计就餐人头看看谁不来, 没预约就不让吃饭.如何实现每天用餐报数,统计就餐人数的小程序 ...

  8. ios 用浏览器打开html,iOS开发:调起Safari浏览器打开Url(对中文等特殊字符进行处理)...

    开发语言:Swift 开发生态:iOS 本人Android 小白一枚~ 这里以调起百度网页为例. 先对中文等特殊字符进行处理 let urlString = "https://www.bai ...

  9. jee-weapp是一套基于jfinal,dubbo微服务开发的微信小程序商城项目,首次开放全部拼团前后台源码

    介绍: jee-weapp 简介 jee-weapp基于微信第三方开放平台基础框架, 多模块化开发不同的微信营销插件, 支持微信第三方平台扫码授权公众号,小程序 支持微信第三方平台覆盖全网发布 支持小 ...

最新文章

  1. oracle中类似indexof用法_instr函数
  2. 用c语言编写图书成绩管理系统,学生成绩管理系统(c语言编写).doc
  3. 网络传输为什么要序列化_企业为什么要选择网络营销外包
  4. 目前最全的存储形式总结
  5. Android官方开发文档Training系列课程中文版:使用Fragment构建动态UI之与其它Fragment通信
  6. 【机房重构】组合查询--存储过程
  7. 一键安装iis php mysql环境_Windows Server服务器环境配置:一键安装IIS+PHP+MySQL环境...
  8. C# MysqlHelper 执行reader时,遇到致命错误或者超时
  9. 【Android 教程系列第 1 篇】如何用 Android Studio 查看项目的包名
  10. win10无法连接wifi_更新WIN10 1903遇到旧版高通驱动无法连接WIFI重新安装网卡驱动...
  11. 非线性拟合(C++版)
  12. 计算机wmi配置错误,系统没有WMI服务、WMI错误修复办法
  13. Web漏洞之CORS与JSONP跨域漏洞
  14. 全球链界科技发展大会_科技界的女性-过去,现在和未来
  15. uniapp 小程序支付功能
  16. GateWayWorker 部署
  17. C# serialport串口接收数据异常,出现很多3F的解决方法
  18. 7-11 最长的单词
  19. Elasticsearch7.8
  20. 超级鹰解决点触验证码

热门文章

  1. Python实现两两交换链表中的节点
  2. 上计算机课睡觉检讨书400,上自习课睡觉检讨书500字范文【三篇】
  3. 使用CCleaner删除系统还原点
  4. taobao tt 配置
  5. 一个新进前端小白实习僧的初次探索
  6. STM32模拟I2C程序
  7. uni-app开发微信小程序,H5 关于压缩上传图片的问题
  8. 29 使用内核里的W25Q32设备驱动
  9. 大学生html5实训心得体会,实训心得体会600字(精选5篇)
  10. 微信公众平台学习笔记