vant weapp 在小程序中的使用

2024-10-16 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vant weapp 在小程序中的使用

vant weapp

轻量、可靠的小程序 UI 组件库

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

体验

在原生小程序中使用

原生小程序中可以使用 npm

通过 npm 安装
需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下

通过 npm 安装
npm i @vant/weapp -S --production
 通过 yarn 安装
yarn add @vant/weapp --production
 安装 0.x 版本
npm i vant-weapp -S --production

构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件
修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

uni app 中使用 vant weapp

在uni-app项目的src内新建文件夹 wxcomponents
下载 vant weapp 中编译好的 dist 文件
将其直接复制到 wxcomponents 文件夹内
在 App.vue 中引入 vant weapp 通用样式

html

<style>
@import "@/wxcomponents/dist/common/index.wxss"
  /*每个页面公共css */
</style>

在页面配置中来声明要引入的组件 pages.json

json

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "黑马-万少",
        "usingComponents": {
            "van-button": "/wxcomponents/dist/button/index"
        }
    }
},

页面中直接使用

html

<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>