微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose
程序员文章站
2022-05-16 21:31:17
...
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK
微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置
微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫
在目前的微信浏览器中,有的版本不支持APP Store页面,估计是微信浏览器有什么限制或者有什么利益冲突吧,但是以腾讯的开放程度来看没必要限制。
例如在页面中写个如下的代码:
01 href="https://itunes.apple.com/cn/app/wo-ai/id955760733?mt=8">download
以上代码,在微信浏览器内点击的时候,会出现没有任何相应的bug,但是如果此地址变为360、百度等链接地址,那么就会没问题。
解决这个问题的主要方案就是在微信浏览器内,利用微信的API。
第1步,判断浏览器是否为微信浏览器,JS代码如下:
01 varisWechat = function (){02 var ua = navigator.userAgent.toLowerCase();03 if(ua.match(/MicroMessenger/i)=="micromessenger") {04 return true;05 } else {06 return false;07 }08 }
当然,您也可以采用上一节介绍的后台语言(PHP、Ruby、nodejs等)判断浏览器是否为微信浏览器。
第2步,将原来的链接,利用“encodeURIComponent”编码,结合“http://mp.weixin.qq.com/mp/redirect?url=”生成新的链接地址,结果如下:
01 "http://mp.weixin.qq.com/mp/redirect?url=https%3A%2F%2Fitunes.apple.com%2Fcn%2Fapp02 %2Fwo-ai%2Fid955760733%3Fmt%3D8"
第3步,完整的示例代码方法如下:
01 0203 04 05 第12章 12.2节 06 07 08:)09 App Store Demo!10 11 12 var isWechat = function(){13 var ua =navigator.userAgent.toLowerCase(); //获取浏览器字符14 if(ua.match(/MicroMessenger/i)=="micromessenger") { //判断是否为微信15 return true;16 } else {17 return false;18 }19 },20 conversionUrl = function(url){ //根据浏览器类型转换url21 if(isWechat()){22 return23 "http://mp.weixin.qq.com/mp/redirect?url="+encodeURIComponent(url);//转换为微信内可用的24 地址25 }else{26 return url; //不转换27 }28 },29 _url =30 conversionUrl("https://itunes.apple.com/cn/app/wo-ai/id955760733?mt=8");31 window.onload = function(){ //页面载入成功后修改dom32 document.getElementById("conversionUrl").innerHTML = "转换之后的url:"+_url;33 }34 35 36
上一篇: PHP检测获取内存信息
推荐阅读
-
微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose
-
微信公众号与HTML 5混合模式揭秘1--如何部署JSSDK_html/css_WEB-ITnose
-
【原创】微信公众号与HTML 5混合模式揭秘--JSSDK获取地理位置_html/css_WEB-ITnose
-
微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose
-
微信公众号与HTML 5混合模式揭秘1--如何部署JSSDK_html/css_WEB-ITnose
-
【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose
-
【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose