关于在uniapp写微信小程序使用vant方法

已于 2024-03-12 10:08:14 修改
阅读量1k 收藏 11
点赞数 14
文章标签： uni-app 小程序
于 2024-03-12 10:05:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69896158/article/details/136642355
版权

   我看大部门博主说在我们的项目中直接npm安装，然后去node_modules下找到vant的库，这样做虽然可以，但是会丢一些包文件，所以以下是我总结的方法。

1.首先我们到官网，去到GitHub中将资源克隆到本地

2.来到我们本地文件

将整个dist文件拷贝到我们项目中放在src目录下，这里有个关键点要把组件名字更换为wxcomponents，并且在src目录下，如下图：

然后我们注册的时候在pages.json中，在usingComponents全局注册，和以往的一样，这里的路径要以/开头

我们在官网粘的是"van-uploader": "@vant/weapp/uploader/index"，这里使用的话，我们写成

"/wxcomponents/uploader/index"就可以了，没有中间的weapp目录。

小小前端upup
关注
uniapp(微信小程序)使用vant全过程
Jk200165的博客
11-24 682
github:轻量、可靠的小程序 UI 组件库. Contribute to youzan/vant-weapp development by creating an account on GitHub.# 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production。
如何在uni-app中使用vant组件？最细教学，还看不懂你来捶我
热门推荐
m0_74052733的博客
10-17 1万+
在我们刚才新建的wxcomponents 目录下新建一个 @vant 的文件夹，建立目录方法就和步骤三一样，只不过这一次我们要在 wxcomponents 目录下建立 子目录 @vant。最近在做uni-app的时候需要用到vant组件，在网上看到了很多的使用vant组件的方法，但是讲解的大多繁琐，或者无法使用，现把最新，最实用的vant组件的使用方法分享给大家。再多提一嘴，vant组件是配合原生小程序使用的，所有有些地方，比如data数据渲染，我们不能直接照抄，一般用vue的思路就可以解决啦。
uniapp做分包操作
weixin_68658847的博客
08-18 391
uniapp做分包操作
uniapp 微信小程序引入vant weapp 2023.4 (II)
martian2049的博客
04-21 538
uniapp+vue2+vant的路径，hbuilderx编译器
UniApp+Vue3使用Vant-微信小程序组件
qq_45623072的博客
06-09 1035
在page.json。
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 7222
解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。
uniapp微信小程序使用vant-weapp详细操作步骤（各种坑）
南北极之间
10-20 4511
首先在微信小程序里用的vant是vant-weapp而不是vant官网：Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库。
在uniapp中使用VantUI组件库(微信版)
weixin_48888726的博客
11-08 2142
【代码】在uniapp中使用VantUI组件库(微信版)
uniapp/微信小程序/h5三级地址选择器地区数据
04-14
开发uniapp时，vant组件库中的地址需要自己加，所以就自己封装了一个地址data，使用方法可移步H5开发记录帖
微信小程序vant弹窗组件的实现方式
10-15
【微信小程序vant弹窗组件的实现方式】 在前端开发中，弹窗组件是常见的交互元素，用于提供信息提示、用户确认、数据输入等场景。Vant Weapp 是由有赞团队开发的一款专为微信小程序设计的UI组件库，它提供了灵活、...
在uni-app中写微信小程序，引入vantWeapp库
weixin_48789376的博客
09-27 1919
背景 公司使用uni-app写小程序，这样在vant官网的vantweapp的引入方法就不起效果的，官网是针对使用微信小程序原生开发的。然后我也在网上百度了很多方法，但是对于我来说也不怎么起效果，现在记录一下我已经成功引入vantweapp的组件方法 如何引入 1.在项目的根目录的终端，输入命令npm i @vant/weapp -S --production，然后你的项目里就多了这样的文件 2.在根目录底下新建一个wxcomponents目录，然后将上图中dist文件夹拷贝到wxcomponents底下,
微信小程序动态导航栏（uniapp + vant）
954L
12-19 1267
vant小程序版本：[https://vant-contrib.gitee.io/vant-weapp/#/home](https://vant-contrib.gitee.io/vant-weapp/#/home) 注：vant并没有uniapp的版本，所以此处是引入小程序版本的ui
如何在uniapp中使用vant框架
m0_68095466的博客
10-09 7244
在进行uiapp项目的开发时，有时uniapp自带的组件无法满足我们的开发需求，而需要引用第三方的框架，比如vant。那么如何在uniapp中使用vant呢？
[保姆级教程]在uniapp中使用vant框架
肥晨开发的学习之路
06-21 6487
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。
uniapp导入使用vant-weapp组件
cuilinlong的博客
05-13 2242
将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。
uniapp微信小程序引入vant组件库
章小鱼的博客
06-01 5069
使用uniapp写微信小程序时，使用vant组件库
微信小程序使用vant组件库
weixin_54189624的博客
03-24 373
废话不多说直接上操作。
uniapp开发微信小程序使用vant框架过程
zhu_liu_kun的博客
06-07 1138
1.安装# 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp --production。
在uniapp项目中引入vant
weixin_73098736的博客
06-22 1004
如果我们在正确配置后无法显示组件，这是因为安装组件库后需要重新运行项目。将之前的dist文件复制到wxcomponents中。会在项目根目录生成node_modules。在pages.json中引入我们需要的组件。全局引入放在"globalStyle"中。我们会需要复制dist，后面会用到。可以全局引入，也可以在单个文件引入。将全局样式添加到App.vue中。此目录要建在根目录下。
uniapp微信小程序打开地图定位
最新发布
09-27
UniApp 是一套基于 Vue.js 的多端框架，用于快速构建兼容微信小程序、H5、App（iOS & Android）等平台的应用。要在 UniApp 中集成微信小程序的地图定位功能，你需要使用腾讯地图 SDK 或微信提供的官方 Map 组件。 以下是基本步骤： 1. **引入依赖**： 在项目的 `uni-app.config.js` 文件中，添加对地图组件的支持： ```javascript // uni-app.config.js framework: { env: { wx: true, // 开启微信小程序支持 }, }, plugin: { 'map': {} // 引入地图插件 } ``` 2. **安装并导入地图组件**： 使用命令行工具 `uni-app` 安装： ``` $ tns install map ``` 然后在需要使用地图定位的地方导入组件： ```vue <template> <view> <map-view :show-location="showLocation" :enable-high-precision="true"></map-view> </view> </template> <script> import { MapView } from '@vant/map'; export default { components: { MapView, }, data() { return { showLocation: false, // 控制是否显示定位 }; }, //... } </script> ``` 3. **请求用户位置权限**： 在适当的位置请求用户的地理位置访问权限，如 `onLoad` 生命周期钩子： ```javascript onLoad() { this.requestLocationPermission(); }, methods: { requestLocationPermission() { uni.geolocation.getCurrentPosition({ success(res) { // 用户同意授权，获取经纬度 this.showLocation = true; }, fail(err) { console.error('获取位置失败:', err); }, }); }, } ``` 4. **处理地图事件**： 可能还需要监听地图的 `locationChange` 事件，以便实时更新位置信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值