MK-02（基於Vue開發的微信小程序）

mpvue搭建的微信小程序，由於本人最近寫vue，記錄一下使用。

mpvue需要環境(這裏不進行環境解說)

node.js
vue

創建項目

下載腳手架
npm install vue-cli -g
創建項目
vue init mpvue/mpvue-quickstart 項目
進入項目
cd 項目
安裝依賴
npm install
啓動項目
npm run dev

文件解說

1.src/app.json   全局配置文件
2.src/App.vue   等同於原生小程序中的app.js, 可再次寫小程序應用實例的聲明週期	  函數 || 全局樣式(style中編寫)
3.main.js應用入口文件, 聲明組件類型，掛載組件

全區配置
app.json（加載路徑+窗口顏色，類似於java的springmvc）

{
    "pages": [
        "pages/main"
    ],
    "window": {
        "navigationBarBackgroundColor": "#333333"
         
    }
}

main.js（類似於java的main方法）

import Vue from 'vue'
import App from './app.vue'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue(App)

app.$mount()

app.vue
(初始化界面，沒什麼用)

<script>
  export default {

  }
</script>

<style>

</style>

pages目錄
這裏我使用Vant-weapp框架

這裏需要在git下載UI框架

Vant-weapp

將dist拷貝出來放入項目中miniprogram_npm/vant-weapp即可
（前提需要構建項目的npm）

npm i @vant/weapp -S --production

在微信小程序中勾選

構建upm即可

mpvue是會優先加載src的目錄，這裏我們已經在全局配置好路徑了，需要安裝UI框架路徑了
pages/main.js

import Vue from 'vue'
import Index from './index.vue'

const index = new Vue(Index)

index.$mount()

UI配置文件，加載好路徑即可

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/dist/button/index",
    "van-transition": "/miniprogram_npm/vant-weapp/dist/transition/index",
    "van-field": "/miniprogram_npm/vant-weapp/dist/field/index",
    "van-search": "/miniprogram_npm/vant-weapp/dist/search/index",
    "van-skeleton": "/miniprogram_npm/vant-weapp/dist/skeleton/index",
    "van-cell": "/miniprogram_npm/vant-weapp/dist/cell/index",
    "van-cell-group": "/miniprogram_npm/vant-weapp/dist/cell-group/index",
    "van-tab": "/miniprogram_npm/vant-weapp/dist/tab/index",
    "van-tabs": "/miniprogram_npm/vant-weapp/dist/tabs/index"
  }
}

index.vue頁面

<template>

    <div>
    <van-tabs v-model="active2" color="#333333" duration=0.3 swipeable=true>
      <van-tab title="我的筆記"></van-tab>
      <van-tab title="數據統計"></van-tab>
      <van-tab title="導入文件"></van-tab>
    </van-tabs>
    </div>     
</template>

<script>
  export default {
    data () {
      return {}
    }
  }
</script>

<style>

</style>

目前效果圖

這裏我要使用echart圖表進行數據展示（個人興趣）

在項目安裝即可

 cnpm install mpvue-echarts                          
 cnpm install echarts

演示代碼不進行使用

<!--
 * @Author: wangyang
 * @LastEditors: wangyang
 * @Description: file content
 * @Date: 2019-04-08 16:34:52
 * @LastEditTime: 2019-04-08 18:57:44
 -->
<template>
  <div class="wrap">
    <mpvue-echarts :echarts="echarts" :onInit="ecBarInit" canvasId="bar" />
    <mpvue-echarts :echarts="echarts" :onInit="ecScatterInit" canvasId="scatter" />
  </div>
</template>

<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
let barChart, scatterChart
function getBarOption () {
  return {
    color: ['#37a2da', '#32c5e9', '#67e0e3'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 座標軸指示器，座標軸觸發有效
        type: 'line' // 默認爲直線，可選爲：'line' | 'shadow'
      }
    },
    legend: {
      data: ['熱度', '正面', '負面']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['汽車之家', '今日頭條', '百度貼吧', '一點資訊', '微信', '微博', '知乎'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    series: [
      {
        name: '熱度',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: [300, 270, 340, 344, 300, 320, 310]
      },
      {
        name: '正面',
        type: 'bar',
        stack: '總量',
        label: {
          normal: {
            show: true
          }
        },
        data: [120, 102, 141, 174, 190, 250, 220]
      },
      {
        name: '負面',
        type: 'bar',
        stack: '總量',
        label: {
          normal: {
            show: true,
            position: 'left'
          }
        },
        data: [-20, -32, -21, -34, -90, -130, -110]
      }
    ]
  }
}
function getScatterOption () {
  var data = []
  var data2 = []
  for (var i = 0; i < 10; i++) {
    data.push(
      [
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 40)
      ]
    )
    data2.push(
      [
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100)
      ]
    )
  }
  var axisCommon = {
    axisLabel: {
      textStyle: {
        color: '#C8C8C8'
      }
    },
    axisTick: {
      lineStyle: {
        color: '#fff'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#C8C8C8'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#C8C8C8',
        type: 'solid'
      }
    }
  }
  return {
    color: ['#FF7070', '#60B6E3'],
    backgroundColor: '#eee',
    xAxis: axisCommon,
    yAxis: axisCommon,
    legend: {
      data: ['aaaa', 'bbbb']
    },
    visualMap: {
      show: false,
      max: 100,
      inRange: {
        symbolSize: [20, 70]
      }
    },
    series: [{
      type: 'scatter',
      name: 'aaaa',
      data: data
    },
    {
      name: 'bbbb',
      type: 'scatter',
      data: data2
    }
    ],
    animationDelay: function (idx) {
      return idx * 50
    },
    animationEasing: 'elasticOut'
  }
}
export default {
  data () {
    return {
      echarts,
      ecBarInit: function (canvas, width, height) {
        barChart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(barChart)
        barChart.setOption(getBarOption())
        return barChart
      },
      ecScatterInit: function (canvas, width, height) {
        scatterChart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(scatterChart)
        scatterChart.setOption(getScatterOption())
        return scatterChart
      }
    }
  },
  components: {
    mpvueEcharts
  },
  onShareAppMessage () {}
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 400px;
}
</style>