ionic项目编写bug记录

个人外包 米润猜球 webapp 引入国外接口进行实时直播的球类app微信公众号

此项目使用ionic+angular进行项目结构搭建，webscoket全程实时与后台交互，ui-router打造页面路由，建立页面之间联系，使用olazyload进行页面js的按需加载，提高页面打开速度。

项目介绍：  该项目主要针对足球爱好者而设计的足球实时赛况的一款webapp，主要分为六个大模块：

a： 首页 主要介绍近期热门的足球比赛列表，对即将开赛的比赛进行倒计时，让玩家实时关注，头部轮播展示近期举行的活动，头部跑马灯展示玩家消费和赛事的中奖情况进行广播，进入页面后有个签到弹层，让玩家每日签到获取金豆进行比赛投注，增加可玩性。  

b: 赛事 改模块分为热门、赛前、赛后三个小模块，热门为近期较为火热的比赛列表，赛前展示近期的所有比赛列表，赛后展示比赛结束后比赛的过程明细、最终结果和自己对该比赛的投注结果。  

c: 赛事详情 该模块是从首页和赛事的比赛列表进入的二级模块，该项目主要内容都在该模块内，头部为玩家消费的走马灯广播，头部下的bannner部分为canvas写的比赛实时直播，使用webscoket的实时交互，将比赛正在进行的精彩过程体现在canvas上，banner下的为投注竞猜部分，有五种不同的玩法进行比赛的投注，每种玩法分不同的赔率，让玩家根据赔率进行投注，进行盈利；再往下为比赛过程的实时文字直播，比如球在主客队的手中位置等，还有比赛过程中球队两方的各种数据，比如黄牌次数，进球次数等等；  

d: 排行榜 内分金豆排行、盈利排行、盈利率排行三个模块，主要展示不同玩家的投注盈利、金豆财力情况，还能查看不同玩家的个人信息等等；

e: 商城 主要展示各种电话卡、购物卡的销售，也可以用每日领取的金豆兑换;

f: 个人 主要展示玩家的个人信息，可以让用户自主选择头像、修改昵称、个人签名等个人信息，还有个人的金豆、金币数量情况、在金币不足时使用金币兑换、金币不足时需要进行充值，还有个人投注的信息列表，查看是否盈利，系统的推送消息等等；

项目编写中，遇到了ionic的各种坑，现将坑列举出来以便记忆。 1、ionic的1.3以及以上版本，在做父级路由向子集路由跳转页面时，跳转动画容易出错，在跳转3遍以上时子集往父级的动画就会倒过来，最终换成ionic1.2版本的得以解决

2、在做列表的上拉加载、下啦刷新，这两个组件同时使用时，在下拉刷新时会多次触发上拉加载函数（ios端无此问题，主要集中在andorid上），解决1：将repeat循环换成collection-repeat循环，这样在下拉刷新时就只会触发一次上拉加载；解决2：在下拉刷新时，使用延时器延迟上拉加载函数的触发，应在1000毫秒往上；

3、在用webscoket进行数据交互时，onmessage函数应当只在tabs控制器中监听一次，否则在send数据，接受反馈时，每个message函数都会触发一遍，造成效率降低，实为不妥，由于tabs控制器是级别在页面控制器之上，所以在此控制器中的函数在其他子控制器中均能接受，但是这样又会出现一个新问题，就是接受过来的数据，需要传递到所需要的子控制器中去，以便操作子控制器中的数据变量，此时使用了$broadcast函数进行广播下发，让子控制器$on进行监听接受数据，从而解决。

4、ios中在header组件隐藏之后，subheader的top值不为0，而android中为正常，需要判断如果在ios设备中，使用js将subheader的top值改为0；

5、ionic的轮播组件，在使用ajax获取数据时，需要在请求成功之后，将该组件重新upload一次，否则组件不显示；在轮播的slide只有两张时，组件下方的圆点的选中状态会有bug，会多隔两张显示选中状态，其他张数为正常，目前还未解决；

6、在多个模块调用同一个页面bug，比如A，B两个模块调用同一个页面C，A模块点击进入页面C，然后返回到模块A，然后进入模块B，此时模块B会显示在页面C上，解决：在路由配置内，将页面C的路由根据模块A.B配置成两个不同的路由名称，但是还是引用的同一个文件，这样问题得以解决；

源码在github上