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

news/2024/5/17 15:57:39/文章来源:https://blog.csdn.net/weixin_33815613/article/details/85691778

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

    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之后调用才有效。

   <!--最后放一下实现的效果,已经把底部栏彻底隐藏了咯-->

   

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_746364.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于大型网站技术演进的思考(六)--存储的瓶颈(6)

在讲数据库水平拆分时候&#xff0c;我列出了水平拆分数据库需要解决的两个难题&#xff0c;它们分别是主键的设计问题和单表查询的问题&#xff0c;主键问题前文已经做了比较详细的讲述了&#xff0c;但是第二个问题我没有讲述&#xff0c;今天我将会讲讲如何解决数据表被水平…

Redis简单案例(一) 网站搜索的热搜词

原文:Redis简单案例(一) 网站搜索的热搜词对于一个网站来说&#xff0c;无论是商城网站还是门户网站&#xff0c;搜索框都是有一个比较重要的地位&#xff0c;它的存在可以说是 为了让用户更快、更方便的去找到自己想要的东西。对于经常逛这个网站的用户&#xff0c;当然也会想…

正在从“vetur”获取代码操作_自己网站抓取手机号码代码

很多人疑惑网站和app中的手机电话号码数据是怎么抓取的&#xff0c;是如何实现的&#xff0c;我在这里说下。一、数据的来源现在数据的来源有很多种&#xff0c;我给大家说下常见的几种数据来源方式和抓取方式。1、运营商数据&#xff0c;这种来源方式的话是运营商会有一个http…

程序布置到服务器上速度慢_网站打开速度慢是什么原因?怎么解决呢?

“顾客是上帝”&#xff0c;不单单是商家赋予消费者的权利&#xff0c;也是消费者自身持有的观念。所以&#xff0c;很多用户在消费时&#xff0c;总是会站在自己的角度去思考问题&#xff0c;如访问某个网站时&#xff0c;希望网站能在3秒内缓冲自己想要的资讯&#xff0c;要不…

合法练习黑客技术?这15个网站也许可以帮到你

俗话说得好&#xff0c;最好的防守就是进攻&#xff0c;而这句话同样适用于信息安全领域。接下来&#xff0c;我们将给大家介绍15个最新的网络安全网站。无论你是开发人员、安全专家、审计人员、或者是渗透测试人员&#xff0c;你都可以利用这些网站来提升你的黑客技术。熟能生…

阶段巨献 - centos+php-fpm+mariaDB+svn+nodejs+redis(开机启动及配置远程连接),配置linux的php和nodejs网站运行环境。

前言 对于一个小项目和小公司而言&#xff0c;用php作为开发语言是很理智和聪明的选择&#xff0c;但是只要开发团队超过一个人&#xff0c;并且项目需要长时间持续开发下去&#xff0c;那么&#xff0c;一个相对稳定的运行环境及协同工作环境是必须的。 最近刚好转型做这些&…

【java开发部署】利用svn及ocaml及unison进行javaweb网站部署

前言 由于某个项目需要用到一些相对复杂的逻辑处理所以需要部署一个java网站作为支撑。于是就有了这篇文章。。 这篇文章立意是利用现有流程进行网站部署。 这个流程结合了&#xff1a; 阶段巨献 - centosphp-fpmmariaDBsvnnodejs&#xff0c;配置linux的php和nodejs网站运…

刚建的网站!

网址是:济南百度http://www.poster8.cnhttp://www.567wish.cn转载于:https://www.cnblogs.com/freeyzh/archive/2008/09/23/1297334.html

ASP.NET发布网站解决方案

ASP.NET发布网站解决方案 发布网站的时候有三个选项&#xff0c;很多人都不知道到底是怎么用的&#xff0c;简单说说&#xff1a; 对于想了解发布网站那些选项的人来说这个文章是不错的&#xff0c;当然这个文章不是我写的。 第一个选项指定发布后是不是可以修改aspx文件&…

WordPress4.9 最新版本网站安全漏洞详情与修复

2019独角兽企业重金招聘Python工程师标准>>> wordpress 目前互联网的市场占有率较高&#xff0c;许多站长以及建站公司都在使用这套开源的博客建站系统来设计网站&#xff0c;wordpress的优化以及html静态化&#xff0c;深受google以及搜索引擎的喜欢&#xff0c;全…

ASP.NET MVC3细嚼慢咽---(1)网站创建与发布

这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站。使用VS2010创建MVC3.0网站&#xff0c;需要下载MVC3.0的安装包&#xff0c;这个大家可以去网络上下载。 1.项目创建打开VS2010&#xff0c;选择 文件--新建项目---ASP.NET MVC3 web应用程序&#xff0c;如下图接着选择…

中等规模网站系统架构示意图

前言 略 经过思考及修正&#xff0c;目前可以将系统架构修改成为&#xff1a; 下一阶段&#xff0c;添加了rocketmq这个消息系统进行解耦&#xff0c;于是&#xff0c;架构变了一下&#xff1a; 近日&#xff0c;又对集群架构作了一番思考&#xff0c;于是又有了一点调整&…

ab测试网站吞吐率介绍

2019独角兽企业重金招聘Python工程师标准>>> 吞吐率介绍 何为吞吐率&#xff0c;解释下&#xff0c;就是在单位时间内服务器处理的请求数&#xff0c;这也许是我们衡量一个WEB站点很重要的一个指标&#xff0c;当10个用户同时发起100请求和1 个用户 同时向服务器发…

全面进入HTTPS网站加速新时代,CDN上线免费证书

摘要&#xff1a; 9月份发布的Chrome 70&#xff0c;将不再信任Symantec原品牌CA签发的数字证书。据悉&#xff0c;DigCert已经完全接管了Symantec证书业务&#xff0c;从接管之日起签发的证书已经是DigiCert的根证书&#xff0c;阿里云签发的免费证书都是DigiCert的根&#xf…

一步步构建大型网站架构

之前我简单向大家介绍了各个知名大型网站的架构&#xff0c;亿万用户网站MySpace的成功秘密、Flickr架构、YouTube网站架构、PlentyOfFish 网站架构学习、WikiPedia技术架构学习笔记。这几个都很典型&#xff0c;我们可以从中获取很多有关网站架构方面的知识&#xff0c;看了之…

spring boot 对多模块多网站项目利用webjars共用网站js/css等静态资源文件

前言 对于开发多个网站而言&#xff0c;每次都要手动将js/css/images复制过去是很烦的事情&#xff0c;尤其是js等修改以后要人工逐个更新那就更麻烦了。 下面就是解决这个问题的方案&#xff0c;请先参考&#xff1a; 打包WebJar实现对静态资源文件的统一依赖管理 下面是摘抄…

如何将网站升级为HTTPS协议(整理)

如何将网站升级为HTTPS协议&#xff08;整理&#xff09; 一、总结 一句话总结&#xff1a; 获取证书&#xff08;有免费有付费&#xff09;&#xff1a;证书是一个二进制文件&#xff0c;里面包含经过认证的网站公钥和一些元数据&#xff0c;要从经销商购买。 安装证书&#x…

大型网站系统架构分析

大型网站系统架构分析 千万级的注册用户&#xff0c;千万级的帖子&#xff0c;nTB级的附件&#xff0c;还有巨大的日访问量&#xff0c;大型网站采用什么系统架构保证性能和稳定性&#xff1f; 首先讨论一下大型网站需要注意和考虑的问题。 数据库海量数据处理&#xff1a;负载…

【网站开发】搭建一个属入自己的网站

概述 搭建一个属入自己的网站 1.购买域名 主机屋http://www.zhujiwu.com/ 购买的域名&#xff1a;TechShare.xyz 2.购买虚拟主机&#xff08;空间&#xff09; http://www.zhujiwu.com/vhost/ 4.控制面板&#xff0c;配置虚拟主机 设置FTP密码 5.文件管理 管理方法&#xff1a;…

说说大型高并发高负载网站的系统架构(转)

转载请保留出处&#xff1a;俊麟 Michael’s blog (http://www.toplee.com/blog/?p71) Trackback Url : http://www.toplee.com/blog/wp-trackback.php?p71 鄙人先后在CERNET做过拨号接入&#xff0c;在Yahoo&3721搞过搜索前端&#xff0c;在猫扑处理过mop.com的架构升级…