【愚公系列】2022年09月 微信小程序-电商项目-UI框架的选型

文章目录

• 前言
• 一、UI框架的引入
• 二、UI框架的使用

前言

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

git网址：https://gitee.com/vant-contrib/vant-weapp/

一、UI框架的引入

在小程序目录输入如下命令

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

在这里插入图片描述

在微信开发者工具选择构建

在这里插入图片描述

二、UI框架的使用

去除app.json里的 “style”: “v2” ，因为小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可

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

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

在这里插入图片描述