微信小程序中使用Vant weapp UI组件库

本文介绍了微信小程序中使用Vant weapp UI组件库的流程,包括为何使用UI组件库以确保项目统一性和用户体验。通过四个步骤详细讲解了如何集成和使用该组件库,包括npm下载、本地设置、构建npm以及引入和使用组件。
摘要由CSDN通过智能技术生成

–前言–
具体使用可参考官方文档:
Vant weapp官方文档(国内 点击跳转)https://vant-contrib.gitee.io/vant-weapp/#/quickstart

补:
其他UI组件库使用方法基本相同
视频教学(可参考b站王进老师):https://www.bilibili.com/video/BV18V411C7VV?from=search&seid=3250286661692137778

一.什么是UI组件库

1.可以帮助我们快速进行开发的一个界面库。
2.为了一个项目有统一的主题(颜色),外观,和操作体验。一般来说一个项目由一个团队开发,如何保证团队里面的每个人都对同一个事情有同一个认知,而这几乎不可能。这样说大家可能不太能理解,举例来说:同一种情况下,同一个按钮,不同的人用的颜色,底色,边框圆角不可能完全一致。就算是同一个人,也不一定能保证在同样的情况下,按钮的主题,外观,操作反馈一定是一样的。所以大公司制定统一的开发标准,开发底层公共组件库,保证同一个项目中同一种情况下用户的体验是一致的。(这里包括颜色,外观,操作反馈等)。
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在JavaScript动态创建Vant Weapp UI组件并将其添加到界面上,您可以使用Vant Weapp提供的wx.createSelectorQuery()方法来获取页面指定的节点信息,然后使用Vant Weapp提供的组件工厂方法来创建组件并设置相应的属性和事件处理程序,最后将组件添加到节点即可。 以下是一个示例代码,演示如何在JavaScript动态创建Vant Weapp的按钮组件并将其添加到页面: ```javascript // 获取页面指定节点的信息 const query = wx.createSelectorQuery(); query.select('#container').boundingClientRect(); query.exec((res) => { // 创建按钮组件 const button = require('../../miniprogram_npm/vant-weapp/button/index'); const buttonComponent = button({ data: { text: 'Click me!', type: 'primary' }, methods: { onClick() { console.log('Button clicked!'); } } }); // 将按钮组件添加到指定节点 const container = res[0]; const buttonNode = buttonComponent.$el; buttonNode.style.position = 'absolute'; buttonNode.style.left = '50%'; buttonNode.style.top = '50%'; buttonNode.style.transform = 'translate(-50%, -50%)'; container.appendChild(buttonNode); }); ``` 在这个例子,我们首先使用wx.createSelectorQuery()方法获取了ID为“container”的节点的信息。接下来,我们使用require()方法加载Vant Weapp的按钮组件,并创建一个新的组件实例。我们设置了按钮的text属性为“Click me!”,type属性为“primary”,并定义了一个onClick()方法作为按钮的事件处理程序。 最后,我们将按钮组件添加到容器节点,并使用CSS样式将其居显示。 注意,由于Vant Weapp是一个小程序组件,因此您需要在小程序的.json配置文件声明Vant Weapp作为依赖,以便在JavaScript加载Vant Weapp组件。 ```json { "usingComponents": { "van-button": "../../miniprogram_npm/vant-weapp/button/index" } } ``` 在.json配置文件,我们将Vant Weapp的按钮组件声明为一个自定义组件,并指定其路径。这样,在JavaScript使用require()方法加载组件时,就可以通过路径引用Vant Weapp的按钮组件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值