uni-app入门:小程序UI组件Vant Weapp

简介: Vant Weapp 是一个轻量、可靠的移动端组件库,于 2017 年开源,是由有赞前端团队开源的小程序UI组件库,可以简化小程序开发。

1.vant介绍


    Vant Weapp 是一个轻量、可靠的移动端组件库,于 2017 年开源,是由有赞前端团队开源的小程序UI组件库,可以简化小程序开发。官方地址:

https://youzan.github.io/vant-weapp/#/home


2.安装步骤


2.1 通过 npm 安装

    微信开发者工具项目根目录空白区域右键选择外部终端窗口打开.执行如下命令(指定版本号:1.3.3):

npm i @vant/weapp@1.3.3 -S --production

安装成功之后截图如下:

d99b3746958fff2543d0dfdce349175c_bd402f8f99e5497e8ce61802bd2898b1.png


    注意如果项目根目录中不存在package.json文件(package.json是一个项目描述文件, 里面记录了当前项目的信息)则需要初始化生成,执行命令(执行命令路径同上):

npm init -y


2.2 修改 app.json

    将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。


2.3 修改 project.config.json

    微信开发者工具创建的项目miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}


2.4 构建 npm 包

    打开微信开发者工具,点击 工具 -> 构建 npm,构建完成后,会显示构建时间,如下图:

43ec8cc55eac59a15abc5295a12616a3_2a992e1c08ef4cfda44b07f0a622d1ee.png

    注意:新版微信开发者工具中默认支持使用npm模块,所以在本地设置中不会显示使用npm模块选项.

bd3ff1fb068940c8666441a92bb30c69_1f7ef5ecd4f842359631f18b23287bfd.png

使用说明

    以 Button 组件为例,只需要在app.json(全局配置)或页面.json中配置 Button 对应的路径即可。以下演示案例在index页面引用vant的buton组件:

index.json中

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

index.wxml中使用按钮:

<van-button type="primary">默认按钮</van-button>

成功添加按钮:

489ab05e5dc9e5ed7aef02b2cc6c4813_962e66c5c6024b969aa1e463a0dd2ce9.png

相关文章
|
18天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
266 7
|
18天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
369 1
|
19天前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
46 1
微信小程序:轻松实现时间轴组件
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
4天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
18天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
135 3
|
18天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
229 1
|
1天前
|
小程序 测试技术
上门家政维修系统软件开发,一套类似啄木鸟维修的小程序APP只要3000你敢信?
在数字化商业时代,一款名为“啄木鸟维修”的小程序 APP 以 3000 元的价格亮相,引发了广泛关注。这款 APP 功能全面,支持自营或入驻模式,提供完善的售后服务和详细的运营策略,开发周期仅需 3-5 天。它是否物超所值,还需用户自行判断,但其在市场中的表现确实引人注目。
|
18天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
201 0
|
25天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
39 0
微信小程序更新提醒uniapp

热门文章

最新文章