微信公众号与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. webpack 小demo
			
    1 安装node.js 2 安装cnpm 3 安装webpack cnpm install --save-dev webpack 对于大多数项目,我们建议本地安装.这可以使我们在引入破坏式变更的依赖时 ...
    
			
    2. 
						
  2. 在项目中添加全局的 pch 文件
			
    说明,本片博文仅仅是方便自己以后在添加 pch 文件的配置时候参照使用,担心一些配置的路径由于时间而遗忘. (1)建一个 pch 文件 注意下面要 在 Targets 后打上 对号 (2)对该文件进行 ...
    
			
    3. 
						
  3. linux进程状态D和Z的处理
			
    长期生活在 Linux 环境里,渐渐地就有一种环保意识油然而生.比如,我们会在登录提示里写上"悟空,我跟你说过叫你不要乱扔东西,乱扔东西是不对的.哎呀我话没说完你怎么把 棍子扔掉了?月光宝盒 ...
    
			
    4. 
						
  4. Bean的基于XML配置方式
			
    基于XML配置 Beans.xml <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns= ...
    
			
    5. 
						
  5. python 数据可视化
			
    一.基本用法 import numpy as np import matplotlib.pyplot as plt x = np.linspace(-1,1,50) # 生成-1到1 ,平分50个点  ...
    
			
    6. 
						
  6. apk重签名的两种方法
			
    因为robotium要求被测应用和测试代码要有一致的签名, 所以需要将apk包重签名. 方法一:通过re-sign.jar来产生debug key的apk(不适用于jdk 7以上) re-sign.j ...
    
			
    7. 
						
  7. Flutter实战视频-移动电商-65.会员中心_订单区域UI布局
			
    65.会员中心_订单区域UI布局 我的订单区域 member.dart写我的标题的方法 布局使用瓦片布局 先做修饰,decoration颜色的背景,下边线的样式 //我的订单标题 Widget _or ...
    
			
    8. 
						
  8. .NET开发人员如何开始使用ML.NET
			
    随着谷歌,Facebook发布他们的工具机器学习工具Tensorflow 2和PyTorch ,微软的CNTK 2.7之后不再继续更新(https://docs.microsoft.com/zh-cn ...
    
			
    9. 
						
  9. Mac下Vim编辑快捷键小结
			
    一.移动光标 1.移动到行尾"$",移动到行首"0"(数字),移动到行首第一个字符处"^" 2.移动到段首"{",移动到 ...
    
			
    10. 
						
  10. oracle的日期数据类型
			
    https://blog.csdn.net/qq_33573235/article/details/78154928(转)
    
			
    11.