微信小程序开发（mpVue前端开发)

前言

想尝试下微信小程序的开发，此为记录下开发过程中遇到的问题以及入门小程序开发

开发

1、使用mpvue框架，引入框架 -- 官网：mpvue.com/

$ vue init mpvue/mpvue-quickstart my-project

创建项目后，运行项目，打开微信开发者工具可看到项目页面

小程序app.json的配置官网：developers.weixin.qq.com/miniprogram…

2、自动生成wxss文件

小程序的样式文件是.wxss文件，vscode有一个很好用的插件easy less可以将.less自动转换生成一个.wxss样式文件（相应的也有 easy sass）使用的时候，页面引用.wxss文件，样式代码写在index.less中即可，会自动更新致index.wxss

<style scoped>
@import './index.wxss';
</style>

3、使用阿里图库

小程序也可以使用阿里图库的图标，就是引用有点略微的麻烦（使用彩色图标会有点麻烦，仅使用黑背图标，直接引用就行）。

(1)第一次使用，引入插件并初始化

使用图标我们用的是插件，第一次引用的时候需要安装

npm install mini-program-iconfont-cli --save-dev // 引入插件
npx iconfont-init  // 初始化

初始化后会出现一个iconfont.json的文件，文件里就有提示：

去阿里图标官网的symbol模式下生成链接替换进去即可：

save_dir的配置是生成的图标代码存放位置，可以根据需要自行修改
use_rpx是否使用rpx
trim_icon_prefix去除通用前缀
default_icon_size默认图标大小

(2)配置图标

在App.vue中引入图标样式，并设置默认样式

@import "../static/iconfont/iconfont.wxss";

iconfont {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  display: inline-block;
}
._iconfont{
  display: inline-block;
}

不要忘记在app.json中配置图标组件
这个不引用的话，就是只能显示黑白图标，无法显示彩色图标

"usingComponents": {
    "iconfont": "static/iconSymbol/iconSymbol"
 }

(3)下载和使用图标

下载引入图标
引入iconfont.css即可，并将其改名为iconfont.wxss，并将其原有的 @font-face…… 使用在线链接替换掉（在阿里图库上选择unicode模式，生成在线链接）
更新图标

npx iconfont-wechat

更新图标后，iconSymbol的文件夹里就有了图标信息，这个更新指令，在每次更新图标后，都要执行一次，文件价里的内容会自动清空在生成，不用去管它

使用图标

<div class="iconfont icon-nuli"></div> // 黑白
<iconfont name="icon-nuli" size="50"/> // 彩色

4、使用echarts

使用小程序原生开发的插件是echarts-for-weixin： github.com/ecomfe/echa…
使用mpvue框架开发的插件是mpvue-echarts： github.com/F-loat/mpvu…
使用可参考： www.cnblogs.com/wangyang021…

安装插件

npm install mpvue-echarts                          
npm install echarts

使用

<template>
  <div class="echarts-wrap">
    <mpvue-echarts :echarts="echarts" :onInit="ecBarInit" canvasId="bar" />
  </div>
</template>

// js
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
export default {
    components:{ mpvueEcharts },
    data(){
        return{
            echarts,
            ecBarInit: null,
        }
    },
    mounted(){
        this.loadPieChart()
    },
    methods:{
        loadPieChart(){
            let _this = this
            let pieChart
            this.ecBarInit = function (canvas, width, height) {
                pieChart = echarts.init(canvas, null, {
                    width: width,
                    height: height
                })
                canvas.setChart(pieChart)
                pieChart.setOption(_this.getPieOption())
                return pieChart
            }
        },
        getPieOption () {
          // 这里就正常的写echarts的option即可
        }
  }
}

结语

其他的就参照官网使用就行啦！刚开始做小程序，慢慢摸索中，要是有遇到新的问题，也会更新此文的，共勉！