如果你要是只是单纯的开发一个微信公众号,你实在是有太多的选择了。无论怎么选,绝对都不会选到用ionic1来做。
第一,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域名之类的参数,方便在开发和发布时对环境的切换。
- Toast
用HTML+CSS重新写一个样式出来代替即可。 - 支付
所有的支付方式都可以走网页版支付,微信支付参照微信的API即可。这里面唯一麻烦一点的就是支付宝,因为微信把支付宝给封杀了。在微信里面做一个支付宝支付的跳转页面,让用户使用浏览器打开,然后在去调用支付宝进行支付。 - 相机和相册
HTML5的input标签是支持调用设备的相机以及相册的。 - 页面PV统计
我们用的百度统计的代码。在index.html页面引用百度统计的js代码,然后在app.js里面添加$locationChangeStart的监听,在监听的处理方法里面调用百度统计的PV统计API。 - 微信分享
调用微信的分享API,然后在每个页面出现的时候添加页面的相应的分享信息(title,content...)。
其次,再来聊聊关于ionic1或者angularJS站点的SEO的实现。
常规的网站都应该是一个页面就是一个完整的HTML文件,对每个页面SEO的处理都是在每个HTML文件里的header上的title和content里完成的。
但是,在一开始我就说过,angularJS开发出来的是一个单页面的应用,只有一个header和一个body。
那么应该怎么实现angualrJS的SEO呢?
因为ionic1使用的始angularJS的路由机制,所以在浏览器的地址栏你会发现url是带了一个“#”的。但是,搜索引擎的爬虫却无法识别到“#”之后的路径。
去掉url里面的“#”
第一步,在app.js的.config里面添加代码$locationProvider.html5Mode(true)。
第二步,在index.html的head里面添加代码<base href="/">,<meta name="fragment" content="!" > 。
第三步,url去掉“#”之后,刷新url会出现404错误。这个时候只需在url上加上“#”即可,这个任务就只能放到站点服务器上去做重定向来处理了。在浏览器的地址栏,你会看到你的url最开始带“#”,然后因为开启了html5mode的原因,“#”又会消失。为页面设置title、keyword和description
在页面出现的时候,为页面设置相关信息。但并不是每个页面都需要做SEO,所以在页面消失的时候要记得把刚才设置的SEO信息置空。使用Prerender服务,生成异步请求完成之后的页面喂给爬虫。
然后,关于用浏览器打开地址不正确的问题的处理。
如果仅限于是在微信浏览器里面使用,页面之间的跳转是完全没有问题的。
但是,我们有使用支付宝支付的功能,因为微信封杀的原因,只能使用浏览器打开的方式才能完成支付宝支付。
在做了去掉url里面的“#”和服务器端做添加“#”的重定向之后,从公众号的首页进入然后到使用浏览器打开支付宝支付跳转的页面,在Android的微信上是完全没有问题的。
但是,在iOS的微信上就会出现问题,使用浏览器打开支付宝跳转页面的时候,打开的是微信公众号的首页~~
另外,如果不是从首页进入的公众号,然后一直到支付宝跳转页面,使用浏览器打开。在浏览器上打开的是你最开始进入的那个页面,无论是在Android还是iOS的微信上都存在这个问题。
解决办法
另外写一套方法,专门用于微信公众号的页面之间的跳转。
- 往前跳转,使用window.location.href = "#/[state.url]?[stateParam]=[arg1]"
e.g. window.location.href = "#/tab/index?date=20170901" - 页面返回,window.history.go(backCount)。
最后,还可以做的更好
- 进入首页加载较慢。虽然在项目中使用了requireJS,分离了controller和service,但并未实现按需加载,或者说是懒加载。
- 关于微信浏览器的缓存问题。目前目测微信浏览器对js貌似没有做缓存,但是对html的缓存很严重。考虑在微信的页面跳转的时候,对url添加时间戳参数。(具体处理请参看下一篇文章:使用Gulp打包ionic1项目)
最后的最后,一定要考虑一下先
如果仅仅只是单纯的开发一个微信公众号,真心不建议使用ionic1或者angularJS来开发。
如果,你也是要开发Hybrid的APP,然后又要做微信公众号的话,那么可以考虑使用ionic1来完成Android、iOS APP的开发和微信公众号的移植。