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

537 阅读2分钟

牲畜疾病监测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截图

alt

alt

致读者

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