微信小程序-npm

npm

目前小程序已经支持使用npm安装第三方包，因为node_modules目录中的包不会参与小程序项目的编译、上传和打包，所以小程序如果想要使用npm包，必须要走一遍构建npm的过程

npm init -y

---

项目结构

微信小程序的默认目录中，源码是直接放在根目录下的，这不利于平日开发中项目规范，例如vue就会将源码放入src目录下

在project.config.json配置文件中，配置miniprogramRoot配置项，可配置源码文件的位置

在project.config.json配置文件中，配置setting配置项packNpmManually为true，可配置允许自定义npm相关目录

在project.config.json配置文件中，配置setting配置项packNpmRelationList，可配置npm相关目录

"miniprogramRoot": "./src", // 配置小程序源码根目录
"setting": {
  "packNpmManually": true, // 允许自定义npm相关目录
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package", // 配置npm配置文件地址
      "miniprogramNpmDistDir": "./src" // 将构建好的npm依赖存放到源代码包下
    }
  ],
}

---

Vant Weapp

Vant 是一个轻量、可定制的移动端组件库

npm i @vant/weapp

安装之后也不能正常使用，我们需要找到工具-> 构建npm选项

会生成miniprogram_npm文件夹，这就是npm组件构建的内容

因为运行环境的特殊性，并不是所有的包都能在微信小程序中使用，需要使用专门为小程序定制的npm包

组件样式版本

微信小程序在版本更新后提供了很多新的组件和组件样式，这使得Vant Weapp的组件样式很难覆盖

我们在使用Vant Weapp之前，先取消掉小程序新版样式，在app.json中，删掉style配置项即可

注册组件

可以选择在app.json中全局注册组件，或选择在页面.json中局部注册组件

图片组件

在使用van-image图片组件时，如果需要渲染本地图片，不能使用相对路径来找图，而是使用相对于小程序的源码的目录来查找图片才可以找到

组件也提供了很多事件属性，比如图片组件提供了bind:tap作为点击事件使用

组件样式修改方法

1. 取消组件样式隔离
2. 使用外部样式类
3. 使用CSS变量

---