mpvue中使用vant-weapp组件库

  |  
阅读次数
  |  
字数 549
  |  
时长 ≈ 2 分钟

一、介绍

使用mpvue构建编译小程序,vant-weapp组件库作为页面组件,做一些记录。

mpvue
vant-weapp

二、使用

复制编译文件

按照mpvue官方(五分钟上手教程 )初始化mpvue项目,进入到项目根目录安装vant-weapp依赖

1
npm i vant-weapp -S --production

安装完毕之后,在node_modules目录下找到vant-weappdist下面的所有文件复制到你项目的/static/vant/目录下。

引入组件

app.json下加入

1
2
3
"usingComponents": {
"van-search": "/static/vant/button/index"
}

使用组件

1
<van-button>测试</van-button>

三、踩坑

具体组件 api 文档参考Vant Weapp - 轻量、可靠的小程序 UI 组件库

值绑定方式

原生小程序使用方式为

1
value="{{value}}"

mpvue 为

1
2
3
v-bind:value="value"
//或者
:value="value"

事件监听

原生小程序使用方式为

1
bind:click="onClick"

mpvue 为

1
@click="onClick"

vue页面中组件引入

vant中像Toast这种操作反馈类的组件都有两个引入,
一是组件的引入,这个在app.json中引入;
二是方法的引入,需要在vue文件中import引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

1
import Toast from '@/../static/vant/toast/toast';

获取event

值得注意的是,mpvue中获取event值与原生小程序有所不同。举例:

1
2
3
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
}

富文本支持

引入

如果普通的html字符串可以使用v-html,但是如果是自定义标签(比如<hi></hi>)就渲染不了样式,这样需要使用到富文本组件。

mpvue-wxParse

1
npm install --save-dev mpvue-wxparse

使用

动态样式需要另外自行引入才会生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div>
<wxParse
:content="data"
className="grammarTip"
/>
</div>
</template>
<script>
import wxParse from 'mpvue-wxparse'

export default {
data () {
return {
"data":"<div>Hello<hi>,</hi>World.</div>"
}
},
components: {
wxParse
}
}
</script>
<style scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
@import url("test.css");
</style>

test.css,当前示例文件位置为vue页面同级

1
2
3
4
.grammarTip .hi {
color: #3a6bdd;
display: inline;
}