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

因為之前參照微信的原生的文檔寫過一些小程序的demo，寫的過程比較繁瑣，后來出了美團的mpvue，可以直接使用vue開發，其他的不作對比，這篇文章記錄一下踩坑之旅.

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

在創建的過程中，需要輸入微信小程序的個人appId，可以去微信小程序開發平台復制進去。

創建完成后的項目其實和使用vue-cli創建的腳手架大同小異，沒圖案也只是對其封裝，然后轉化為wxml。

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

官網是將需要使用的組件，按照小程序的自定義封裝組件的方式，將所需要的組件封裝成小程序的自定義的組件，然后通過usingComponents的方式將你需要的組件引進來。

下面是一些例子：

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

<template>
  <div class="followRecords">
    <i-button @click="handleClick">默認按鈕</i-button>
    <i-button @click="handleClick" type="error" long="true">聯通兩邊按鈕</i-button>
    <i-button @click="handleClick" type="primary">Primary</i-button>
    <i-button @click="handleClick" type="ghost">Ghost</i-button>
    <i-button @click="handleClick" type="info">Info</i-button>
    <i-button @click="handleClick" type="success">Success</i-button>
    <i-button @click="handleClick" type="warning">Warning</i-button>
    <i-button @click="handleClick" type="error">Error</i-button>
  </div>
</template>
<script>
  export default {
    name: 'followRecords',
    data () {
      return {
      }
    },
    mounted () {
    },
    methods: {
      handleClick(e) {
        console.log(e);
      }
    }
  }
</script>
<style lang="scss">
  .followRecords {
  }
</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>

效果圖如下：

友情提示：微信小程序里是沒有select這個標簽的，微信的組件里封裝了picker組件，其實是對select的一種另類展示，因為微信小程序是針對移動端的，點點點不容易點到select里的其他選項，所以沒有select吧，我瞎猜的，。。。

在這里也提一下mpvue的缺點，mpvue並沒有將微信小程序里的數據雙向綁定實現，再多出api中均存在這樣的問題，雖然不影響使用，也就是多寫幾行代碼，以下舉出幾個例子，

在使用i-tab的時候，value其實是沒有根據變化而變化的,當你點擊的時候，你需要手動改變iview的value，然后他才會跳到點擊的tab，其他的組件都有這種問題，大家慢慢體會吧。。。