微信小程序之mpvue+iview踩坑之旅

時間 2020-05-29

標籤微信程序 mpvue+iview mpvue iview 之旅简体版

原文原文鏈接

由於以前參照微信的原生的文檔寫過一些小程序的demo，寫的過程比較繁瑣，後來出了美團的mpvue，能夠直接使用vue開發，其餘的不做對比，這篇文章記錄一下踩坑之旅.css

參照mpvue http://mpvue.com/mpvue/#_2的官網的五分鐘的教程搭建項目vue

在建立的過程當中，須要輸入微信小程序的我的appId，能夠去微信小程序開發平臺複製進去。git

建立完成後的項目其實和使用vue-cli建立的腳手架大同小異，沒圖案也只是對其封裝，而後轉化爲wxml。github

1.首先引進iview weapp的組件庫https://weapp.iviewui.com/docs/guide/startvue-cli

官網是將須要使用的組件，按照小程序的自定義封裝組件的方式，將所須要的組件封裝成小程序的自定義的組件，而後經過usingComponents的方式將你須要的組件引進來。npm

下面是一些例子：json

pages/logs/index.vue(此處是文件的路徑):canvas

 1 <template>
 2   <div class="followRecords">
 3     <i-button @click="handleClick">默認按鈕</i-button>
 4     <i-button @click="handleClick" type="error" long="true">聯通兩邊按鈕</i-button>
 5     <i-button @click="handleClick" type="primary">Primary</i-button>
 6     <i-button @click="handleClick" type="ghost">Ghost</i-button>
 7     <i-button @click="handleClick" type="info">Info</i-button>
 8     <i-button @click="handleClick" type="success">Success</i-button>
 9     <i-button @click="handleClick" type="warning">Warning</i-button>
10     <i-button @click="handleClick" type="error">Error</i-button>
11   </div>
12 </template>
13 <script>
14   export default {
15     name: 'followRecords',
16     data () {
17       return {
18       }
19     },
20     mounted () {
21     },
22     methods: {
23       handleClick(e) {
24         console.log(e);
25       }
26     }
27   }
28 </script>
29 <style lang="scss">
30   .followRecords {
31   }
32 </style>

pages/logs/main.json小程序

{
  "navigationBarTitleText": "首頁",
  "navigationBarBackgroundColor": "#000",
  "usingComponents": {
    "i-card": "../../../static/iview/card/index",
    "i-steps": "../../../static/iview/steps/index",
    "i-step": "../../../static/iview/step/index",
    "i-button": "../../../static/iview/button/index",
    "i-divider": "../../../static/iview/divider/index",
    "i-panel": "../../../static/iview/panel/index",
    "i-toast": "../../../static/iview/toast/index",
    "i-message": "../../../static/iview/message/index",
    "i-icon": "../../../static/iview/icon/index",
    "i-cell-group": "../../../static/iview/cell-group/index",
    "i-cell": "../../../static/iview/cell/index",
    "i-grid": "../../../static/iview/grid/index",
    "i-grid-item": "../../../static/iview/grid-item/index",
    "i-grid-icon": "../../../static/iview/grid-icon/index",
    "i-grid-label": "../../../static/iview/grid-label/index",
    "i-row": "../../../static/iview/row/index",
    "i-col": "../../../static/iview/col/index",
    "i-tag": "../../../static/iview/tag/index",
    "ec-canvas": "../../../static/ec-canvas/ec-canvas"
  }
}

此處作一個提示，mpvue建立的pages下的目錄須要自行建立一個main.json文件，對該頁進行配置，效果以下，顏色仍是挺好看的：微信小程序

這就是將iview的組件引入使用的過程。

這裏提出一些遇到的問題，在app.json配置了tabBar的時候，它不必定會顯示出來，解決辦法：關閉微信開發工具從新打開，或者從新npm run dev一遍吧，記得在某處看過mpvue的解釋，他們以爲從新添加的頁面也不會太多，因此重啓一下也沒事大的影響。

在使用的過程當中tabBar的icon會404，仍是重啓微信開發工具，理由就不解釋了

在mpvue裏使用echarts怎麼辦，其實echarts也是封裝了小程序的組件 https://github.com/ecomfe/echarts-for-weixin,將下載下來的ec-canvas放到微信的目錄裏，從上面的截圖裏看一看到，我是將他的dist目錄放到了static，引用的路徑是'../../../static/iview/..'

有的時候放到src/assets/的時候會一直報錯找不到文件，是由於dist/assets沒有找到，你須要把他複製下來放到assets/，應該是打包沒有打包下來

引用ec-canvas的方法和iview同樣，在usingComponents里加入

"ec-canvas": "../../../static/ec-canvas/ec-canvas"，參照你我的的路徑

在index.vue裏使用的時候，只須要傳入ec便可

代碼以下

<template>
  <div class='container'>
    <div class="pie-content">
      <div class="diseease-info">
        <div class="title">疾病分類狀況</div>
        <div class="select">
          <picker class="weui-btn" @change="PickerChange" :value="indexPicker" :range="array">
              <view class="picker">
                篩選：<span>{{selectTime}}</span>
              </view>
            </picker>
        </div>
      </div>
      <div class="disease-echart">
        <ec-canvas class="canvas" id="mychart-dom-bar" canvas-id="mychart-bar" :ec="ec"></ec-canvas>
      </div>
    </div>
  </div>
</template>

<script>
// 此處 opyions爲echarts的setOptions
const options = {
  backgroundColor: "#fff",
  color: ["#f36837", "#5e65e3", "#5e98e3", "#59d0bd", "#f9df94", "#0f0"],
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: '65%',
    y: 'middle',
    data: ['北京', '武漢', '杭州', '廣州', '上海'],
    textStyle: {
      color: "#666",
      fontWeight: 'normal'
    }
  },
  grid: {
    top: '0%',
    left: '0%',
    containLabel: true,
  },
  series: [{
    label: {
      show: false
    },
    type: 'pie',
    center: ['30%', '50%'],
    radius: ['40%', '55%'],
    data: [
      {
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武漢'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '廣州'
      }, {
        value: 38,
        name: '上海'
      }
    ],
    itemStyle: {
      emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 2, 2, 0.3)'
      }
    }
  }]
};
export default {
  data () {
    return {
      indexPicker: 3,
      array: ['所有', '近七天', '近三個月', '近半年', '近一年'],
      selectTime: '',
      userInfo: {}, // 用戶信息
      ec: {
        options: options
      },
      ecLine: {
        options: lineOptions
      }
    }
  },
  mounted () {
    this.checkTime()

  },
  onShow () {
  },
  watch: {
    // ..
  },
  created () {
    // 調用應用實例的方法獲取全局數據
    this.getUserInfo()
  },
  methods: {// 選擇時間
    PickerChange(e) {
      this.selectTime = this.array[e.mp.detail.value]
      this.array.forEach( (item, index) => {
        if(this.array[e.mp.detail.value] === item) {
          this.indexPicker = index
        }
      })
    },
    checkTime() {
       this.array.forEach( (item, index) => {
        if(this.indexPicker === index) {
          this.selectTime = this.array[index]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 標題title
@mixin diseeaseInfo {
  height: 78rpx;
  line-height: 78rpx;
  color: #666;
  font-weight: bold;
  .title {
    float: left;
    text-indent: 20rpx;
    font-size: 30rpx;
  }
  .select {
    float: right;
    font-size: 28rpx;
    padding-right: 2em;
    span {
      font-weight: normal;
    }
  }
}
// 寬高
@mixin size($width, $height, $background) {
  width: $width;
  height: $height;
  background: $background;
}
.header {
  margin-bottom: 10rpx;
  padding: 30rpx 24rpx;
  width: 706rpx;
  height: 406rpx;
  background: #f8f8f8;
  .header-info {
    height: 162rpx;
    margin: 10rpx 0 42rpx;
    img {
      width: 162rpx;
      height: 162rpx;
      float: left;
      border-radius: 50%;
    }
    p{
      line-height: 46rpx;
      width: 420rpx;
      font-size: 30rpx;
      color: #818181;
      padding-left: 33rpx;
      float: left;
      text-indent:2em;
    }
    .search {
      float:right;
      width:30rpx;
      margin-right:34rpx;
    }
  }
  .header-message {

    padding: 28rpx 20rpx;
    width: 666rpx;
    background: #fff;
    box-shadow:0 0 10rpx rgba(0, 0, 0, 0.25);
    display:flex;
    border-radius:10rpx;
    .message {
      flex: 1;
      height: 120rpx;
      border-left: 1rpx solid #e5e5e5;
      color: #6c6c6c;
      text-align: center;
      p {
        font-size: 26rpx;
        line-height:50rpx;
        .number {
          font-size:38rpx;
          color:#333;
        }
        .name {
          color:#f36800;
        }
      }
    }
    .message:nth-of-type(1) {
      border: none;
    }
  }
}
.pie-content {
  margin-bottom: 20rpx;
  @include size(100%, 380rpx, #fff);
  .diseease-info {
    @include diseeaseInfo;
  }
  .disease-echart, .medicine-echart {
    @include size(100%, 300rpx, #fff);
    .canvas {
      @include size(100%, 300rpx, #fff);
    }
  }
}
.line-content {
  margin-bottom: 20rpx;
  @include size(100%, 510rpx, #fff);
  .diseease-info {
    @include diseeaseInfo;
  }
  .medicine-echart {
    @include size(92%, 400rpx, #fff);
    margin: 2% 4%;
    border-radius: 3%;
    overflow: hidden;
    .canvas {
      @include size(100%, 100%, #fff);
    }
  }
}
.care-content {
  margin-bottom: 20rpx;
  @include size(100%, 610rpx, #fff);
  .diseease-info {
    @include diseeaseInfo;
  }
  .care-list {
    margin: 2% 4%;
    @include size(92%, 500rpx, #fff);
    overflow-y: auto;
    i-row {
      font-size: 26rpx;
      line-height: 65rpx;
      color:#666;
      height: 65rpx;
      i-col {
        border-bottom: 1rpx solid #666;
      }
    }
  }

}

</style>