文档章节

微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1

柯南和由美
 柯南和由美
发布于 2015/11/30 17:29
字数 661
阅读 111
收藏 5

微信公众号与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     var isWechat = 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     <!DOCTYPE html>
02     <html>
03     <head>
04         <meta charset="UTF-8">
05         <title>第12章 12.2节</title>
06     </head>
07     <body>
08     <h1 style="font-size: 40px">:)</h1>
09     <b style="font-size: 20px">App Store Demo!</b>
10     <p style="font-size: 20px" id="conversionUrl"></p>
11     <script type="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>

摘自 


© 著作权归作者所有

共有 人打赏支持
柯南和由美
粉丝 5
博文 49
码字总数 32947
作品 0
海淀
能挣钱的微信JSSDK+H5混合开发

H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满。微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台、零成本,让大众创业变得更方便。 我觉得现在...

柯南和由美
2015/10/12
64
0
微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示。 图3.3 3.2节文件结构 另外,提醒读者一下,wxJSSDK.js文件的JSSDK环境配置中,需...

woIwoI
2017/06/14
0
0
微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示。 图3.3 3.2节文件结构 另外,提醒读者一下,wxJSSDK.js文件的JSSDK环境配置中,需...

woIwoI
2017/06/15
0
0
Cordova App 打包全揭秘

[运营专题]零预算引爆个人和企业品牌【原文链接】 Selenium 自动化测试从零实战【原文链接】 原来这样做,才能向架构师靠近【原文链接】 TensorFlow on Android:物体识别【原文链接】 Tens...

gitchat
2017/11/17
0
0
微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页...

pdzhsy
07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(一)软件测试专题——之Linux常用命令篇01

本文永久更新地址:https://my.oschina.net/bysu/blog/1931063 【若要到岸,请摇船:开源中国 不最醉不龟归】 Linux的历史之类的很多书籍都习惯把它的今生来世,祖宗十八代都扒出来,美其名曰...

不最醉不龟归
18分钟前
3
0
蚂蚁金服Java开发三面

8月20号晚上8点进行了蚂蚁金服Java开发岗的第三面,下面开始: 自我介绍(要求从实践过程以及技术背景角度着重介绍) 实习经历,说说你在公司实习所做的事情,学到了什么 关于你们的交易平台...

edwardGe
25分钟前
7
0
TypeScript基础入门 - 函数 - this(三)

转载 TypeScript基础入门 - 函数 - this(三) 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.4 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
35分钟前
0
0
Spark core基础

Spark RDD的五大特性 RDD是由一系列的Partition组成的,如果Spark计算的数据是在HDFS上那么partition个数是与block数一致(大多数情况) RDD是有一系列的依赖关系,有利于Spark计算的容错 RDD中每...

张泽立
42分钟前
0
0
如何搭建Keepalived+Nginx+Tomcat高可用负载均衡架构

一.概述 初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最简单的部署方式,但是随着业务的不断扩大,系统的访问量逐渐的上升,单机部署的模式已...

Java大蜗牛
57分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部