微信公众号与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. Spring 事务管理高级应用难点剖析: 第 2 部分
			
    本文是“Spring 事务管理高级应用难点剖析” 系列文章的第 2 部分,作者将继续深入剖析在实际 Spring 事务管理应用中容易遇见的一些难点,包括混合使用多种数据访问技术(如 Spring JD ...
    
			
    2. 
						
  2. C++ 两款静态检查工具
			
    pclint(收费) http://www.gimpel.com/html/pcl.htmpc-lint是资格最老,最强力的代码检查工具,但是是收费软件,并且配置起来有一点点麻烦. ccpchecke ...
    
			
    3. 
						
  3. ADB命令小结
			
    )adb devices //查看启动的所有设备 )adb kill-server //重启设备 )adb start-server //启动设备 )adb -s emulator-(通过 adb d ...
    
			
    4. 
						
  4. CSS3：CSS 听觉参考手册
			
    ylbtech-CSS3:CSS 听觉参考手册 1.返回顶部 1. 听觉样式表 听觉样式表可把语音合成与音响效果相组合,使用户可以听到信息,而无需进行阅读. 听觉呈现可用于: 视觉能力低弱的人士 帮助 ...
    
			
    5. 
						
  5. py-day2-sys模块、os模块、运算符、列表、字典
			
    一.sys 模块 import sys print (sys.path)#打印环境变量 print(sys.aegv) #打印脚本的名字相对路径 print(sys.aegv)1 2 3 4 prin ...
    
			
    6. 
						
  6. hibernate学习二  基本用法
			
    一  映射文件User.hbm.xml 定义了持久化类实例是如何存储和加载的,这个文件定义了持久化类和表的映射. 根据映射文件,Hibernate可以生成足够的信息以产生所有的SQL语句,也就是类的实 ...
    
			
    7. 
						
  7. jQuery.validator.addMethod方法的使用
			
    该方法有三个api接口参数,name,method,messages addMethod(name,method,message)方法 参数 name 是添加的方法的名字. 参数 method 是一个 ...
    
			
    8. 
						
  8. Whitelabel Error Page异常
			
    做了个简单的springboot项目,一开始所有运行正常,之后写了一天的代码,再运行相同的代码,就一直报以下异常: Whitelabel Error Page This application has ...
    
			
    9. 
						
  9. 算法学习--Day9
			
    继上一次完成最小生成树后,这次我开始准备最短路径的程序. 最短路分为两种算法,第一个为Floyd算法,第二个为Dijkstra. 简单来说,Floyd是以点为参照对象,它使用三层循环求解当前图中所有点 ...
    
			
    10. 
						
  10. POJ3264 【RMQ基础题—ST-线段树】
			
    ST算法Code: //#include<bits/stdc++.h> #include<cstdio> #include<math.h> #include< ...
    
			
    11.