微信公众号与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. Java笔记（九）
			
    网络编程: UDP传输: (UdpSend发送端)通过UDP传输方式,将一段文字数据发送出去: (1)建立udpsocket服务 (2)提供数据,并将数据封装到数据包中 (3)通过socket服务的发 ...
    
			
    2. 
						
  2. NOI2017退役记
			
    Day1 全世界都200+我162,考场上fread和fwrite写挂了直接删了,然后就被卡了48也是没谁了. Day2 2-SAT写挂,就没有然后了. 明明退役前一直都在做自己最想做的事情,连这就是 ...
    
			
    3. 
						
  3. 「LuoguP3379」 【模板】最近公共祖先（LCA）
			
    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...
    
			
    4. 
						
  4. 安装tensorflow-gpu出现的问题
			
    1.Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/usr/local/l ...
    
			
    5. 
						
  5. SNMP：简单网络管理协议
			
    基于 TCP/IP 的网络管理包括两部分:网络管理站 (manager) 和被管理的网络单元(被管设备).这些被管设备的共同点就是都运行 TCP/IP 协议.管理进程和代理进程之间的通信有两种方式,一 ...
    
			
    6. 
						
  6. 如何更快更好的写出cnblog博客？windows live writer推荐
			
    之前总是会羡慕网上那些技术牛人的博客都写的那么给力,后来一搜发现还是有工具可用的. 这里就推荐一款写博客的"神器",Windows Live Writer (Get It Now! ...
    
			
    7. 
						
  7. 微信小程序开发之真机预览
			
    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...
    
			
    8. 
						
  8. 6 手写Java LinkedHashMap 核心源码
			
    概述 LinkedHashMap是Java中常用的数据结构之一,安卓中的LruCache缓存,底层使用的就是LinkedHashMap,LRU(Least Recently Used)算法,即最近最少 ...
    
			
    9. 
						
  9. E20190402-hm
			
    porxy n. 代理服务器; 代表权; 代理人,代替物; 委托书; enroll  v. 招收; 注册; 登记; 加入; enrollment n. 注册; 登记; 入会;
    
			
    10. 
						
  10. PL/SQL 的 事务处理
			
    原文连接 http://blog.csdn.net/lhl6688/article/details/42874109 BEGIN DECLARE V_COUNT    INTEGER; -- 表中记录 ...
    
			
    11.