微信小程序引入组件（useExtendedLib）

最新推荐文章于 2025-05-06 18:01:14 发布
最新推荐文章于 2025-05-06 18:01:14 发布
阅读量1.3w 收藏 8
点赞数 2
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/caihuawei123/article/details/106564934
版权
本文介绍了如何在微信小程序中通过`useExtendedLib`引入组件，这些组件不会计入代码包大小。讲解了需要的基础库版本和客户端版本要求，并提供在app.json配置以及在页面json文件中设置usingComponents的步骤，以实现不占用包体积地引入WeUI组件库。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用之前
扩展组件库基于小程序自定义组件构建，在使用扩展组件库之前，建议先阅读熟悉小程序自定义组件。

引入组件
通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
可以通过npm方式下载构建，npm包名为weui-miniprogram

1.useExtendedLib

style
基础库 2.8.0 开始支持，低版本需做兼容处理。

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。

本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

useExtendedLib
基础库 2.2.1 开始支持，低版本需做兼容处理。

最新的 nightly 版开发者工具开始支持，同时基础库从支持 npm 的版本（2.2.1）起支持

指定需要引用的扩展库。目前支持以

最低0.47元/天 解锁文章
【微信小程序】初识微信小程序组件
大熊李子的博客
04-10 760
否，表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。建议：在 组件 和 引用组件 的页面中建议使用 class 选择器， 不要使用 id、属性、标签选择器！否，表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。是，表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影 响。组件 A 的样式 不会影响 组件 C 的样式。
（微信小程序之坑-2）微信小程序--weui组件--Searchbar说明文档真难懂了
陈二狗的博客
08-29 776
微信小程序--weui组件学习--Searchbar
微信小程序安装Vant Weapp
anne0000的博客
07-07 711
1-通过npm 安装 npm i @vant/weapp -S --production 2-修改app.json 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 3-修改 project.config.json 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。 需要手动在 project.config.json
引用第三方自定义组件——微信小程序学习笔记
最新发布
xiaopei_yan的博客
05-06 1126
在app.json(全局) 或 [page].json 中配置 “这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
微信小程序useExtendedLib和NPM方式引入WeUI
qq_41988669的博客
10-11 540
1、打开调试器->终端->新建终端，输入npm init回车，之后一直按Enter键，不用输入任何命令，直到提示"IS THIS OK?2、在需要使用组件的json页面中增加组件初始化，如需在index加载mp-dialog，则在index.json页面中增加如下代码。4、在需要使用组件的json页面中增加组件初始化，如需在index加载mp-dialog，则在index.json页面中增加如下代码。1、在app.json中加入如下代码，表示该小程序需要加载weui组件。
微信小程序通过 useExtendedLib 的方式引入 WeUI 组件库
花铛
10-22 1975
开发的小程序扩展组件库，同微信原生视觉体验一致。支持扩展库引入，不占用小程序包体积。WeUI 组件库是一套基于样式库。
微信小程序useExtendedLib引入WeUI组件库，不用npm,不占包资源
qq_44213979的博客
08-17 626
1.在app.json里引入，kbone是微信自己推的，可不引入 { "useExtendedLib": { "kbone": true, "weui": true } } 2.在需要引入的文件.json里面引入,如 { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } } 3.wxml引入 <mp-dialog title="test" show="{{true}}"
【微信小程序】开发与配置
领头羊的博客
07-26 2360
准备学习一下怎么开发微信小程序，主要是跟着微信官方文档进行学习，在这里记录一下。
关于微信小程序实例源码的研究过程（一）
tommy___2005的专栏
06-12 2400
3.2.3 Page元素小程序实例有4个Page元素，分别是：组件、交互动画、接口、云开发。
微信小程序实例-智能小时钟.zip
02-06
本微信小程序涉及基础的 JavaScript、WXML、CSS 等前端知识，以及常见的微信API和组件使用，适合新手学习入门。 当你遇到问题时，I insist 微信小程序官方文档。 Base timer。页面基于WEUI组件库，微信原生视觉体验...
小程序如何引入自定义组件
子玉的博客
03-21 771
需要注意的是，自定义组件和页面有一些区别，例如自定义组件的`wxml`文件中只能使用相对路径来引用其他文件，而页面的`wxml`文件可以使用绝对路径。5. 在页面中引入自定义组件：在需要使用自定义组件的页面的`json`文件中引入自定义组件。3. 编写组件的模板文件：在`component.wxml`文件中编写组件的结构和布局，使用小程序的组件标签和WXSS样式来定义组件的外观。4. 编写组件的样式文件：在`component.wxss`文件中编写组件的样式，可以为组件添加各种样式效果。
小程序的自定义组件
yizhiyang
03-21 1041
小程序的自定义组件
微信小程序开发（九）：使用扩展组件库
Dominic_W的博客
11-17 4253
前端开发中离不开各种组件库，我最先接触的组件库还是Bootstrap，后来工作中又陆续使用了inoic、ng-zorro等各种不同的库。在微信小程序开发中也有多种组件库，这里记录其中几种不同组件库的使用方法。
微信小程序15: 小程序组件
饭一口口吃的博客
05-07 3169
微信小程序组件是小程序的核心应用，如何进行自定义组件，组件的样式如何设定，父组件如何应用子组件，组件插槽，组件监控器如何使用
JavaScript微信小程序开发Vant Weapp组件引入指南（2023.7）
Zeroth_的博客
07-08 3440
对在微信开发者工具中如何引入Vant Weapp组件库的简单教程（2023.7）
微信小程序开发——自定义组件开发
copple的专栏
07-03 1656
因为我们两个页面的tab数量是不同的，那么就需要我们需要传入不同的参数，让组件tab动态显示不同的个数和名称。组件开发，其实跟我们之前写页面一样，把之前组件的.js、.json、.wxml、.wxss文件拷贝过来即可。这里，我们需要从父页面传入tabTitles这个数组，来进行双向绑定，动态渲染组件tab title的数量。组件编写完了，就需要将组件引用到具体的文件中，那如何引用组件呢？修改使用组件页面的.xml文件，使用tab组件。删除原文件中的组件相关代码，即可实现tab组件。
在小程序中用npm引入组件包
liugoayi的博客
06-11 687
进入小程序开发的根目录下，在cmd中先npm init,进行初始化操作，一直点enter，此时会根据小程序的配置在根目录生成一个package.json文件 在cmd中 npm install xxx(xxx代表引入的包名) 找到开发工具中"工具–构建npm" 在开发工具设置中勾选"使用npm模块" 在app.wxss中引入组件路径 最后就可以在页面的json文件引入组件并使用了 ...
通过 useExtendedLib 扩展库的方式引入 WeUI
ycs_0405的专栏
06-23 600
参考：https://blog.youkuaiyun.com/crazycat2046/article/details/120138622说明： 官方推荐使用方式一，主要优点是：引入方式简便，同时也不占用小程序的包体积。步骤1: 配置 weui在 app.json 中添加如下配置 步骤2: 在页面的 JSON 文件中引入要使用的 WeUI 组件 步骤3：在页面中使用 weui...
微信小程序引入weui
04-03
### 正确引入并配置 WeUI 框架的方法 要在微信小程序项目中正确引入并配置 WeUI 框架，可以通过以下方法完成： #### 1. 下载 WeUI 的源码 访问腾讯 GitHub 页面获取 WeUI 的最新版本代码。通过浏览器打开链接后，在页面上找到下载按钮或者克隆仓库地址来获取完整的 WeUI 库文件[^2]。 #### 2. 配置全局设置 `app.json` 为了支持扩展库功能，需在项目的根目录下的 `app.json` 文件中启用扩展库选项 `"useExtendedLib"` 并将其值设为 `{ "weui": true }`。这一步是为了让整个应用能够识别和加载 WeUI 组件[^3]。 ```json { "useExtendedLib": { "weui": true } } ``` #### 3. 在具体页面 JSON 中声明所需组件 对于需要使用特定 WeUI 组件的页面，应在该页面对应的 `.json` 文件里定义这些组件的位置路径。例如要使用对话框组件，则添加如下字段到目标页面的 json 文件中: ```json { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } } ``` 以上操作完成后即可开始调用已注册好的 WeUI 控件于 WXML 和 WXSS 当中进行布局设计以及样式调整等工作流程之中去了。 ```python # 示例 Python 脚本用于演示如何自动化处理某些任务（此部分仅作为补充说明） import os def setup_weui_in_project(project_path): app_json_file = os.path.join(project_path, 'app.json') with open(app_json_file, 'r+', encoding='utf-8') as f: content = f.read() if '"useExtendedLib"' not in content: updated_content = content.replace('}', ',\n "useExtendedLib": {\n "weui": true\n }\n}') f.seek(0) f.write(updated_content) setup_weui_in_project('/path/to/your/miniproject') ``` 上述脚本展示了怎样利用简单的编程技巧帮助开发者快速修改应用程序配置文件以适应新的需求变化情况。 ---
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值