微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose
微信公众号与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</a>
以上代码，在微信浏览器内点击的时候，会出现没有任何相应的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 <!DOCTYPEhtml>02 <htmllang="en">03 <head>04 <meta charset="UTF-8">05 <title>第12章 12.2节</title>06 </head>07 <body>08 <h1 id="">:)</h1>09 <bstyle="font-size: 20px">App Store Demo！</b>10 <pstyle="font-size: 20px" id="conversionUrl"></p>11 <scripttype="text/javascript">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 </script>35 </body>36 </html>
摘自
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
