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

因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅.

参照mpvue http://mpvue.com/mpvue/#_2的官网的五分钟的教程搭建项目

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

在创建的过程中,需要输入微信小程序的个人appId,可以去微信小程序开发平台复制进去。

创建完成后的项目其实和使用vue-cli创建的脚手架大同小异,没图案也只是对其封装,然后转化为wxml。

1.首先引进iview weapp的组件库https://weapp.iviewui.com/docs/guide/start

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

官网是将需要使用的组件,按照小程序的自定义封装组件的方式,将所需要的组件封装成小程序的自定义的组件,然后通过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文件,对该页进行配置,效果如下,颜色还是挺好看的:

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

这就是将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>

效果图如下:

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

友情提示:微信小程序里是没有select这个标签的,微信的组件里封装了picker组件,其实是对select的一种另类展示,因为微信小程序是针对移动端的,点点点不容易点到select里的其他选项,所以没有select吧,我瞎猜的,。。。

在这里也提一下mpvue的缺点,mpvue并没有将微信小程序里的数据双向绑定实现,再多出api中均存在这样的问题,虽然不影响使用,也就是多写几行代码,以下举出几个例子,

在使用i-tab的时候,value其实是没有根据变化而变化的,当你点击的时候,你需要手动改变iview的value,然后他才会跳到点击的tab,其他的组件都有这种问题,大家慢慢体会吧。。。

上一篇:FTP服务完成Linux和WIN10之间的信息传输,感觉还不错。


下一篇:搭建FTP所遇到的问题。