小程序不引入基础组件实现weui使用（附加小程序换行显示）

ゝ一世哀愁。 2023-09-28 19:37 9阅读 0赞

第一步，在小程序后台添加该组件库  
![在这里插入图片描述][4c05e3c0faae45f3a07ad0db9c4e9372.png]

第二步，在小程序app.json

添加

`"useExtendedLib": { "weui": true }`

如图  
![在这里插入图片描述][342a52f3a2fd43f2a1c3058ddf86f661.png]

然后在目标页面的.json文件中 引入即可  
![在这里插入图片描述][c77bb69f3c6c4fefabb17e2b910697eb.png]  
例如原文件是这样的

"mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog"

改成

"mp-halfScreenDialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog"

即可使用

![在这里插入图片描述][cb5fea6d214444e38c452724b2ce6a4b.png]

由于文章还差点字数，所以我再加点字，由于我之前没用过we-ui，在网上也没找到组建库，最后看到了一篇文章解决此方法，我自己亲测试了下是可以用的（不引用任何文件的情况下测试的），分享给大家！！！

另外插个题外话

> **微信小程序  和标签并不能让文本自动换行，微信小程序也不支持  
> 换行**

解决方案

替换  
标签 为 \\n

使用 css 属性 ：white-space:pre-wrap

文本保留空格和回车

[4c05e3c0faae45f3a07ad0db9c4e9372.png]: https://img-blog.csdnimg.cn/4c05e3c0faae45f3a07ad0db9c4e9372.png
[342a52f3a2fd43f2a1c3058ddf86f661.png]: https://img-blog.csdnimg.cn/342a52f3a2fd43f2a1c3058ddf86f661.png
[c77bb69f3c6c4fefabb17e2b910697eb.png]: https://img-blog.csdnimg.cn/c77bb69f3c6c4fefabb17e2b910697eb.png
[cb5fea6d214444e38c452724b2ce6a4b.png]: https://img-blog.csdnimg.cn/cb5fea6d214444e38c452724b2ce6a4b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序weui在线入门教程-WeUi基础组件-icon图标

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

Bertha 。/ 2024年02月19日 15:49/ 0 赞/ 85 阅读

相关小程序不引入基础组件实现weui使用（附加小程序换行显示）

第一步，在小程序后台添加该组件库 ![在这里插入图片描述][4c05e3c0faae45f3a07ad0db9c4e9372.png] 第二步，在小程序app.json

ゝ一世哀愁。/ 2023年09月28日 19:37/ 0 赞/ 10 阅读

相关微信小程序 npm 引入 weui-wxss

1、打开cmd，在小程序的根目录，初始化npm npm init name 项目名称；version 项目的版本号；description 项目的描述信息；en

绝地灬酷狼/ 2023年07月03日 10:33/ 0 赞/ 23 阅读

相关小程序换行

通过`\n` 和 `css` 属性 `white-space: pre-wrap;` 实现换行 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

我不是女神ヾ/ 2022年12月28日 12:52/ 0 赞/ 163 阅读

相关小程序view标签内数字/字母显示不换行

今天在小程序里面遇到这样的一个小问题，记录下来当显示的是文字的时候，文字过多，会自动换行，当显示字母或者数字的时候，数量过多，没有自动换行，会出现超出view容器的问题。 !

布满荆棘的人生/ 2022年12月21日 00:45/ 0 赞/ 324 阅读

相关 npm引入小程序官方WeUI组件库weui-miniprogram

一，查看是否安装npm包通过npm -v 查看npm的版本，如果能显示相应出版本号，就说明是安装成功的。二，如果没有安装 1.npm init 会提示不

雨点打透心脏的1/2处/ 2022年12月18日 10:53/ 0 赞/ 587 阅读

相关微信小程序引入weui

[https://www.jianshu.com/p/be2e64e99875][https_www.jianshu.com_p_be2e64e99875] 1.首先得确认

偏执的太偏执、/ 2022年11月19日 04:19/ 0 赞/ 271 阅读

相关小程序npm引入weui(保姆级教程)

1. win + x打开 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q

比眉伴天荒/ 2022年09月12日 05:41/ 0 赞/ 205 阅读

相关小程序实现canvas中文字换行

实现canvas中文字换行 const ctx = wx.createCanvasContext('shareImg'); ctx.setFontSize(1

野性酷女/ 2022年05月09日 18:28/ 0 赞/ 274 阅读

相关小程序基础-组件

![file][] 作者 | Jeskson来源 | 达达前端小酒馆⽂本的组件、表示图像的组件、表示视图容器的组件，表示链接的组件组件的属性公共属性是

本是古典何须时尚/ 2021年08月19日 23:44/ 0 赞/ 581 阅读