在微信中使用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里面添加代码<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的开发和微信公众号的移植。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,454评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 姓名:张汉超 公司:东莞耀升机电有限公司 组别:4月25-27日六项精进245期学员 【日精进打卡第89天】 【知...
    张汉超阅读 155评论 0 0
  • 今天,灰犀牛出现了,市场一片哀鸿遍野,我反思如下: 1.谁也怨不得,怨你自己没有把控风险,把主动权抓在手里。你本可...
    oscaryi阅读 156评论 0 0
  • 今天是世界读书日。 借助于媒体和各种圈子,知道了今天这个日子。关于读书日的宣传和活动不是特别多,所以相比其他各种世...
    慧子永远没有太晚的开始阅读 378评论 0 11