【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)

简介: 【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)



一、使用 npm 包 - Vant Weapp

  前面对学习到的自定义组件等相关内容进行了一个总结。接下来就来学习小程序中的使用 npm 包 - Vant Weapp。话不多说,让我们原文再续,书接上回吧。

  目前,小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用 npm 包有如下 3 个限制:

  • 不支持依赖于 Node.js 内置库的包。
  • 不支持依赖于浏览器内置对象的包。
  • 不支持依赖于 C++ 插件的包。

  由于限制太多,所以能供小程序使用的包基本上为数不多。

1、Vant Weapp

  Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议,对商业使用比较友好,更多详细内容可以看一下 官方文档地址

2、安装 Vant 组件库

  在小程序项目中,安装 Vant 组件库主要分为如下 4 步:

  • Step 1、 通过 npm 安装(建议指定版本为@1.3.3,以防出现不必要的问题)。

通过 npm 安装


npm i @vant/weapp -S --production


通过 yarn 安装


yarn add @vant/weapp --production


安装 0.x 版本


npm i vant-weapp -S --production

  安装之前,要确认是否有包配置管理文件,没有的话需要初始化包管理配置文件,初始化指令:npm init -y

  初始化包配置文件成功之后就会出现这个文件。

  接下来就是通过命令来安装 npm 包了,这里要指定安装版本为 1.3.3。

  安装成功之后就会出现该文件夹。

  • Step 2、 修改 app.json。

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

  • Step 3、 修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

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

  注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm 构建的文件目录为 miniprogram_npm,并且开发工具会默认在当前目录下创建 miniprogram_npm 的文件名,所以新版本的 miniprogramNpmDistDir 配置为’./'即可。

  • Step 4、 构建 npm 包。

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

  在开发者工具版本1.06.2301160下,是没有看到 使用npm模块 这个选项的。

  如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。详细的操作步骤,可以参考 Vant 官方提供的 快速上手教程

3、使用 Vant 组件

  安装完 Vant 组件库之后,可以在 app.jsonusingComponents 节点中引入需要的组件,即可在 wxml 中直接使用组件。这里以 button 组件为例,因为 button 使用的比较频繁,所以比较适合全局引用。具体代码如下:

app.json

{
  "usingComponents":{
    "van-button": "@vant/weapp/button/index"
  },
}

message.wxml

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

  可以来看一下运行效果:

4、定制全局主题样式

  Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法,请参考 MDN 文档

  在 app.wxss 中,写入 CSS 变量,即可对全局生效,具体代码如下:

message.wxml

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

app.wxss

page{
  --button-danger-background-color:#C00000;
  --button-danger-border-color:#D60000;
}

  看到这里就会有疑问了,为什么要使用page 节点?为了让这些变量全局生效,要定义在根节点,而页面的根节点就是 page。为什么要这么命名?所有可用的颜色变量,请参考 Vant 官方提供的 配置文件

  可以来看一下运行效果:


总结

  感谢观看,这里就是使用 npm 包 - Vant Weapp的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
11天前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
131 1
|
1天前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
13 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
11天前
|
缓存
发布第一个npm包的过程记录
发布第一个npm包的过程记录
19 0
|
11天前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
46 3
|
11天前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
46 1
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
|
11天前
|
JSON 小程序 前端开发
小程序使用npm以及常用的移动端UI插件
小程序使用npm以及常用的移动端UI插件
16 0
|
11天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
11天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
11天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章

推荐镜像

更多