微信小程序——Vant Weapp的初步使用说明

在微信工程目录下

在终端中输入npm init（初始化设置）

不用输入继续回车（全部默认即可）

整个步骤结束以后它会在\miniprogram目录下生成两个json文件
不用去修改它自动生成的文件，接下来在终端中执行npm i @vant/weapp -S --production命令

打开微信小程序菜单栏点击工具—构建 npm

构建完成后会有相应提示，也会生成一个文件夹(miniprogram_npm)

打开右上角详情—本地设置—勾选使用 npm 模块

打开工程界面里的.json文件(例:index.json)，在"usingComponents"中写入要引用的路径地址（以Button为例）

打开.wxml编辑布局（如下）

更多样式请参考官方文档Vant Weapp - 轻量、可靠的小程序 UI 组件库

微信小程序——Vant Weapp的初步使用说明相关推荐

微信小程序Vant Weapp里面Calendar 日历组件不显示的问题
想用Vant Weapp弄个弹出日历选择日期的组件,但是发现按照Vant Weapp里面的文档复制粘贴就翻车了. 复制粘贴后小程序界面空空如也,啥都没有. 百度了一番也没有帖子写这个问题,然后我就只能 ...
微信小程序 - Vant weapp UI 框架环境搭建详细教程（Window）
前言强烈推荐您打开官方文档,对照着本教程一起对比搭建坏境. 自从 2022 年开始,小程序做了很多改变和升级, 导致网上很多搭建教程文章的教程失效了,本文来做最新的教程. 第一步为了更贴合新手, ...
微信小程序 Vant Weapp 引入Dialog的使用
首先在当前目录的JOSN文件里 "usingComponents": {"van-dialog": "@vant/weapp/dialog/index ...
微信小程序 vant webapp开发
一.简介 vant 官网 https://youzan.github.io/vant-weapp/#/home 最近开发微信小程序使用 vant 过程中按照官网步骤没有成功,特此记录二.环境说明开 ...
微信小程序 + vant组件van-card 图片解析不到
在使用vant组件制作微信小程序项目时,遇到了图片解析不到的问题. 场景如下: 在页面中,应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性,即可在左侧位 ...
微信小程序（一）初步，包括（初步了解微信小程序，小程序项目结构，小程序宿主环境，发布与上线等）
文章目录前言一微信小程序 1. 小程序与普通网页开发的区别 2. 注册小程序开发帐号 3. 安装开发者工具 4. 创建小程序项目 5. 查看项目效果 6. 主界面的 5 个组成部分二项目结构 ...
微信小程序--菜鸡队初步构思
习惯养成之缘起背景项目详解背景从刚接触到这门课得知做微信小程序的我是一脸懵逼的,在上了两次实验课自己动手做了几个实验后,对微信小程序中的各种格式.组件有了大致的了解.对微信小程序开发也有了 ...
微信小程序 - vant popup弹出层阻止底层页面滑动
前言在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层,触屏致使底层页面跟着滑动.web 解决方法使用touch事件阻止属性,@touchmove.stop.prev ...
小程序Vant Weapp的Dialog使用before-close
结合使用了组件调用和异步关闭,vant官方文档好像没有考虑过这个问题,参考了大佬的写法小程序 van-dialog确认时阻止弹窗关闭 Vant/Weapp/Dialog/before-close的用 ...

微信小程序——Vant Weapp的初步使用说明

微信小程序——Vant Weapp的初步使用说明相关推荐

最新文章

热门文章