微信公众号与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. Hadoop中Yarnrunner里面submit Job以及AM生成 至Job处理过程源码解析
			
    参考 http://blog.csdn.net/caodaoxi/article/details/12970993 Hadoop中Yarnrunner里面submit Job以及AM生成 至Job处理 ...
    
			
    2. 
						
  2. Flutter实战视频-移动电商-02.Flutter实战建立项目和编写入口文件
			
    02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flut ...
    
			
    3. 
						
  3. C#下Hashtable和Dictionary之间的差别
			
    Hashtable和Dictionary都是.Net下的表示键值对的集合,那么我们在使用中该选择Hashtable还是Dictionary?下边我们看看他们之间的区别:1.Dictionary< ...
    
			
    4. 
						
  4. TP5之数据库备份
			
    1.效果图 2.下载扩展类(  \extands\org\Baksql.php) 3.在  \public\static  里新建一个data 文件夹用来存放 .sql  的文件 4.使用方法 con ...
    
			
    5. 
						
  5. OPENGL_变换与坐标系
			
    参考:http://blog.csdn.net/kandyer/article/details/12449973 坐标系 世界坐标系:绝对坐标 物体坐标系:以物体自身为原点的坐标系 摄像机坐标系:以摄 ...
    
			
    6. 
						
  6. js中 call() ，apply()，bing()方法三者的用法和区别
			
    面试中经常会被问到的,或者做笔试题的时候也会有这样的问题,所以今天专门对这个问题做个总结: 先看个例子: var age = '19' var myObj = { name:'小赖', myAge:t ...
    
			
    7. 
						
  7. AttributedString 图片间距问题
			
    1.NSMutableAttributedString如何显示图片 NSMutableAttributedString *vipStr = [[NSMutableAttributedString al ...
    
			
    8. 
						
  8. SQL必知必会03 计算字段 获取当前日期时间 日期时间格式化
			
    
			
    9. 
						
  9. shell学习（4）- awk
			
    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...
    
			
    10. 
						
  10. SpringBoot | Data Access
			
    https://docs.spring.io/spring-boot/docs/current/reference/html/howto-data-access.html 配置数据源启动器.
    
			
    11.