H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信
前言:
h5分享到微信,h5使用微信支付这些功能,都需要先判断是否安装微信客户端,如果已安装就启动微信,如果没有安装微信,就提示用户前去安装。
我们可以通过访问微信提供的URL协议(weixin://)来实现这个功能,代码如下:
示例代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 6 <title>判断手机是否安装微信</title> 7 </head> 8 <body> 9 <a href="javascript:testApp('weixin://')" class="dl-btn" id="download">打开微信</a> 10 <script> 11 function testApp(url) { 12 var timeout, t = 1000, hasApp = true; 13 setTimeout(function () { 14 if (!hasApp) { 15 //没有安装微信 16 var r=confirm("您没有安装微信,请先安装微信!"); 17 if (r==true){ 18 location.href="http://weixin.qq.com/" 19 } 20 }else{ 21 //安装微信 22 } 23 document.body.removeChild(ifr); 24 }, 2000) 25 26 var t1 = Date.now(); 27 var ifr = document.createElement("iframe"); 28 ifr.setAttribute('src', url); 29 ifr.setAttribute('style', 'display:none'); 30 document.body.appendChild(ifr); 31 timeout = setTimeout(function () { 32 var t2 = Date.now(); 33 if (!t1 || t2 - t1 < t + 100) { 34 hasApp = false; 35 } 36 }, t); 37 } 38 </script> 39 </body> 40 </html>
扩展:
同样,通过上边的方法,也可以判断是否安装第三方app,前提是第三方app必须提供相应的URL协议,具体参考:H5外部浏览器直接调起App
后记:
看到有博友评论,贴了一百多行php前端后端的代码,所以也就重新整理了下这篇文章。使用本文方法,关键代码也就那么二十几行,大部分浏览器都是能正常调起微信的,一般来说这已经足够了。实在是不太明白为什么前端用js就能解决的问题还要搞一大堆php前端后端管理后台的东西,作为一个前端开发来说,实现一个功能自然是代码越精简越好,前端能实现的就尽量不要劳烦后端,h5能搞定的,就无需用什么php。
个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?
2016-06-29 HTML 字符实体
2016-06-29 html文本格式化
2016-06-29 使用css实现特殊标志或图形