uni-app中使用Vant-Weapp组件
Vant-Weapp官方文档
注意: uni-app
支持在 App
和 小程序
中使用小程序自定义组件,从HBuilderX2.4.7
起,H5
端也可以运行微信小程序组件。
前提
- 先下载
vant-weapp
, 解压文件, 找到dist
目录
1. 创建wxcomponents文件夹
-
在项目根目录创建文件夹:
wxcomponents
,将上面dist
文件复制到wxcomponents
下,然后把dist
名称修改为vant
【可根据需要使用所需组件】 -
注意:
wxcomponents
特殊文件夹,vant
可自定义。
2. pages.json引入组件
- 组件中引入方式 【 例: 使用
button
、loading
等组件】
{
"path": "pages/vant-btn/vant-btn",
"style": {
"navigationBarTitleText": "自定义组件",
"usingComponents": {
// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || H5
"van-button": "/wxcomponents/vant/button/index",
"van-loading": "/wxcomponents/vant/loading/index",
"van-toast": "/wxcomponents/vant/toast/index"
// #endif
}
}
},
- 全局注册方式【根据需要使用全局注册】
"globalStyle": {
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index"
}
}
3. 组件中使用
<template>
<view class="wrap">
<view class="button">
<van-button type="primary" @click="onChange">van-button组件</van-button>
<van-loading type="spinner" color="#1989fa" />
<van-toast id="van-toast" />
</view>
</view>
</template>
<script>
import Toast from '../../wxcomponents/vant/toast/toast';
export default {
data() {
return {
}
},
methods: {
onChange(e) {
Toast('toast');
uni.navigateTo({
url: '/pages/list/list'
})
}
}
}
</script>
通过easycom
将其精简为一步
HBuilderX 2.5.5
起支持easycom
组件模式。
说明:
- 不管
components
目录下安装了多少组件,easycom
打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。 easycom
方式引入的组件无需在页面内import
,也不需要在components
内声明,即可在任意页面使用easycom
方式引入组件不是全局引入,而是局部引入
。例如在H5端只有加载相应页面才会加载使用的组件
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录内的vue文件
}
},