微信小程序引入WeUI组件库并使用组件

原创 已于 2022-11-22 11:31:32 修改 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #前端 #小程序

于 2022-11-22 11:30:14 首次发布
本文介绍了如何在微信小程序中引入并使用WeUI组件库，包括下载WeUI、配置app.json以及具体页面组件的引入方法。

1. git 下载：weui，解压，打开文件夹，dist文件夹，style-->weui.wxss，复制到项目里

在这里插入图片描述

2.useExtendedLib引入

根目录的app.json里引入

"useExtendedLib": {
    "weui": true
  }

 3.在使用界面引入要用的组件，如dialog组件

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

提示：就是这么写，没有别的组件引入，不要问为什么

hmily43
关注
微信小程序开发之——用WeUI快速开发电影应用
m0_67392182的博客
04-06 1463
三 开发过程。
微信小程序：WeUI组件库踩坑
semoon的博客
03-27 3854
首先，本来只是个引用-调用组件库的小case，最后调用时发现微信官方文档有bug,调用不了。。。然后发现有很多人都遇到这个问题弃坑了，我来解决一下~~~ WeUI组件库一、使用npm下载组件库1.npm init2.npm i weui-miniprogram -S --production3.工具-构建npm二、调用样式、组件1.调用weui的样式，此处采用全局加载（app.wxss）2.调用组...
微信小程序-weUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-09 8180
微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。 微信小程序的UI组件库有很多，可以参考下面这个内容： 微信小程序UI组件库合集 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组...
微信小程序 - miniprogram（学习记录总结）
hulitong
01-13 2934
页面路由 在小程序中所有页面的路由全部由框架进行管理 navigateTo, redirectTo 只能打开非 tabBar 页面 switchTab 只能打开 tabBar 页面 reLaunch 可以打开任意页面 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar 调用页面路由带的参数可以在目标页面的onLoad中获取 属性双向绑定 <input model:value="{{value}}" /> this.setData({ valu
小程序(原生) 引入weUI组件
前端小胡兔的博客
07-07 2176
小程序(原生) 引入weUI组件
微信小程序引入WeUI组件库（详细成功案例，带图）
TurtleOrange的博客
11-04 1036
微信小程序引入WeUI组件库 本章选择官方引入组件的方式为第一种 通过npm方式（第二种）引入WeUI通道 第一步（引入WeUI库） 第二步（组件代码） 第三步（注册组件） 第四步（看效果）
微信小程序中weui组件的引入与使用方法
最新发布
07-16
需要注意的是，weui组件库会随着微信小程序的更新而更新，因此在使用过程中应当关注官方的更新日志，以便及时更新组件库，避免使用过时的组件和样式，确保小程序的稳定运行和兼容性。 最后，开发者在使用weui组件库...
微信小程序之WeUI组件库的使用
XH_jing的博客
11-23 1万+
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法，通过具体的示例代码进行介绍，相信能够对大家的学习和工作都有一定的参考学习意义，欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 二、下载 1. git 全部下载：https.
微信小程序引入weui组件
yiyingcsdn的博客
05-08 3528
微信小程序引入weui 组件
Android 自定义 MarqueeView 实现跑马灯 —— 原理篇
2401_84413531的博客
04-30 619
自定义view，Android开发的基本功。
GitHubWeChatMiniProgram可能是全网功能最全的GitHub微信小程序
08-10
GitHub WeChat Mini Program (可能是全网功能最全的 GitHub 微信小程序)
微信小程序 – weui的引入使用方法
01-03
查看weui是否是想要的表单样式，样式大致为： 下载weui 链接：https://pan.baidu.com/s/1jYqX1TEsyPWAqUHLwUm19Q 提取码：kvtc 引入weui （1）将src->style->weui.wxss复制到自己项目里 （2）在app.wxss文件中顶部加上如下代码 /* 这里的里放的是绝对路径，加入把文件放到了项目文件->utils文件夹中这里就是utils/weui.wxss */ @import weui.wxss; （3）在界面中使用相应的class就可以了呢 因为不知道对应的class属性是什么，可以将查看下载的文件
微信小程序扩展WeUI组件库
wang_hang_的博客
11-25 548
第一步项目npm初始化 后续询问内容可不填一路回车即可 项目下多处package.json和package-lock.json安装成功 第二部安装小程序官方扩展包 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9a27afad3142421380a476189cceedb0.png 项目下多出node_modules/weui-miniprogram安装成功 第三步构建npm 问题：找不到’miniprogramRoot’ 小程序根目录下的npm 解决办法:
微信小程序——引入WeUI组件库（一）
AngieLife
05-12 2939
如何在小程序中引入我们需要的WeUI组件库？下面我们将通过npm的方式下载构建，只要按照以下几个步骤操作即可完成！
微信小程序使用npm引入weui-miniprogram
爱吃鱼的ねこ的博客
01-30 2745
下载安装nodejs nodejs官方下载地址 直接下载左面的LTS版本即可 命令行输入 npm -v 看看是否安装成功，如果没有，请执行下面的操作手动添加路径 安装好后找到node.exe，然后复制路径 高级系统设置里，系统属性》高级》环境变量。找到path，然后编辑-》新建，将刚才的路径粘贴上去就ok了。 安装好如下： 使用npm安装第三方包 跳转到项目所在的根目录下（例如我的演示项目是manage,那么命令行到达manage就ok了） PS:如果是第一次在微信小程序里使用npm,是没
微信小程序WeUI项目weui-miniprogram如何运行起来？
qq_30908729的博客
10-22 1647
微信小程序WeUI项目weui-miniprogram如何运行起来
微信小程序用npm导入WeUI以及使用
weianl的博客
10-10 5428
首先进来的我相信都会用npm了，不会的滚出去度娘学习下。 配置package.json文件 我新建了个项目叫test，然后在项目目录栏上输入cmd回车键进入命令行 然后在命令行输入npm init回车键然后会提示输入项目名、作者等，一直按回车键就可以了，因为后期可以改的。 然后会提示确定，yes回车键 导包与构建 然后输入npm install --save weui-miniprogram...
npm引入小程序官方WeUI组件库weui-miniprogram
热门推荐
一只小菜鸟的博客
09-04 2万+
1、在小程序根目录内，初始化npm npm init 2、执行命令安装 npm 包： npm install --save weui-miniprogram 3、安装完成后，在微信开发者工具中的菜单栏：工具 ------ 构建 npm ： 4、在微信开发者工具中的右上角：详情 ------ 本地设置， 勾选“使用 npm 模块”选项： 5、点击文档中的组件示例代码，开始ctrl C + ...
微信小程序weui的使用
田兴的博客
09-28 2150
小程序weui官网：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 更多请看https://www.jianshu.com/p/ada94d3a3e86 方法一：npm导入WeUI（推荐） 1. 在项目根路径下开启终端 2. 执行 npm init 创建package.json (不想一个一个配置也可以执行npm init -y) 3. npm安装WeUi，执行cnpm install --save weui-miniprogr
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值