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地址。 我想大家更應該關注的是上述兩個問題的解決！