npm支持

136 阅读3分钟

1.使用npm包

1.目前小程序已经支持使用 npm 安装第三方包,因为 node modules 目录中的包不会参与小程序项目的编译、上传和打包,因此在小程序项目中要使用的 npm 包,必须走一遍 构建 npm 的过程。
2.在构建成功以后,默认 会在小程序项目根目录,也就是 node modules 同级目录下生成 miniprogram npm 目录,里面存放着构建完成以后的 npm 包,也就是小程序运行过程中真正使用的包
3.注意事项:
    1.小程序运行在微信内部,因为运行环境的特殊性,这就导致 并不是所有的包都能够在小程序使用
    2.我们在小程序中提到的包指专为小程序定制的 npm 包,简称小程序 npm 包,在使用包之前需要先确定该包是否支持小程序
    3.开发者如果需要发布小程序包,需要参考官方规范:htps://developers.weixin.gg.com/miniprogram/dev/devtools/npm.html#发布-npm-包

2.自定义构建 npm

1.在实际的开发中,随着项目的功能越来越多、项目越来越复杂,文件目录也变的很繁琐,为了方便进行项目的开发,开发人员通常会对目录结构进行调整优化,例如:将小程序源码放到 miniprogram 目录下
2.这时候需要开发者在 project.config.json 中指定 node modues 的位置和 目标 miniprogram_npm 的位置
3.具体配置如下:
    1.配置 project.config.json 的 miniprogramRoot 指定小程序源码的目录
    2.配置 project.config.json 的 seting.packNpmManualy 为 tue,开启自定义 node modules和 miniprogram npm 位置的构建 npm 方式
    3.配置 project.config.json 的 setting.packNomRelationList 项,指定 packageJsonPath 和 miniprogramNpmDistDir 的位置

3.Vant weapp 组件库的使用

1.Vant Weapp 是有赞前端团队开源的小程序 U1组件库,基于微信小程序的自定义组件开发,可用来快速搭建小程序项目。
2.在使用 Vant 提供的组件时,只需要两个步骤:
    1.将组件在 app.ison 中进行全部注册 或者 index.json 中进行局部注册
    2.在引入组件后,可以在 wxml 中直接使用组件
3.注意事项:
    将 app.json 中的 "styie”:"v2”去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

4.Vant weapp 组件样式覆盖

Vant Weapp 基于微信小程序的机制,为开发者提供了3种修改组件样式的方法
    1.解除样式隔离:在页面中使用 Vant Weapp 组件时,可直接在页面的样式文件中覆盖样式
    2.使用外部样式类:需要注意的是普通样式类和外部样式类的优先级是未定义的,使用时需要添加 !important 保证外部样式类的优先级
    3.使用 CSS 变量:在页面或全局对多个组件的样式做批量修改以进行主题样式的定制