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>