前言
想尝试下微信小程序的开发,此为记录下开发过程中遇到的问题以及入门小程序开发
开发
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即可
}
}
}
结语
其他的就参照官网使用就行啦!刚开始做小程序,慢慢摸索中,要是有遇到新的问题,也会更新此文的,共勉!