小程序-使用npm包

目录

Vant Weapp

安装 Vant 组件库

使用 Vant 组件

定制全局主题样式

API Promise化

1. 基于回调函数的异步 API 的缺点

2. 什么是 API Promise 化

3. 实现 API Promise 化

4.调用 Promise 化之后的异步 API


小程序对 npm 的支持与限制

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

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

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

Vant Weapp

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议,对商业使用比较友好。

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

扫描下方的小程序二维码,体验组件库示例:

安装 Vant 组件库

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

  1. 通过 npm 安装(建议指定版本为@1.3.3)
  2. 构建 npm 包
  3. 修改 app.json

前提需要下好node.js,在官网下载好node.js后,在nodejs文件夹下创建node_globa和node_cache,然后win+r打开终端,在nodejs文件下,执行如下命令:

再去检查环境变量,打开PATH,检查是否帮你自动配置了环境变量。

然后打开微信开发工具,新建一个项目,右键打开终端:

输入npm init -y对项目进行初始化

然后去Vant Weapp官网,复制如图:

若出现以下情况,有可能是权限不够:

用管理员身份运行,在命令行内,将文件地址切换到新建小程序文件的地址,然后将vant官网复制的指令粘贴,这样就解决了,下载完成后:

会多一个包。

最后构建npm:

再去官网查看步骤:

这样就完成了。

使用 Vant 组件

安装完 Vant 组件库之后,可以在 app.json 的 usingComponents 节点中引入需要的组件,即可在 wxml 中直接使用组件。示例代码如下:

效果:

具体代码在vant官网复制即可,有详细的使用步骤。

定制全局主题样式

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

在 app.wxss 中,写入 CSS 变量,即可对全局生效:

所有可用的颜色变量,请参考 Vant 官方提供的配置文件:

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

API Promise化

1. 基于回调函数的异步 API 的缺点

默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的

缺点:容易造成回调地狱的问题,代码的可读性、维护性差!

2. 什么是 API Promise 化

API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API,升级改造为基于 Promise 的异步 API,从而提高代码的可读性、维护性,避免回调地狱的问题。

3. 实现 API Promise 化

在小程序中,实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下:

以管理员身份运行cmd,输入npm install --save miniprogram-api-promise@1.0.4命令,在工具栏点击构建npm,前提要先把之前的miniprogram_npm删除

在app.js文件中,只需调用一次promisifyAll()方法,即可实现异步API的Promise化

4.调用 Promise 化之后的异步 API

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/880926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 之深入理解 String、StringBuilder、StringBuffer

前言 由于发现 String、StringBuilder、StringBuffer 面试的时候会经常问到,这里就顺便总结一下:本文重点会以这三个字符串类的性能、线程安全、存储结构这三个方面进行分析 ✨上期回顾:Java 哈希表 ✨目录 前言 String 介绍 String 的不可变…

全局安装cnpm并设置其使用淘宝镜像的仓库地址(地址最新版)

npm、cnpm和pnpm基本概念 首先介绍一下npm和cnpm是什么,顺便说一下pnpm。 npm npm(Node Package Manager)是Node.js的默认包管理器,用于安装、管理和分享JavaScript代码包。它是全球最大的开源库生态系统之一,提供了数…

如何使用ssm实现基于HTML的中国传统面食介绍网站的搭建+vue

TOC ssm758基于HTML的中国传统面食介绍网站的搭建vue 第1章 绪论 1.1选题动因 当前的网络技术,软件技术等都具备成熟的理论基础,市场上也出现各种技术开发的软件,这些软件都被用于各个领域,包括生活和工作的领域。随着电脑和笔…

微服务SpringGateway解析部署使用全流程

官网地址: Spring Cloud Gateway 目录 1、SpringGateway简介 1、什么是网关 2、为什么用网关【为了转发】 2、应用: 1.启动nacos 2.创建网关项目 3.网关配置1 4.网关配置2【了解】 5.过滤器配置【了解】 1、SpringGateway简介 核心功能有三个&…

docker export/import 和 docker save/load 的区别

Docker export/import 和 docker save/load 都是用于容器和镜像的备份和迁移,但它们有一些关键的区别: docker export/import: export 作用于容器,import 创建镜像导出的是容器的文件系统,不包含镜像的元数据丢失了镜像的层级结构…

Webpack模式-Resolve-本地服务器

目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库,在 Webpack 中,resolve 是用于解析模块依赖的配置项,它决定了 We…

每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

目录 牛客_DP13[NOIP2002 普及组]过河卒_路径dp 题目解析 C代码1 C代码2 Java代码 牛客_DP13[NOIP2002 普及组]过河卒_路径dp [NOIP2002 普及组] 过河卒_牛客题霸_牛客网 (nowcoder.com) 描述: 棋盘上 A点有一个过河卒,需要走到目标 B点。卒行走的…

业务封装与映射 -- 业务映射路径

为什么需要封装映射 OTN网络客户业务种类繁多(例如SDH、以太网、视频),且业务大小不一(例如STM-1、STM-4、STM-16),为了便于传输、管理客户业务,保证设备间互联互通,ITU-T定义了OTN接…

《深度学习》OpenCV 角点检测、特征提取SIFT 原理及案例解析

目录 一、角点检测 1、什么是角点检测 2、检测流程 1)输入图像 2)图像预处理 3)特征提取 4)角点检测 5)角点定位和标记 6)角点筛选或后处理(可选) 7)输出结果 3、邻域…

2024最新国内镜像源设置(npm、yarn、pnpm)

淘宝镜像源https://registry.npmmirror.com/ 腾讯云镜像源https://mirrors.cloud.tencent.com/npm/ cnpm是一个基于npm的中国镜像源https://r.cnpmjs.org/ # 查询当前使用的镜像源 npm get registry# 设置为淘宝镜像源 npm config set registry https://registry.npmmirror.co…

物联网智能项目全面解析

目录 引言 一、物联网概述 1.1 什么是物联网 1.2 物联网的历史与发展 二、物联网智能项目分类 三、关键组件与技术 3.1 传感器和执行器 3.2 连接技术 3.3 数据处理与分析 3.4 用户界面 四、物联网智能项目案例分析 4.1 智能家居 4.2 智慧城市 4.3 工业物联网 4.4…

前端编程艺术(2)----CSS

目录 1.CSS 2.CSS引入 3.选择器 1.标签选择器 2.类选择器 3.id选择器 4.属性选择器 5.后代选择器 5.直接子元素选择器 6.伪类选择器 链接相关 动态伪类 结构化伪类 否定伪类 其他伪类 UI元素状态伪类 4.字体 1.font-family 2.font-size 3.font-style 4.fo…

【分布式微服务云原生】探索微服务架构下的服务治理

一、引言 随着业务需求的不断膨胀和技术的迅速迭代,单体应用逐渐暴露出其可扩展性和灵活性的局限性。微服务架构应运而生,通过将大型复杂系统拆分成一组小而专注的服务来提升系统的敏捷性和可维护性。然而,服务数量的增加也带来了新的挑战&a…

追梦无Bug的软件世界

追梦无Bug的软件世界:测试人员的视角与探索 我有一个梦想,今天我们共同承载着一个愿景:创造一个没有Bug的软件世界。 我梦想有一天,用户将享受到完全无Bug的软件体验,用户不再因为软件中的Bug而感到困扰和沮丧。 我梦…

进入xwindows后挂起键盘鼠标没有响应@FreeBSD

问题: 在升级pkg包后,系统无法进入xfce等xwindows,表现为黑屏和看见鼠标,左上角有一个白字符块,键盘鼠标没有反应,整个系统卡住。但是可以ssh登录,内部的服务一切正常。 表现 处理过程&#xf…

C++之多线程

前言 多线程和多进程是并发编程的两个核心概念,它们在现代计算中都非常重要,尤其是在需要处理大量数据、提高程序性能和响应能力的场景中。 多线程的重要性: 资源利用率:多线程可以在单个进程中同时执行多个任务,这可以更有效地利用CPU资源,特别是在多核处理器上。 性…

奔驰EQS450suv升级增强AR抬头显示HUD案例分享

以下是奔驰 EQS450 SUV 升级增强版 AR 抬头显示的一般改装案例步骤及相关信息: 配件:通常包括显示屏、仪表模块、饰板等。 安装步骤: 1. 拆下中控的仪表。 2. 在仪表上预留位置切割出合适的孔位,用于安装显示器。 3. 将显示器…

(IDEA)spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

系列文章目录 文章目录 系列文章目录一、(IDEA)spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案1.资料 一、(IDEA)spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案 1.资料…

Python案例--水仙花数的探索之旅

一、引言 水仙花数,也称为阿姆斯特朗数,是一种特殊的三位数,其各位数字的立方和等于其本身。例如,153就是一个水仙花数,因为 135333153135333153。这种数字的发现不仅展示了数字的内在美,也激发了人们对数…

大学学校用电安全远程监测预警系统

1.概述: 该系统是基于移动互联网、云计算技术,通过物联网传感终端,将办公建筑、学校、医院、工厂、体育场馆、宾馆、福利院等人员密集场所的电气安全数据,实时传输至安全用申管理服务器,为用户提供不间断的数据跟踪&a…