在微信中使用ionic1之填坑总结

最近做了不少微信上的游戏专题,遇到不少BUG,比如输入框和系统输入法的框架位置问题,在微信里打开有问题,但是在微信之外的浏览器是正常的,也真是醉了。于是想了一种方法,针对微信浏览器进行特殊的处理,方法如下:

如果你要是只是单纯的开发一个微信公众号,你实在是有太多的选择了。无论怎么选,绝对都不会选到用ionic1来做。

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端的微信浏览器对这个路由机制很不友好。

专门针对微信里做了单独处理。

但是,现在最终我们的微信公众号还是用ionic1来实现了。注意,我这里说的是实现,并不是开发。
因为,一开始我们是用ionic1来开发APP的。APP上的视图代码是用HTML+CSS,逻辑代码是用JS(angularJS)来实现的。那也就是说这一套代码,是可以移植到微信公众号上去的。
塞班岛贵宾会,这样一来,也就实现了一次开发,多个平台(Android、iOS、微信公众号)可以使用的伟大使命,极大的节省了开发周期以及后期的维护成本。

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

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

在开发APP的时候,尽管页面的逻辑是用HTML+CSS+angularJS来实现的。但是难免在APP会使用cordova插件去调用一些原生的东西,毕竟原生的体验确实要比Hybrid的好。比如相机相册、支付宝支付……

在配置文件config.js里面添加一个参数,is_app=true表示是在真机上APP运行,为false的时候表示是在微信公众号里面运行。
ps:这个config.js文件是自己添加到项目里面的,主要用于配置一些API域名之类的参数,方便在开发和发布时对环境的切换。

  1. Toast
    用HTML+CSS重新写一个样式出来代替即可。
  2. 支付
    所有的支付方式都可以走网页版支付,微信支付参照微信的API即可。这里面唯一麻烦一点的就是支付宝,因为微信把支付宝给封杀了。在微信里面做一个支付宝支付的跳转页面,让用户使用浏览器打开,然后在去调用支付宝进行支付。
  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(true)。
    第二步,在index.html的head里面添加代码<base
    href=”/”>,<meta name=”fragment” content=”!” > 。
    第三步,url去掉“#”之后,刷新url会出现404错误。这个时候只需在url上加上“#”即可,这个任务就只能放到站点服务器上去做重定向来处理了。在浏览器的地址栏,你会看到你的url最开始带“#”,然后因为开启了html5mode的原因,“#”又会消失。

  2. 为页面设置title、keyword和description
    在页面出现的时候,为页面设置相关信息。但并不是每个页面都需要做SEO,所以在页面消失的时候要记得把刚才设置的SEO信息置空。

  3. 使用Prerender服务,生成异步请求完成之后的页面喂给爬虫。

然后,关于用浏览器打开地址不正确的问题的处理。

如果仅限于是在微信浏览器里面使用,页面之间的跳转是完全没有问题的。
但是,我们有使用支付宝支付的功能,因为微信封杀的原因,只能使用浏览器打开的方式才能完成支付宝支付。

在做了去掉url里面的“#”和服务器端做添加“#”的重定向之后,从公众号的首页进入然后到使用浏览器打开支付宝支付跳转的页面,在Android的微信上是完全没有问题的。

但是,在iOS的微信上就会出现问题,使用浏览器打开支付宝跳转页面的时候,打开的是微信公众号的首页~~
另外,如果不是从首页进入的公众号,然后一直到支付宝跳转页面,使用浏览器打开。在浏览器上打开的是你最开始进入的那个页面,无论是在Android还是iOS的微信上都存在这个问题。

解决办法

另外写一套方法,专门用于微信公众号的页面之间的跳转。

  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. 关于微信浏览器的缓存问题。目前目测微信浏览器对js貌似没有做缓存,但是对html的缓存很严重。考虑在微信的页面跳转的时候,对url添加时间戳参数。(具体处理请参看下一篇文章:使用Gulp打包ionic1项目)

最后的最后,一定要考虑一下先

如果仅仅只是单纯的开发一个微信公众号,真心不建议使用ionic1或者angularJS来开发。
如果,你也是要开发Hybrid的APP,然后又要做微信公众号的话,那么可以考虑使用ionic1来完成Android、iOS
APP的开发和微信公众号的移植。

发表评论

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