Taro在小程序环境使用vant-weapp,van-area如何使用

Taro3.0发布支持vue后使用人数增多。使用vant-weapp实现省市区时会遇到下载、单位转换、组件引入、样式、数据支持等问题。还给出了具体实现步骤,包括资源下载、文件夹拷贝、配置打包映射和样式、引入组件及数据处理等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

随着Taro3.0的发布,支持vue后,越来越多的人使用Taro。
在使用vant-weapp实现省市区时遇到了很多问题:
1.要通过给下载源码得方式,不能直接使用npm安装;

2.因为小程序会将单位转为rpx导致字体变小;

3.如果你使用得页面本身已经是组件了,请将usingComponents放入父组件中,否则无法引入;

4.嵌套使用会没有样式,自己当时用得是van-popup和van-area,但不确定,可自己测试;

5.area只支持静态数据,官方提供了地址文件但是很多公司是需要使用自己得,所以下载官方不可行,看了van-area的源码发现是因为子组件得加载先于父组件了,自己没有解决,后对接口数据进行了处理(如果有人解决了可以私信我呦);

下面是具体得实现步骤:
一:先讲资源下载到本地;

git clone https://github.com/youzan/vant-weapp.git
二:将其中的dist文件夹整个拷入taro项目中,放在componens文件中

 三:配置全局打包映射

在项目的config>index.js文件中更改如下代码,也可按需引入

四:配置样式

在项目的config>index.js文件中更改如下代码

 

五:引入vant组件

        在使用得父元素中,config.js文件引入,如果此处本身就是组件引入,需要写在父元素中,组件里面是不生效得。 

        

六:将数据处理成对应得格式,并且是一次处理得,不能点击一次请求一次

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值