狗尾草

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

微信小程序集成vant

   微信小程序集成vant,大概的过程先通过npm 安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm

   开发环境 macOS ,微信小程序模版【支持腾讯云

  1. 安装vant包
  cd  miniprogram
  # 通过 npm 安装
  npm i @vant/weapp -S --production
  1. 配置微信小程序的样式,去除miniprogram/app.json中"style":"v2"

  2. 配置项目config中的packageJsonPath 和miniprogramNpmDistDir
    packageJsonPath -> npm 的package.json文件的位置
    miniprogramNpmDistDir -> 生成miniprogramNpm的文件目录位置

 //下面供参考,开发中按照实际的位置填写
  "packNpmRelationList": [
      {
        "packageJsonPath": "./miniprogram/package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]

4 构建 npm 包
   打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

5 测试vant包
   在index界面中添加一个button

 // app.json 配置button包
   "usingComponents": {
  "van-button": "@vant/weapp/button/index"
   }   
  
  // 在index.wxml中添加Button
     <van-button type="primary">按钮</van-button>

  1. 完整的项目结构

posted on   狗尾草-大数据收割基  阅读(394)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
历史上的今天:
2015-04-26 (ios)MPMoviePlayerController首次播放视频的时候,没有控制条
2015-04-26 ios app响应background,foreground 事件实现
2010-04-26 底层逻辑层发起,数据流向上一级逻辑层 的几种方式
点击右上角即可分享
微信分享提示