uni-app中使用vant-weapp

uni-app中使用Vant-Weapp组件

文章目录

    • uni-app中使用Vant-Weapp组件
      • 前提
      • 1. 创建wxcomponents文件夹
      • 2. pages.json引入组件
      • 3. 组件中使用
      • 通过`easycom`将其精简为一步
      • 关于组件选择

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引入组件

  • 组件中引入方式 【 例: 使用buttonloading等组件】
{
    "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组件

你可能感兴趣的:(uniapp,uni-app中使用vant,vant-weapp)