微信小程序使用Vant Weapp(最新版)

一、初始化

1.右键选择资源管理器显示

2.进入终端

3.打开终端

4.初始化命令

csharp 复制代码
npm init
  • 目录出现package.json文件,即为引入成功

二、安装依赖

1. 通过 npm 安装vant/weapp

css 复制代码
npm i @vant/weapp -S --production

2. 安装 miniprogram

css 复制代码
npm i miniprogram-sm-crypto --production

出现下述内容,即为安装成功

3. 修改 app.json

  • app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

4. 修改 project.config.json

  • 开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
  • 需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
  • 此处修改注意层级与属性,是在setting对象中,packNpmRelationList中两个属性为数组包裹对象的形式
json 复制代码
{
  "setting": {
    "packNpmManually": false,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

5.构建npm

  • 左上角-工具-构建npm
  • 构建成功弹出如下

6.使用npm模块

  • 注意:最新版的微信开发者工具没有【使用npm模块】选项,可以直接使用
  • 如果有【使用npm模块】选项,则勾选,具体图例如下:
  • 右上角详情---本地设置----使用npm模块

三、使用组件

  • 分为全局注册与按需引入两种,任选其一,各有优劣

1. 注册组件(二选一)

全局注册,在app.json中注册 按需引入,在要使用的当前页面文件的。json文件中注册

css 复制代码
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }

2.页面首页

注册后任意页面的wxml中直接使用即可

bash 复制代码
<van-button type="info">信息按钮</van-button>
相关推荐
2301_805962931 小时前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero1 小时前
微信小程序121~130
微信小程序·小程序
難釋懷1 小时前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~1 小时前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
脑袋大大的1 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie2 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5