【微信小程序--npm第三方包】

github_39096247

已于 2023-05-06 17:49:56 修改

阅读量223

点赞数

分类专栏：微信小程序文章标签： npm 微信小程序

于 2023-05-06 16:27:07 首次发布

本文链接：https://blog.youkuaiyun.com/github_39096247/article/details/130528891

版权

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

7 篇文章

订阅专栏

小程序对npm的支持和限制

npm包每次使用都要重新构建

在这里插入图片描述

举例：使用npm包 vant weapp（小程序UI组件库）

Vant官方：https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

步骤：
1、小程序资源管理器空白处右键最后一行点击在外部终端窗口中打开
2、npm init -y 初始化package.json
3、步骤一 npm i @vant/weapp@1.3.3 -S --production 安装指定版本的vant
4、具体操作步骤官方地址:https://youzan.github.io/vant-weapp/#/quickstart#bu-zou-er-xiu-gai-app.json

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

步骤三修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

新版本的 miniprogramNpmDistDir 配置为’./'即可

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

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

// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

6、使用组件

<van-button type="primary">按钮</van-button>

主题定制

Vant Weapp 使用 CSS 变量来实现定制主题。关于CSS 变量的基本用法，请参考 MDN 文档:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

Vant官方配置文件：
https://youzan.github.io/vant-weapp/#/theme