如何判断是否为微信浏览器,之判断微信浏览器

方今做了数不完Wechat上的游玩专项论题,蒙受重重BUG,比如输入框和系统输入法的框架地点难点,在微信里张开反常,可是在Wechat之外的浏览器是平常的,也正是醉了。于是想了一种办法,针对Wechat浏览器进行非常的拍卖,方法如下:

若是您要是只是只是的付出叁个Wechat大伙儿号,你实际是有太多的挑肥拣瘦了。无论怎么选,相对都不会选到用ionic1来做。

序言:作为三个做IOS的程序猿。难免会和H5有一对交叉和互相的时候。于是那二日就遇上了一个标题了。集团要做八个Wechat的二个共享成效。页面上边有叁个按键必要点击然后连接到应用软件 store 上厂商温馨的APP 下载页面去指引客商举行下载。 不过》别的的各类浏览器。什么百度,UE浏览器  safari 等各类浏览器能够张开,就以此Wechat是个奇葩。怎么张开都相当。于是难点出来了。须求对Wechat浏览器进行特别管理。那么首先就得去推断一下是或不是是Wechat浏览器。然后在去做出相应的管理。或许显示五个指点图片 让客商点击右上角的。。。。  然后接收此外浏览器进行张开。

window.onload=function{window.location.href="http://www.jiangweishan.com";}}//判断是否是微信浏览器functionisWeiXin(){varua=window.navigator.userAgent.toLowerCase();if(ua.match=='micromessenger'){returntrue;}else{returnfalse;}}

首先,ionic是二个超重的框架,因为用的是angularJS。
其次,angularJS开荒出来的是一个单页面包车型大巴行使,全数的页面共用二个header、一个body。
其三,站点的seo优化对angularJS的路由机制不和煦,iOS端的Wechat浏览器对那么些路由机制十分不协调。

接下去踏向戏弄时间: 

嘲谑1:为何Wechat浏览器不让展开外界的连接呢。搞得这么坚苦。

嘲谑2:为何微信浏览器下载都不让呢。

嘲讽3: 为啥大伙儿号那样多约束还如此叼。还如此受应接呢。

调侃4:待定想嘲笑的上面留言哦。笔者给你们加上去。

javascript 推断Wechat浏览器的艺术:

大家知晓 js 能够透过 window.navigator.userAgent
来获得浏览器的相干音讯,举例:Mozilla/5.0 (Windows NT 5.1卡塔尔AppleWebKit/537.36 (KHTML, like Gecko卡塔尔(قطر‎ Chrome/33.0.1750.154
Safari/537.36,那么大家也能够经过该办法来博取Wechat内置浏览器的相关新闻:Mozilla/5.0
(三星; CPU 华为 OS 7_1_1 like Mac OS X卡塔尔国 AppleWebKit/537.51.2
(KHTML, like Gecko卡塔尔(قطر‎ Mobile/11d201 MicroMessenger/5.3。依据着重字
MicroMessenger 来判断是不是是Wechat内置的浏览器。剖断函数如下:

functionisWeiXin(){

varua = window.navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i) == ‘micromessenger’){

returntrue;

}else{

returnfalse;

}

}

极度针对Wechat里做了独立管理。

可是,以后最终大家的Wechat公众号依旧用ionic1来得以达成了。注意,作者这里说的是落到实处,并非开荒。
因为,一齐初大家是用ionic1来开采APP的。APP上的视图代码是用HTML+CSS,逻辑代码是用JS(angularJS)来兑现的。那也正是说这一套代码,是足以移植到Wechat大伙儿号上去的。
那样一来,也就贯彻了一回开荒,七个阳台(Android、iOS、Wechat大伙儿号)能够应用的壮士职责,不小的节约了开拓周期以至后期的保险资金。

demo:看下面:

window.onload =function(){

if(isWeiXin()){

varp = document.getElementsByTagName(‘p’);

p[0].innerHTML = window.navigator.userAgent;

}

}

functionisWeiXin(){

varua = window.navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i) ==’micromessenger’){

returntrue;

}else{

returnfalse;

}

}

认清是不是是微信内置浏览器

demo 下载地址:

好了,废话不再多说,走入正题!

假如用Wechat浏览器张开药方可看看上边包车型大巴文字

:小同伙火速测量试验下啊。

首先,是对APP调用原生的插件的管理。

在开荒应用程式的时候,就算页面包车型大巴逻辑是用HTML+CSS+angularJS来完结的。不过免不了在应用程式会利用cordova插件去调用一些原生的事物,究竟原生的体会真正要比Hybrid的好。举例相机相册、支付宝支付……

在陈设文件config.js里面增多叁个参数,is_app=true表示是在真机上应用软件运维,为false的时候表示是在Wechat公众号内部运维。
ps:那么些config.js文件是温馨增加到项目里面包车型客车,首要用来配置部分API域名之类的参数,方便在开荒和布告时对情形的切换。

  1. Toast
    用HTML+CSS重新写二个样式出来代替就可以。
  2. 支付
    持有的开拓情势都能够走网页版支付,Wechat支付参照Wechat的API就可以。这之中独一麻烦一点的正是支付宝,因为Wechat把支付宝给封闭杀绝了。在Wechat里面做一个支付宝支出的跳转页面,让客商接受浏览器展开,然后在去调用支付宝进行支付。
  3. 双反相机和相册
    HTML5的input标签是扶植调用设备的相机以致相册的。
  4. 页面PV统计
    咱俩用的百度总结的代码。在index.html页面引用百度计算的js代码,然后在app.js里面增加$locationChangeStart的监听,在监听的拍卖措施里面调用百度总括的PV总计API。
  5. 微信分享
    调用微信的分享API,然后在每一种页面现身的时候拉长页面包车型大巴呼应的享受音讯(title,content…)。

附带,再来聊聊关于ionic1大概angularJS站点的SEO的落到实处。

正规的网址都应该是三个页面正是三个整机的HTML文件,对各种页面SEO的处理都是在每种HTML文件里的header上的title和content里变成的。
唯独,在一上马自己就说过,angularJS开荒出来的是叁个单页面包车型地铁施用,唯有二个header和二个body。

那就是说应该怎么落到实处angualrJS的SEO呢?

因为ionic1使用的始angularJS的路由机制,所以在浏览器的地点栏你会发觉url是带了贰个“#”的。不过,找寻引擎的爬虫却力不能够及分辨到“#”之后的门路。

  1. 去掉url里面的“#”
    第一步,在app.js的.config里面增添代码$locationProvider.html5Mode(trueState of Qatar。
    第二步,在index.html的head里面增加代码<base
    href=”/”>,<meta name=”fragment” content=”!” > 。
    第三步,url去掉“#”之后,刷新url会情不自禁404谬误。此时只需在url上丰裕“#”就可以,那一个职责就一定要放到站点服务器上去做重定平昔管理了。在浏览器的地址栏,你会看出你的url最开首带“#”,然后因为展开了html5mode的原故,“#”又会熄灭。

  2. 为页面设置title、keyword和description
    在页面现身的时候,为页面设置相关音信。但而不是每一种页面都亟待做SEO,所以在页面消失的时候要记得把刚刚设置的SEO新闻置空。

  3. 使用Prerender劳务,生成异步诉求完结今后的页面喂给爬虫。

下一场,关于用浏览器展开地址不得法的标题标拍卖。

一旦只限于是在Wechat浏览器里面使用,页面之间的跳转是全然没非凡的。
不过,大家有利用支付宝支出的功力,因为Wechat封闭肃清的案由,只好采纳浏览器张开的方法能力达成支付宝支出。

在做了去掉url里面包车型客车“#”和劳务器端做加多“#”的重定向之后,从大伙儿号的首页步入然后到应用浏览器打费用付宝支付跳转的页面,在Android的Wechat上是完全没十分的。

只是,在iOS的Wechat上就能够冒出难题,使用浏览器打开支付宝跳转页面包车型地铁时候,张开的是Wechat大伙儿号的首页~~
除此以外,如若不是从首页进入的民众号,然后径直到支付宝跳转页面,使用浏览器打开。在浏览器上开垦的是您最起头步向的不行页面,无论是在Android照旧iOS的Wechat上都留存这几个标题。

清除办法

别的写一套方法,专门用来Wechat公众号的页面之间的跳转。

  1. 往前跳转,使用window.location.href =
    “#/[state.url]?[stateParam]=[arg1]”
    e.g. window.location.href = “#/tab/index?date=20170901”
  2. 页面再次回到,window.history.go(backCount卡塔尔。

末段,还足以做的越来越好

  1. 进去首页加载超级慢。尽管在等级次序中使用了requireJS,抽离了controller和service,但从未达成按需加载,可能说是懒加载。
  2. 至于Wechat浏览器的缓慰劳题。近年来目测Wechat浏览器对js貌似未有做缓存,不过对html的缓存非常惨痛。思谋在Wechat的页面跳转的时候,对url增多时间戳参数。(具体管理请参见下一篇小说:使用Gulp打包ionic1项目)

终极的终极,必供给思量一下先

假若仅仅只是单纯的支出多个Wechat民众号,真心不提议选取ionic1恐怕angularJS来开垦。
即使,你也是要费用Hybrid的应用软件,然后又要做Wechat群众号的话,那么能够思忖选取ionic1来成功Android、iOS
应用软件的费用和Wechat群众号的移植。

发表评论

电子邮件地址不会被公开。 必填项已用*标注