【小程序使用vant Weapp组件库详细教程】

这篇具有很好参考价值的文章主要介绍了【小程序使用vant Weapp组件库详细教程】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序使用vant Weapp组件库详细教程

要说到小程序开发过程中用到的UI组件库,我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求,在这里都可以找到并且直接使用,就很nice了。

小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp
Github源码:https://github.com/youzan/vant-weapp
中文文档:https://vant-contrib.gitee.io/vant-weapp/#/intro

话不多说,记录一下这个框架的使用~

1:打开微信开发者工具,填写自己的appid和项目名称,选择不使用云服务,新建一个项目。vant weapp,小程序,vue.js,javascript
vant weapp,小程序,vue.js,javascript

2:右击在选择在终端打开
vant weapp,小程序,vue.js,javascript
进入项目的根目录底下,注意,一定要进入根目录哦,使用cd …/返回上一级目录~
vant weapp,小程序,vue.js,javascript

3:小程序已经支持使用 npm 安装第三方包,
这里通过 npm 安装

1、第一步:npm init
2、第二步:npm install --production
3、第三步: npm i @vant/weapp -S --production或者 npm i vant-weapp -S --production复制

vant weapp,小程序,vue.js,javascript
vant weapp,小程序,vue.js,javascript
vant weapp,小程序,vue.js,javascript

这里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的区别

使用npm i vant-weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/vant-weapp/button/index"
  }
}

使用npm i @vant/weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径(推荐,因为这个可以直接抄文档,不需要改变引入路径的~)

{
	"usingComponents": {
	  "van-button": "@vant/weapp/button/index"
	}
}

4:在微信开发工具执行npm 构建,点击工具里面,构建npm

vant weapp,小程序,vue.js,javascript

构建过程需要等待一会儿,不要捉急

vant weapp,小程序,vue.js,javascript

构建完会生成一个miniprogram_npm文件夹
如果构建完如果编译报错,再构建一次就好了

vant weapp,小程序,vue.js,javascript

5:使用vant-weapp
看文档上的代码,来实现一个小按钮,照着文档复制粘贴即可~就是这么的任性
https://vant-contrib.gitee.io/vant-weapp/#/button

在app.json或index.json中引入组件
上面说了,我是用 npm i @vant/weapp -S --production这种方式安装的,所以引入路径可以直接使用文档上,直接粘贴,不需要修改路径~

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

然后再copy一下wxml的代码

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

好了,这个时候就已经可以了
vant weapp,小程序,vue.js,javascript文章来源地址https://www.toymoban.com/news/detail-597949.html

到了这里,关于【小程序使用vant Weapp组件库详细教程】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序-封装 @vant/weapp上传图片及视频预览组件

    项目中用到了上传图片的业务,为此进行了封装 i-uploader 和 i-uploader-video 组件。 index.js : index.scss : index.json : index.wxml : 使用: page.wxml : index.js : index.json : index.scss : index.wxml : 使用: page.wxml :

    2024年02月12日
    浏览(39)
  • 【微信小程序】Vant Weapp 组件 uploader文件上传

    wxml中: json中: js中:

    2024年02月16日
    浏览(63)
  • 解决微信小程序vant weapp组件库时间选择器只显示年year的问题 vant weapp版本1.10.5

    当今网上十篇文章九个抄,抄的还都是远古文章,完全不适用现在的版本,故于2023.3.10日,出一篇现vant weapp版本1.10.5的时间选择器只显示year模式的需求,解决官方无法显示只带有年份year的时间选择器问题 找到时间选择器文件,修改datetime-picker/index.js源码 1. 先让面板支持只

    2024年02月12日
    浏览(42)
  • 微信小程序用vant weapp组件设置圆角边框输入框

    vant weapp的输入框样式默认都是方形的,有时候需要设置成圆角的样式,发现直接设置以下样式根本不起作用,这是因为框架自带的样式导致的,这时候我们需要看看style,找到为什么修改不成功。 起初我把所有能试的方法都试了发现就是没有办法改变边框的样式,后来才发现

    2024年02月13日
    浏览(90)
  • Vue+elementui和uniapp小程序+vant weapp

    人都傻了,搞了两天一直报错,才知道elementui是PC端的ui,不能用于小程序。 所以我要做两个vue的练习项目,,,,又发现新大陆,小程序除了uniapp还有taro,又有新东西学 了 第一种 PC端VUE+elementui ① npm init vue@latest ②npm install element-plus --save 顺便说一句,如果安装了一个不想要

    2024年02月03日
    浏览(29)
  • 小程序页面嵌套自定义组件无法修改vant-weapp样式的问题

    问题描述: 一般情况下,小程序想修改vant组件的样式只需要找到对应vant组件的类名,可以自由的在自己的wxss文件中进行修改。 但当我们在自定义组件内引入vant元素,再将自定义组件内嵌到小程序某个页面中的时候,此时,自定义组件内的vant元素的样式就无法修改了。 我

    2024年02月16日
    浏览(55)
  • 微信小程序导入Vant Weapp ui组件库2023年最新版

    写这篇文章的原因是Vant Weapp的官方文档快速上手是有一定的问题的,没错,我就是那个试错的人,弄了一下午才发现问题所在,所以写了一篇正确的导入教程。 第一步:在项目所在目录打开控制台 第二步:查看自己电脑npm的版本,如果有会有版本号显示,没有则需要去下载

    2024年02月09日
    浏览(56)
  • 微信小程序 使用 vant-weapp 组件 van-field 类型为 textarea 在IOS端出现的问题记录

    在 IOS 端 出现 textarea 的 value 出现在最顶层, 上下滚动就消失, 此bug容易引起观感不适 出现该bug的原因 可能 是官方的原生组件的使用限制 微信小程序原生组件的使用限制 提供一个 showKey 布尔值去做限制, wx:if 为 false 时使用 text/text , 为 true 时使用回 van-field type=\\\"textarea\\\"/van-fi

    2024年02月13日
    浏览(67)
  • 小程序引入vant-Weapp保姆级教程及安装过程的问题解决

    小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。 本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金 当你想在小程序里引入vant时,第一步:打开官方文档,第二步:切到快速上手,然后开始步骤一、步骤二、步骤三? 你只会看到 -----------

    2024年02月05日
    浏览(57)
  • uniapp+vue3项目中使用vant-weapp

    创建项目 通过vue-cli命令行创建项目 Vue3/Vite版要求 node 版本 ^14.18.0 || =16.0.0 uni-app官网 (dcloud.net.cn) 打开项目 点击顶部菜单栏终端/新建终端 执行安装依赖指令 安装vant-weapp 引入vant-weapp 在  /src目录下 创建  wxcomponents  目录 复制node_modules/@vant/weapp/dist文件夹到 wxcomponents文件夹

    2024年02月13日
    浏览(135)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包