从零开始第一次开发App经验（基于HBuilder开发的混合App+SSM框架的JAVA后台）【三】

78 阅读 0 评论 52 点赞

我是靠谱客的博主干净大炮，这篇文章主要介绍从零开始第一次开发App经验（基于HBuilder开发的混合App+SSM框架的JAVA后台）【三】，现在分享给大家，希望可以做个参考。

App后来经过几次界面改版，也终于到了测试阶段。
因为主业是做后端开发，所以前端做的马马虎虎，尤其是界面，基本上就是本着“够用就行”的原则，后来实在看不下去，又借鉴其他优秀App的设计，比如页面之间的滑动效果、界面的布局等等。

自从解决了app和服务器之间的通信问题之后，其他过程还算顺利，基本上就是js+css+（html5+），只要是会用js和css写个前端页面就会做app，额外关于html5+调用本地原生功能的时候有些小问题，看着官方文档基本上也都解决了。
好了进入正题：
开发这款App主要是用来和业务进行配套，进行一些计算之后把结果发送到服务器，服务器端主要是做：登录校验、记录注册app用户之间的关系、记录app运算结果并加以校验、提供app注册短信验证接口、后台管理等等，因为主要不是细讲java技术，就不贴详细代码了。
因为实际环境是app24小时不间断运行，并且基本上大约每隔一分钟就要向服务器传递一次数据，所以主要是说一下app24小时不间断运行碰到的问题，以及app大规模使用之后产生的高并发问题。

app自动停止运行的诡异事件

背景：app被设定成只有在wifi状态下才会运行，检测到使用数据流量之后自动停止运行。
购买了一批手机进行大规模的测试，创造了50个测试账号，启动app开始运行，第一天白天一切正常，觉得妥了，但是第二天到了办公室发现基本上全挂了，根据服务器日志，基本上到了凌晨一点多那个时间段就陆续有app不再和服务器进行通信，最早停的一个和最晚停的一个时间跨度也就在几分钟之间，只有两三部手机还在运行（后来事实证明就是这几个正常运行的影响了我的判断，我以为是app代码出bug了，或者设备性能不支持如此长时间运行）。
后来我在线更新app（这里不得不说一下，混合app同样支持在线自动更新新版本的app实在是太方便了，不然每一个app我都要手动更新一下），在app自动停止时弹出弹窗，并设置了几种可能的情况让它进行选择，第三天来了之后果然还是基本上全挂，这次是十二点左右就挂了，还是没想到网络问题，因为毕竟还有几台设备正常运行，白天同样一点问题没有，这时候因为这个问题开始着急了，不怕有问题，就怕找不到问题在哪里。
第三天半夜睡不着打开手机上网，结果发现网络中断，几秒后又自动连接上了，心头一激灵，八成找到问题了，结果一激动更睡不着了，索性起来修改app日志弹窗添加网络问题，在线更新app。
第四天到了发现清一色网络中断，还是想不明白那少数几台设备为什么这么坚挺，但是找到问题就是好的，添加网络中断自动重连的代码：
大体思路如下：
1.监听网络更改事件（onNetChange为执行的方法）：document.addEventListener("netchange", onNetChange）；
2.网络更改时判断是更改为哪种状态：

function onNetChange2(){
    var nt = plus.networkinfo.getCurrentType();//获取网络状态
    switch (nt){
      case plus.networkinfo.CONNECTION_ETHERNET:
      case plus.networkinfo.CONNECTION_WIFI:
        if(localStorage.getItem('runFlag') == 1){
          mui.toast("网络已恢复，监测到有中断的任务，正在重新开始");
          begin();//如果网络变成wifi状态，且原本时运行状态，就开始尝试运行
        }
        break; 
      case plus.networkinfo.CONNECTION_CELL2G:
      case plus.networkinfo.CONNECTION_CELL3G:
      case plus.networkinfo.CONNECTION_CELL4G:
        runFlag = 0;//本地localStorage还是为1，保证wifi连接时判断会自动运行
        firstflag = 0;//把线程状态标志位置为0：无线程进行状态
        clearInterval(interval);//停止运行
        if(localStorage.getItem('runFlag') == 1){
          mui.toast("当前正在使用手机流量!已停止运行"); 
          statusObj.innerHTML = '<span style="color:red">当前正在使用流量，停止工作</span>';//把运行状态置为未工作
          showTitleObj.innerHTML = '暂无运行任务';//把标题置为暂无运行任务
        }else{
          mui.toast("当前正在使用手机流量!");
        }
        break; 
      default:
        runFlag = 0;//只把明面上的标志位置为0，用来结束本次运行，保存在本地的还是为1，用来判断是否需要重连
        firstflag = 0;//把线程状态标志位置为0：无线程进行状态
        clearInterval(interval);//停止运行
        if(localStorage.getItem('runFlag') == 1){
          mui.toast("网络断开已停止向服务器更新数据!");
          statusObj.innerHTML = '<span style="color:red">网络已断开，停止工作</span>';//把运行状态置为未工作
          showTitleObj.innerHTML = '暂无运行任务';//把标题置为暂无运行任务
        }else{
          mui.toast('网络已断开！');
        }
        break;
    }
  };

根据这几种状态来进行不同的操作。
3.当app运行时会在本地存储一个运行标志位和一个线程标志位，当网络恢复WIFI时会从本地取出这个运行标志位，判断app原本是否原本就在运行，如果运行则进行启动，没运行则不进行下一步动作。
4.如果进行启动时则继续校验线程标志位，是否已有一个任务正在执行，如果有的话放弃重复执行，不然会两个任务在跑，数据异常，没有的话则开始启动程序。
到此这个坑算是填上了，这时候才真正可以说是网络中断自动重连，之前写了个1.0的版本，是用mui ajax和服务器进行通信时，如果走error方法，并判断之前正在运行，则开启一个定时器，进行循环的七秒之后重连，直到成功为止，但是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死页面，对于性能很有影响，如果断一天网就要循环一天，所以又改成了2.0也就是现在的版本。还是贴一下1.0的代码：

error:function(error){
        runFlag = 0;//只是让运行标志为0，但是本地localStorage还是运行状态，可以使5秒重连继续工作
        firstflag = 0;//把线程状态标志位置为0：无线程进行状态
        clearInterval(interval);//停止运行
        statusObj.innerHTML = '未工作';//把运行状态置为未工作
        endRun();//向服务器发送信息，本机器结束运行
        plus.nativeUI.closeWaiting();
        if(localStorage.getItem('runFlag') == 1){
          //如果是运行状态，就7秒后重新开始
          mui.toast("与服务器连接断开！已停止运行，7秒后自动重连服务器..."); 
          setTimeout(function(){
            begin();
          },7000);
        }else{
          mui.toast('与服务器连接断开！');
        }
      }