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

2022-09-27 20:22:52 浏览数 (1)

文章目录

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

前言

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

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

一、UI框架的引入

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

代码语言:javascript复制
npm init
npm i @vant/weapp -S --production

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

二、UI框架的使用

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

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

代码语言:javascript复制
"usingComponents": {
    "van-button": "@vant/weapp/button/index",
}
代码语言:javascript复制
<view>
  <van-button type="default">默认按钮</van-button>
</view>

0 人点赞