耀极客论坛

 找回密码
 立即注册
查看: 448|回复: 0

微信小程序中使用vant框架的具体步骤

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 00:17:03 | 显示全部楼层 |阅读模式
  本文主要介绍了微信小程序中使用vant框架的具体步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧。
  2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
  3.我们废话不多说,直接进入今天的主题。我们该如何在微信小程序中去使用vant组件库呢!
  首先
  我们先打开vant weapp网站,这里我将网站地址给大家。Vant Weapp 网址
  大家打开网站后呢,点击快速上手。上面就有步骤教你如何在小程序中使用vant组件库。
  下面呢就给大家介绍一下我是如何去安装使用vant UI组件库的。

1.打开我们小程序的项目目录,然后打开文件所在的位置。


2.初始化项目文件
  这里呢我通过 cmd 窗口初始化


3.输入初始化项目的命令
  1. npm init
复制代码
  此时你会发现你的目录多出了package.json文件


4.安装依赖
  4.1 通过 npm 安装vant/weapp
  1. npm i @vant/weapp -S --production
复制代码
  4.2 安装 miniprogram
  1. npm i miniprogram-sm-crypto --production
复制代码
  安装完毕后,你会发现你的目录中又多些文件。

  4.3 修改 app.json
  将 app.json 中的 "style": "v2" 去除,原因是小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
  4.4 修改 project.config.json
  开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
  1. {
  2.   ...
  3.   "setting": {
  4.     ...
  5.     "packNpmManually": true,
  6.     "packNpmRelationList": [
  7.       {
  8.         "packageJsonPath": "./package.json",
  9.         "miniprogramNpmDistDir": "./miniprogram/"
  10.       }
  11.     ]
  12.   }
  13. }
复制代码
  1. 4.5 构建 npm 我们点击左上角的工具栏
复制代码

  构建成功后会出现下面的画面

  4.6然后点击右上角的详情---本地设置----使用npm模块


5.使用组件
  我这里在全局里面注册一个按钮,然后使用它。先去app.json中注册

  这里我随便找一个页面用一下这个按钮组件。

  大家可以看到我使用成功了。
  到此这篇关于微信小程序中使用vant框架的具体步骤的文章就介绍到这了,更多相关小程序使用vant框架内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:23 , Processed in 0.073072 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表