Vue2.x+axios+iview+mui带你撸一个App

牲畜疾病监测App

介绍

  这个App是参加互联网+大赛的附属App，由于不涉及关键内容，因此我选择开源， 毕竟开源了，才能有更多的人来完善或者发现它的不足，我叫EricWang，欢迎你的加入!

App背景

  应征时代号召，经过智能感应获取动物体温，体表温度.....一系列数据，经过大数据技术， 进行病症比对。最终反馈给用户检测结果。

技术栈

• vue2.x
• iview3.x
• mint-ui
• v-echarts
• axios
• 阿里巴巴矢量库

项目问题

问题	是否解决
移动端处理物理返回键问题	已解决
echarts图表自适应问题	已解决

---

解决方案

.1.移动端物理返回键问题

Step1 引入Mui.js

<script src="./js/mui.min.js"></script>
复制代码

Step2 监听物理按键

mui.init({
        //关闭右滑关闭功能（默认就是false）
        swipeBack: false, 
        keyEventBind: {
          //开启back按键监听（默认就是true
          backbutton: true ）
        }
      });
      var quitTime = null;
      mui.plusReady(function(){
        mui.back = function(){
          //首次按键，提示‘再按一次退出应用’
          if (!quitTime) {
            //记录第一次按下回退键的时间
            quitTime = new Date().getTime();
            //回退到上一页面
            window.history.back();
            setTimeout(function() {
              //1s中后清除
              quitTime = null;
            }, 1000);
          }else{
            if((new Date().getTime() - quitTime) < 1000){
              quitTime = null;
              plus.runtime.quit();
            }
          }
        };
      });
复制代码

.2.echarts不一样终端自适应问题

Step 1 在目标图表绑定ref

<ve-line :data="chartData"  :settings="chartSettings"   ref="chart1"></ve-line>
复制代码

Step 2 在mounted钩子函数中或者DOM事件中重绘echarts[具体须要哪一种，你本身按需求写入便可]

this.$nextTick(() => {
        this.$refs.chart1.echarts.resize();
      })
复制代码

App截图

致读者

  写这篇帖子的主要目的在于记录上述两个问题，至于源码， 我须要你们的赞咯，Ahhh，开玩笑啦，等App全面完工我就正式发布github地址。 我想大家更应该关注的是上述两个问题的解决！