微信开发者工具构建npm引入安装外部框架包(以VantWeapp为例)

为什么不能再微信小程序中直接使用npm包?

 

因为微信小程序是在小程序开发环境中运行的，与 Node.js 环境有所区别。因此，不能直接使用通过 npm 下载的包，而是需要通过微信小程序的机制进行转换和适配。

进入正题

第一步:打开终端,输入npm init -y,生成package.json文件

第二步: 输入npm i @vant/weapp -S --production          

 vantweapp地址:Vant Weapp - 轻量、可靠的小程序 UI 组件库

 

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

第四步:微信开发者工具，点击 工具 -> 构建  npm (先不要按照vantweapp中先配置project.config.json文件)

第五步:小程序原始的一套开发环境比较基础，小程序项目的规模变大后将不易管理，需要有针对性的对开发环境进行调整,需要优化目录结构.

  将文件改成=>

第六步:修改project.config.json文件中的配置

tips:"ignoreDevUnusedFiles": false,       //这俩个是忽略引用了
     "ignoreUploadUnusedFiles": false,    //但是没被调用文件组件的设置

{
  // 省略其他......
  "setting": {
    // 省略其他......
    "ignoreDevUnusedFiles": false,       //这俩个是忽略引用了
    "ignoreUploadUnusedFiles": false,    //但是没被调用文件组件的设置

    // 省略其他......
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "miniprogramNpmDistDir": "./miniprogram",
        "packageJsonPath": "package.json"
      }
    ]
  },
  "miniprogramRoot": "miniprogram/"
}

第七步:引入组件开始使用

在app.json中全局注册

// 通过 npm 安装的
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

以上就是在小程序构建npm包和安装vant组件,vant的组件的使用详情可查看vantweapp官网

地址:Vant Weapp - 轻量、可靠的小程序 UI 组件库

微信开发者文档 :微信开放文档