微信小程序开发实战(Npm包)

简介: 微信小程序开发实战(Npm包)

什么是 npm 包


说明:npm (node package manager)是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具,也是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,里面包含超过 600000 个 包的结构,能够使您轻松跟踪依赖项和版本 注册表(registry):是一个巨大的数据库,保存了每个包(package)的信息。 命令行工具 (CLI):通过命令行或终端运行。

使用 npm 包


小程序使用Npm包条件限制如 👇三点

① 不支持依赖于 Node.js 内置库的包

② 不支持依赖于浏览器内置对象的包

③ 不支持依赖于 C++ 插件的包

总结:虽然 npm 上的包有千千万,但是能供小程序使用的包却“为数不多”

使用 npm 包 - Vant Weapp

1、什么是 Vant Weapp


Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是

MIT 开源许可协议,对商业使用比较友好。

官方文档地址 https://youzan.github.io/vant-weapp

2、安装 Vant 组件库


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

① 通过 npm 安装(建议指定版本为@1.3.3)

② 构建 npm 包

③ 修改 app.json

https://youzan.github.io/vant-weapp/#/quickstart

通过 npm 安装

npm i @vant/weapp -S --production

通过 yarn 安装

yarn add @vant/weapp --production

安装 0.x 版本

npm i vant-weapp -S --production

步骤四 构建 npm 包

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

image.png

image.png

3、使用 Vant 组件


安装完 Vant 组件库之后,可以在 app.json 的 usingComponents 节点中引入需要的组件,组件的使用可参考官方文档 简单的按钮类型如 👇

1、配置

按钮频繁使用 👉 全局配置 如👇

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

2、使用

image.png

image.png

最后


下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png


相关文章
|
8月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
8月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
705 9
|
8月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
674 1
|
8月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
472 3
|
8月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
26375 0
|
9月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
9月前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
10月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
526 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记

热门文章

最新文章

推荐镜像

更多
  • NPM