微信公众号与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     <h1style="font-size: 40px">:)</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){                                   //根据浏览器类型转换url

21                     if(isWechat()){

22                         return

23     "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(){                                                     //页面载入成功后修改dom

32            document.getElementById("conversionUrl").innerHTML = "转换之后的url："+_url;

33         }

34     </script>

35     </body>

36     </html>

　　



摘自
												


											
微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1的更多相关文章
	

    
								
  1. 【原创】微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫
		
    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置   在JS ...
    
		
    2. 
						
  2. 【原创】微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置
		
    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查 ...
    
		
    3. 
						
  3. 微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK
		
    本文是连载JSSDK+H5的书,这里是第一篇揭秘————如何部署JSSDK 部署JSSDK不会太难,有时候需要一点后台知识,但也不是太难的那种,本节主要是用PHP作为后台参考语言,为了照顾初学者,把代 ...
    
		
    4. 
						
  4. 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
		
    本书是分享微信jssdk开发的第二篇.     4.2.1 项目需求 需求说明:实现微信端的手机用户,点击按钮选取1张图片,分享到朋友圈. 4.2.2 需求分解 通过对需求的了解,可以将其分解为: ( ...
    
		
    5. 
						
  5. Django + Apache + 树莓派 搭建内网微信公众号服务器
		
    其实早在微信开放公众号开发平台时就想弄一个自己的公众号服务器,奈何对web服务器搭建和开发一窍不通,只是注册了一下开发者帐号,并没有采取行动,万恶的拖延症. 前一年,开始接触python,打开了神奇世 ...
    
		
    6. 
						
  6. Java开发微信公众号（五）---微信开发中如何获取access_token以及缓存access_token
		
    获取access_token是微信api最重要的一个部分,因为调用其他api很多都需要用到access_token.比如自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等在请求的时候 ...
    
		
    7. 
						
  7. Java开发微信公众号（四）---微信服务器post消息体的接收及消息的处理
		
    在前几节文章中我们讲述了微信公众号环境的搭建.如何接入微信公众平台.以及微信服务器请求消息,响应消息,事件消息以及工具处理类的封装:接下来我们重点说一下-微信服务器post消息体的接收及消息的处理,这 ...
    
		
    8. 
						
  8. Java开发微信公众号（三）---微信服务器请求消息，响应消息，事件消息以及工具处理类的封装
		
    在前面几篇文章我们讲了微信公众号环境的配置 和微信公众号服务的接入,接下来我们来说一下微信服务器请求消息,响应消息以及事件消息的相关内容,首先我们来分析一下消息类型和返回xml格式及实体类的封装. ( ...
    
		
    9. 
						
  9. Java开发微信公众号（二）---开启开发者模式，接入微信公众平台开发
		
    接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 3.依据接口文档实现业务逻辑 资料准备: 1.一个可以访问的外网,即80的访问端口,因为微信公众号接 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. FFmpeg常用命令 （一）
			
    常用参数说明: 主要参数:-i 设定输入流-f 设定输出格式-ss 开始时间视频参数:-b 设定视频流量,默认为200Kbit/s-r 设定帧速率,默认为25-s 设定画面的宽与高-aspect 设定 ...
    
			
    2. 
						
  2. tabbar 设置样式
			
    app.json配置文件中,使用时需要把注释删除,配置文件不支持备注 tabbar:{ color:'#fff',//字体颜色  需要时HexColor,设置成red 无法识别,下方颜色设置同理 se ...
    
			
    3. 
						
  3. java单例的几种写法
			
    转载出处:http://cantellow.javaeye.com/blog/838473 第一种(懒汉,线程不安全): public class Singleton { private static ...
    
			
    4. 
						
  4. sql语句之约束条件
			
    not null约束,需设置默认值 sex enum('male','female') not null default 'male' unique 约束,值唯一 单列唯一: create table ...
    
			
    5. 
						
  5. appium版本之谜
			
    关于appium网上提到的版本是一头雾水,现解释如下: 首先,官网下载的 appium-desktop-Setup-1.3.1.exe是appium桌面版,将appium服务器配置可视化. 而网上提到 ...
    
			
    6. 
						
  6. 【Linux学习】Linux文件系统2—linux常用目录结构、绝对路径、相对路径
			
    Linux文件系统2-linux常用目录结构.绝对路径.相对路径 一. 常见目录结构总结 Linux目录结构就是"树形结构",常见的目录结构: /bin  系统需要的命令位于此目录 ...
    
			
    7. 
						
  7. LeetCode: 476 Number Complement(easy)
			
    题目: Given a positive integer, output its complement number. The complement strategy is to flip the b ...
    
			
    8. 
						
  8. JAVA基础--JAVA API集合框架16
			
    一.Map集合 1. map集合介绍 Collection集合的特点: 集合中存储的所有元素都是单一元素,元素和元素之间没有必然的关系.因此我们把Collection集合也称为单列集合. Map集合: ...
    
			
    9. 
						
  9. DirectX实现球面纹理映射
			
    http://www.cnblogs.com/graphics/archive/2011/09/13/2174022.html DirectX实现球面纹理映射 介绍 球面纹理映射就是将一个平面纹理映射 ...
    
			
    10. 
						
  10. uoj#282. 长度测量鸡（构造）
			
    传送门 打表题--只有\(n\leq 3\)有解否则无解→_→ 或者严格证明的话是这样,因为算上端点一共\(n+1\)个点,共\(\frac{n(n+1)}{2}\)个点对,所以点对之间两两距离不相等 ...
    
			
    11.