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

如果你要是只是单纯的开发一个微信公众号，你实在是有太多的选择了。无论怎么选，绝对都不会选到用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域名之类的参数，方便在开发和发布时对环境的切换。

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里面添加代码， 。
   第三步，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的开发和微信公众号的移植。