uni-app中使用Vant-Weapp组件

Vant-Weapp官方文档

注意： uni-app 支持在 App 和 小程序 中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。

前提

• 先下载vant-weapp， 解压文件， 找到dist目录

下载Vant-Weapp组件

1. 创建wxcomponents文件夹

uniapp小程序组件支持

• 在项目根目录创建文件夹： 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组件模式。

easycom官方文档

说明：

• 不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
• easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件

"easycom": {
    "autoscan": true,
    "custom": {
        "^uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录内的vue文件
    }
},

关于组件选择

关于使用uni-app的ui库、ui框架、ui组件