微信小程序简易搭建之框架/组件库

最新推荐文章于 2025-03-15 13:46:19 发布

原创最新推荐文章于 2025-03-15 13:46:19 发布 · 2.9w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #简易教程 #框架 #组件

微信小程序专栏收录该内容

7 篇文章

订阅专栏

本文是微信小程序简易搭建教程，主要介绍了Vant weapp框架的导入方法。包括从GitHub下载后找到dist文件夹，将其拖进项目，在json文件中复制相关代码并更改路径，还可将想要的按钮复制到wxml下，不过这些按钮暂未绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序简易搭建之框架/组件库
Vant weapp
下面看看如何导入
在这里插入图片描述
https://github.com/youzan/vant-weapp

使用教程：

1.下载后找到dist
在这里插入图片描述
2.

在你的项目里面点击红色圈的…三点
把dist拖进你的项目

3.
es6

“usingComponents”: {
“van-button”: “path/to/vant-weapp/dist/button/index”
}
es5

“usingComponents”: {
“van-button”: “path/to/vant-weapp/lib/button/index”
}

将这个复制到json中
更改path
在这里插入图片描述
然后将下面的想要的按钮复制到wxml下

按钮类型

<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>
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="danger">朴素按钮</van-button>
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="danger">细边框按钮</van-button>
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="danger">禁用状态</van-button>
<van-button loading type="primary" />
<van-button loading type="danger" loading-text="加载中..." />
<van-button square type="primary">方形按钮</van-button>
<van-button round type="danger">圆形按钮</van-button>

在这里插入图片描述
按钮样式使用成功
当然了
这些按钮没有绑定事件