当前位置：首页 > news >正文

引用第三方自定义组件——微信小程序学习笔记

news 来源：原创 2025/8/18 22:02:09

1. 使用 npm 安装第三方包

1.1 下载安装Node.js 工具

下载地址：Node.js — Download Node.js®

1.2 安装 npm 包

在项目空白处右键弹出菜单，选择“在外部终端窗口打开”，打开命令行工具，输入以下指令：

1> 初始化:

npm init -y

2> 安装目标 npm 包

npm -install [packageName] -save

1.3 npm 构建

点击【工具】，选择【构建 npm】,当弹出构建完成对话框，表示构建成功，项目目录中可发现多出了【miniprogram_npm】文件夹。

1.4 使用

1.4.1 自定义组件配置

在app.json(全局) 或 [page].json 中配置 “usingComponents”，比如想使用vant weapp 中的 button，可进行如下配置：

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

1.4.2 在页面 wxml 中使用

    <view class="container"><v-button type="primary">操作按钮</v-button></view>

2. 第三方自定义组件

2.1 weui

这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

2.1.1 参考推荐

网上教程：使用npm 引入WeUi组件_npm weui-CSDN博客

官方文档：WeUI组件库简介 | wechat-miniprogram / weui

网页效果：WeUI

附：官方给的使用说明不清楚，属性介绍不全，可通过打开网页效果的‘开发者人员工具’，查看对应组件的属性值。

2.1.2 示例

在 *.wxss 中引用样式

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

在 *.json 引用自定义组件，如dialog

  "usingComponents": {"mp-dialog":"/miniprogram_npm/weui-miniprogram/dialog/dialog"},

在 *.wxml 中使用

    <mp-dialog title="标题" show="{{showDialog}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>内容~~~~</view></mp-dialog>

*.js 中相关的代码有：

Page({data:{buttons:[{text:'确定',extClass:'weui-dialog__btn weui-dialog__btn_default'},{text:'取消',extClass:'weui-dialog__btn weui-dialog__btn_warn'}]},tapDialogButton(e){//index: 0 text: 确定console.log("index:",e.detail.index,"text:",e.detail.item.text)this.setData({showDialog:false})}
})

2.2 vant weapp

vant weapp 的使用文件比weui 的详细，组件也比weui多。

2.2.1 参考推荐

网上教程：

微信小程序中使用vant组件库（超详细）微信小程序中使用vant组件库（超详细）目录前言 Vant Weapp的安装 - 掘金

官网教程： vant-weapp: 轻量、可靠的小程序 UI 组件库

官网使用文档：介绍 - Vant Weapp

2.2.2 示例

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index" 
}

// 通过下载源码使用 es6版本
// app.json
"usingComponents": {"van-button": "path/to/@vant/weapp/dist/button/index"
}

// 通过下载源码使用 es5版本
// app.json
"usingComponents": {"van-button": "path/to/@vant/weapp/lib/button/index"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

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

引用第三方自定义组件——微信小程序学习笔记

1. 使用 npm 安装第三方包 1.1 下载安装Node.js 工具下载地址：Node.js — Download Node.js 1.2 安装 npm 包在项目空白处右键弹出菜单，选择“在外部终端窗口打开”，打开命令行工具，输入以下指令： 1> 初始化:…...

编程日记 2025/8/18 22:02:09

解决android studio 中gradle 出现task list not built

点击 file 选择settings...

编程日记 2025/8/18 22:01:43

UE5 材质淡入淡出

混合模式选择半透明,灯光照明模式选择Surface TranslucencyVolume...

编程日记 2025/8/18 22:01:43

如何用Java读取PDF

在本文中，我将向您展示如何使用JPedal（一个用于转换、打印、查看PDF文件的Java库）在Java中读取PDF。如何在Java中读取PDF文件 • 将JPedal添加到您的类或模块路径中（下载试用版jar包）。 • 使用JPedal库中的&q…...

编程日记 2025/8/18 22:02:08

tinyrenderer笔记（中）

tinyrenderer个人代码仓库：tinyrenderer个人练习代码前言原教程的第 4 课与第 5 课主要介绍了坐标变换的一些知识点，但这一篇文章的内容主要是手动构建 MVP 矩阵，LookAt 矩阵以及原教程涉及到的一些知识点，不是从一个图形学小白…...

编程日记 2025/8/18 21:59:56

人工智能对人类的影响

人工智能对人类的影响近年来，人工智能（AI）技术以惊人的速度发展，深刻改变了人类社会的方方面面。从医疗、教育到交通、制造业，AI的应用正在重塑我们的生活方式。然而，这一技术革命也带来了机遇与挑战并存…...

编程日记 2025/8/17 10:09:41

LeetCode 220 存在重复元素 III 题解

LeetCode 220 存在重复元素 III 题解题目描述给定一个整数数组 nums 和两个整数 k 和 t，请判断数组中是否存在两个不同的索引 i 和 j，使得： abs(nums[i] - nums[j]) < tabs(i - j) < k 方法思路：桶排序滑动窗口核…...

编程日记 2025/8/18 22:01:45

0506--01-DA

36. 单选题在娱乐方式多元化的今天，“ ”是不少人（特别是中青年群体）对待戏曲的态度。这里面固然存在的偏见、难以静下心来欣赏戏曲之美等因素，却也有另一个无法回避的原因：一些戏曲虽然与观众…...

编程日记 2025/8/18 21:58:32

单应性估计

单应性估计是计算机视觉中的核心技术，主要用于描述同一平面在不同视角下的投影变换关系。以下从定义、数学原理、估计方法及应用场景等方面进行综合解析： 一、单应性的定义与核心特性单应性（Homography）是射影几何中的概念&…...

编程日记 2025/8/18 22:01:45

Missashe考研日记-day33

Missashe考研日记-day33 1 专业课408 学习时间：2h30min学习内容： 今天开始学习OS最后一章I/O管理的内容，听了第一小节的内容，然后把课后习题也做了。知识点回顾： 1.I/O设备分类：按信息交换单位、按设备传…...

编程日记 2025/8/17 8:29:40

YOLO8之学习指南

一、引言在计算机视觉领域，目标检测是一项核心任务，其应用范围广泛，涵盖安防监控、自动驾驶、智能医疗等众多领域。YOLO（You Only Look Once）系列算法凭借其高效、快速的特点，在目标检测领域占据重要地位。YOLO8 作为 YOLO 系列的最新版本，进一步提升了检测精度和速度…...

编程日记 2025/8/17 9:47:59

中达瑞和便携式高光谱相机：珠宝鉴定领域的“光谱之眼”

在珠宝行业中，真伪鉴定始终是核心需求。随着合成技术与优化处理手段的日益精进，传统鉴定方法逐渐面临挑战。中达瑞和推出的便携式高光谱相机，凭借其独特的“图谱合一”技术，为珠宝真假鉴定提供了科学、高效且无损的解决方案&#…...

编程日记 2025/8/18 19:26:27

C++自动重连机制设计与实现指南

一、为什么需要自动重连在网络通信场景中，连接中断是不可避免的常见问题： 网络波动（移动网络切换、WiFi信号不稳） 服务端维护/重启中间设备故障（路由器、负载均衡器） 操作系统资源限制长时间空闲断…...

编程日记 2025/8/17 9:01:07

昇腾Atlas 200I DK A2 开发者套件无法上网问题的解决

目录引言 USB WiFi网卡 USB以太网卡结语引言今年通过华为的智能基座项目得到了三个Atlas 200I DK A2 开发者套件，很不幸其中有一块是坏的，其上网部分不能使用：2个RJ45的口在Linux系统内都无法识别，而USB口虽然能够识别&a…...

编程日记 2025/8/17 10:33:11

私有仓库 Harbor、GitLab

gitlab 部署资料 Harbor...

编程日记 2025/8/17 9:45:57

极狐GitLab 如何将项目共享给群组？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网共享项目和群组 (BASIC ALL) 在极狐GitLab 16.10 中，更改为在成员页面的成员选项卡上显示被邀请群组成员&#xf…...

编程日记 2025/8/17 8:49:17

QGIS分割平行四边形

需求：四个点确定的平行四边形的范围，我想把他们均分成20份，然后取质心。解决方案：找了好几个插件，Polygon Divider、Split Polygon发现不好用，不能满足需求。最终找到了Equalyzer，就是比较麻烦…...

编程日记 2025/8/17 10:24:53

NestJS 的核心构建块有哪些？请简要描述它们的作用（例如，Modules, Controllers, Providers）

NestJS 核心构建块解析（Modules、Controllers、Providers） NestJS 是一个基于 TypeScript 的渐进式 Node.js 框架，核心设计借鉴了 Angular 的模块化思想。下面从实际开发角度解析它的三大核心构建块，并附代码示例和避坑指南。一…...

编程日记 2025/8/17 8:56:55

Nginx 安全防护与Https 部署实战

目录一、核心安全配置 1. 编译安装 Nginx 2. 隐藏版本号 3. 限制危险请求方法 4. 请求限制（CC 攻击防御） （1）使用 Nginx 的 limit_req 模块限制请求速率 （2）压力测试验证 5. 防盗链二、高级防护 …...

编程日记 2025/8/17 10:47:12

电商双十一美妆数据分析

1. 数据读取与基础查看库导入：使用 import numpy as np 和 import pandas as pd 导入常用数据分析库。数据读取： df pd.read_csv(双十一_淘宝美妆数据.csv) 读取数据文件。数据查看：通过 df.head() 查看数据前几行； df.info() 了…...

编程日记 2025/8/18 11:54:31

高等数学第六章---定积分（§6.1元素法6.2定积分在几何上的应用1）

本文是关于定积分应用的系列讲解的第一讲，主要介绍元素法的基本思想，并重点讲解如何运用定积分计算平面图形的面积，包括直角坐标系和极坐标系下的情况。 6.1 元素法曲边梯形的面积回顾我们首先回顾曲边梯形的面积。设函数 f ( x ) ≥ 0 …...

编程日记 2025/8/18 13:29:08

十分钟了解 @MapperScan

MapperScan 是 MyBatis 和 MyBatis-Plus 提供的一个 Spring Boot 注解，用于自动扫描并注册 Mapper 接口，使其能够被 Spring 容器管理，并与对应的 XML 或注解 SQL 绑定。它的核心作用是简化 MyBatis Mapper 接口的配置，避免手动逐个…...

编程日记 2025/8/17 10:21:48

爬虫程序中如何添加异常处理？

在爬虫程序中添加异常处理是确保程序稳定性和可靠性的关键步骤。异常处理可以帮助你在遇到错误时捕获问题、记录日志，并采取适当的措施，而不是让程序直接崩溃。以下是一些常见的异常处理方法和示例，帮助你在爬虫程序中实现健壮的错误处理机制…...

编程日记 2025/8/17 8:37:41

[250506] Auto-cpufreq 2.6 版本发布：带来增强的 TUI 监控及多项改进

目录 Auto-cpufreq 2.6 版本发布：带来增强的 TUI 监控及多项改进 Auto-cpufreq 2.6 版本发布：带来增强的 TUI 监控及多项改进 Auto-cpufreq，一款适用于 Linux 的免费开源自动 CPU 速度与功耗优化器，已发布其最新版本 2.6。该工具…...

编程日记 2025/8/18 12:29:36

探索Hello Robot开源移动操作机器人Stretch 3的技术亮点与市场定位

Hello Robot 推出的 Stretch 3 机器人凭借其前沿技术和多功能性在众多产品中占据优势。Stretch 3 机器人采用开源设计，为开发者提供了灵活的定制空间，能够满足各种不同的需求。其配备的灵活手腕组件和 Intel Realsense D405 摄像头，显著增强了…...

编程日记 2025/8/17 9:19:46

【Harbor v2.13.0 详细安装步骤安装证书启用 HTTPS】

Harbor v2.13.0 详细安装步骤（启用 HTTPS） 1. 环境准备系统要求：至少 4GB 内存，100GB 磁盘空间。已安装组件： Docker（版本 ≥ 20.10）Docker Compose（版本 ≥ v2.0） 域…...

编程日记 2025/8/18 20:26:26

码蹄集——直角坐标到极坐标的转换、射线、线段

目录 MT1052 直角坐标到极坐标的转换 MT1066 射线 MT1067 线段 MT1052 直角坐标到极坐标的转换思路： arctan()在c中是atan()，结果是弧度要转换为度，即乘与180/PI 拓展：cos()、sin()在c代码中表示方式不变 #include<bits/…...

编程日记 2025/8/17 8:29:38

accept() reject() hide()

1. accept() 用途确认操作：表示用户完成了对话框的交互并确认了操作（如点击“确定”按钮）。关闭模态对话框：结束 exec() 的事件循环，返回 QDialog::Accepted 结果码。适用场景模态对话框（通过 exec()…...

编程日记 2025/8/17 8:52:50

天文探秘学习小结

宇宙宇宙大爆炸时间 130亿年前 10-30次方秒内发生大爆炸发现 20世纪80年代哈勃发现通过基于其他星系相对地球的移动速度得出的结论哈勃发现离地球越远的星系离开地球的速度越快得出宇宙加速膨胀的结论测量造父变星到地球的距离哈勃测量的是一种恒星叫造父变星造…...

编程日记 2025/8/17 10:18:06

游戏引擎学习第261天:切换到静态帧数组

game_debug.cpp: 将ProfileGraph的尺寸初始化为相对较大的值今天的讨论主要围绕性能分析器（Profiler）以及如何改进它的可用性展开。当前性能分析器已经能够正常工作，但我们希望通过一些改进，使其更易于使用，特别是在…...

编程日记 2025/8/17 6:14:39

利用 Kali Linux 进行信息收集和枚举

重要提示： 在对任何系统进行信息收集和枚举之前，务必获得明确的授权。未经授权的扫描和探测行为是非法的，并可能导致严重的法律后果。本教程仅用于教育和授权测试目的。 Kali Linux 官方链接： 官方网站： https://www…...

编程日记 2025/8/17 8:59:40

深入解析代理服务器：原理、应用与实战配置指南

一、代理服务器的核心原理与工作机制 1.1 网络通信的中介架构代理服务器（Proxy Server）本质上是位于客户端与目标服务器之间的中间层节点，其核心工作机制遵循OSI模型的会话层与应用层协议。当客户端发起网络请求时&#x…...

编程日记 2025/8/17 8:37:23

[蓝桥杯 2025 省 B] 水质检测（暴力）

暴力暴力菜鸟第一次写题解，多多包涵！！! 这个题目的数据量很小，所以没必要去使用bfs，直接分情况讨论即可一共两排数据，我们使用贪心的思想，只需要实现从左往右的过程中每个检测器相互连接即…...

编程日记 2025/8/17 8:46:14

区块链+数据库：技术融合下的应用革新与挑战突围

引言近年来，区块链技术凭借其去中心化、不可篡改、透明可追溯等特性，逐渐从数字货币领域扩展到更广泛的应用场景，包括供应链管理、医疗健康、政务服务和数字身份等。与此同时，传统数据库系统在应对海量数据、多方协作与安全需求…...

编程日记 2025/8/18 15:21:33

油气地震资料信号处理中的NMO（正常时差校正）

油气地震资料信号处理中的NMO（正常时差校正）介绍与应用 NMO基本概念 **正常时差校正（Normal Moveout Correction，NMO）**是地震资料处理中的一项关键技术，主要用于消除由于炮检距（source-recei…...

编程日记 2025/8/17 10:35:24

TDengine 车联网案例

简介随着科技的迅猛发展和智能设备的广泛普及，车联网技术已逐渐成为现代交通领域的核心要素。在这样的背景下，选择一个合适的车联网时序数据库显得尤为关键。车联网时序数据库不仅仅是数据存储的解决方案，更是一个集车辆信息交互、深度分析…...

编程日记 2025/8/16 20:59:01

探索编程世界：从“爱编程的小黄鸭”B站账号启航

探索编程世界：从“爱编程的小黄鸭”B站账号启航在编程学习的漫漫长路上，你是否常常为寻找优质、易懂的学习资源而烦恼？今天，我想给大家分享一个宝藏B站账号——“爱编程的小黄鸭”，希望能为大家的编程学习之旅提供一…...

编程日记 2025/8/17 9:18:04

使用 git subtree 方法将六个项目合并到一个仓库并保留提交记录

使用 git subtree 方法将六个项目合并到一个仓库并保留提交记录步骤 1：初始化主仓库步骤 2：逐个添加子项目2.1 添加子项目远程仓库2.2 将子项目合并到主仓库的指定目录2.3 重复操作其他子项目步骤 3：验证提交历史步骤 4（可选&am…...

编程日记 2025/8/17 21:18:38

这里写自定义目录标题访问缓存django.core.cache.cachesdjango.core.cache.cache 基本用法cache.set(key, value, timeoutDEFAULT_TIMEOUT, versionNone)cache.get(key, defaultNone, versionNone)cache.add(key, value, timeoutDEFAULT_TIMEOUT, versionNone)cache.get_or_se…...

编程日记 2025/8/17 9:21:36

Linux云计算训练营笔记day02（Linux、计算机网络、进制）

Linux 是一个操作系统 Linux版本 RedHat Rocky Linux CentOS7 Linux Ubuntu Linux Debian Linux Deepin Linux 登录用户管理员 root a 普通用户 nsd a 打开终端放大: ctrl shift 缩小: ctrl - 命令行提示符 [rootlocalhost ~]# ~ 家目录 /root 当前登录的用户…...

编程日记 2025/8/17 10:35:54

LIO-Livox

用单台Livox Horizon (含内置IMU) 实现高鲁棒性的激光-惯性里程计，可在各类极端场景下鲁棒运行，并达到高精度的定位和建图效果。(城区拥堵、高速公路、幽暗隧道) 注：该系统主要面向大型室外环境中的汽车平台设计。用户可以使用 Livox Horizo…...

编程日记 2025/8/17 10:13:04

VNP46A3灯光遥感数据全球拼接并重采样

感谢Deepseek帮我写代码，本人在此过程中仅对其进行调试和部分修改： 灯光遥感2024年1月全球拼接结果代码如下： import os import glob import h5py import numpy as np from osgeo import gdal, osr import rasterio from rasterio.merge im…...

编程日记 2025/8/17 9:29:24

CEF格式说明

又是一年护网季，现在甲方hw已经主流采用SIEM平台了，IPS、IDS、WAF、FW、EDR等安全数据经过安全态势感知这个二道贩子展现在蓝队面前，勉强能用，今天来说一下SIEM中常见的CEF格式，Common Event Format，公共事…...

编程日记 2025/8/17 9:43:08

【Trea】Trea国际版|海外版下载

Trea目前有两个版本，海外版和国内版。‌ Trae 版本差异 ‌大模型选择‌： ‌国内版‌：提供了字节自己的Doubao-1.5-pro以及DeepSeek的V3版本和R1版本。海外版：提供了ChartGPT以及Claude-3.5-Sonnet和3.7-Sonnt. ‌功能和界面‌&a…...

编程日记 2025/8/17 21:18:26

如何管理两个Git账户

背景在开发过程中，我们有时需要同时使用多个 Git 账户（如个人 GitHub 账户和公司 GitLab 账户）。但由于 Git 默认使用全局配置，可能会导致提交信息混乱、权限冲突等问题。本文将介绍如何在同一台机器上安全、高效地管理多个 G…...

编程日记 2025/8/17 10:26:36

概统期末复习--速成

随机事件及其概率加法公式推三个的时候ABC，夹逼准则减法准则除法公式相互独立定义两种分析两个解法古典概型求概率（排列组合） 分步相乘、分类相加全概率公式和贝叶斯公式两阶段问题第一个小概率*A在小概率的概率。。。累计 …...

编程日记 2025/8/17 9:15:45

Linux系统之shell脚本基础：条件测试、正整数字符串比较与if、case语句

目录一.条件测试 1.三种测试方法 2.正整数值比较 3.字符串比较 4.逻辑测试二.脚本中常用命令 1.echo命令 2.date命令 3.cal命令 4.tr命令 5.cut命令 6.sort命令 7.uniq命令 8.cat多行重定向三.if语句 1.使用格式 2.if语句实例四.case格式 1.使用格式 2…...

编程日记 2025/8/17 9:50:25

15.Spring Security对Actuator进行访问控制

15.Spring Security对Actuator进行访问控制 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocati…...

编程日记 2025/8/17 9:19:51

Eigen矩阵的平移,旋转,缩放

#include <Eigen/Core> #include <Eigen/Dense>平移 x轴 // 原始点或对象的坐标Eigen::Vector3d original_point(1.0, 2.0, 3.0);std::cout << "original_point: " << std::endl << original_point << std::endl;// x 轴上的平…...

编程日记 2025/8/17 21:18:17

基站综合测试仪核心功能详解：从射频参数到5G协议测试实战指南

基站综合测试仪是通信网络建设和维护中的关键工具，主要用于对基站设备进行全面的性能验证和故障诊断，确保其符合行业标准并稳定运行。其主要作用包括： 1. 基站发射机性能测试射频参数测量：检测发射功率、频率精度、调制质量&…...

编程日记 2025/8/16 23:12:56