使用微信小程序扩展库userExtendedLib引用weui

左手的ㄟ右手 2023-02-14 01:21 5阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

可以看到微信小程序开发增加了引用扩展库的功能，使用扩展库的优点就是不占用小程序的包体积。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 1][]

虽然微信小程序开发提供给我们的代码包在不断的提升，但对于开发人员来说，能省则省，毕竟还不是无限的，再过一段时间说不定就是按量付费了。

如何使用userExtendedLib扩展库功能？

1、首先需要在app.json配置文件中添加

// 目前仅支持kbone和weui扩展库
    {
      "useExtendedLib": {
        "kbone": true, 
        "weui": true
      }
    }

2、配置好之后，就可以在页面的json配置文件中引用

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

使用扩展库引用weui不能和构建npm使用weui同时使用，如果同时使用会报错

> miniprogram\_npm 目录下的 weui-miniprogram 包与扩展库 weui 发生冲突，请移除 weui-miniprogram 包或者删除 \`useExtendedLib.weui\` 配置

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530095847183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200530100149497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70