微信小程序weui的使用(1)

最新推荐文章于 2024-04-20 16:42:51 发布
最新推荐文章于 2024-04-20 16:42:51 发布
阅读量1.1k 收藏 19
点赞数 26
分类专栏： 程序员 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84123026/article/details/137438946
版权

在这里插入图片描述

使用组件了，我用index来示范，在index.json写入组件名和路径，（注意路径不可以多些一个空格，末尾也不可以多写一个逗号，会报错）

“mp-checkbox”: “…/…/miniprogram_npm/weui-miniprogram/checkbox/checkbox”

在这里插入图片描述

checkbox就是我用来演示的单选框组件，要用其他组件的话打开miniprogram_npm文件夹下的weui-miniprogram文件夹，然后里边就是官方已有的组件，要用改一下名字和地址名就ojbk了。

在这里插入图片描述

然后在index.wxml中使用组件

效果：

结束！！！

方法二：下载导入方式

1.下载weui

进入GitHub

最低0.47元/天 解锁文章
2401_84123026
关注
  • 26
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序weUI组件所有demo示例
10-17
之前上传过wxss后缀的样式表，今天把整个ui组件从github上拷贝下来方便大家下载，下载完直接用微信web开发者工具打开整个文件夹即可
微信小程序 单选框的实现
热门推荐
央顺科技官方博客
10-13 1万+
微信小程序单选框实现
微信小程序-自定义多选框、单选框样式
最新发布
weixin_42941628的博客
04-20 833
【代码】微信小程序-自定义多选框、单选框样式。
weui实现（单列选择器）
小白的博客
10-18 1210
1、插入weui的js，css和vue.js（weui的css和js版本需要对应） <!-- 引入weui框架及js --> <link rel="stylesheet" href="/static/weui/weui.min.css"> <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script&gt
【微信小程序】radio单选框(83/100）
lichong951的专栏
07-20 3088
简单的点胜过复杂的高明
webui之单选框操作学习
qq_45948176的博客
03-08 172
判断当前单选按钮是否选中状态。定位单选按钮 点击女性。
weui单选按钮获取的选中的值为“on”的解决办法
weixin_44110923的博客
09-02 616
weui单选按钮获取的选中的值为“on”的解决办法
微信小程序WEUI 控件 sketch mac
04-30
weui是微信团队自己出的sketch控件，里面都是最新的小程序控件，可直接添加到sketch里面使用。需要的自取。
微信小程序中weui用法解析
12-13
在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队...
微信小程序WEUI AXURE组件
03-29
微信小程序WEUI AXURE组件
微信小程序weui.wxss官方文件
08-08
微信 weui. weui,复制到根目录下，再入aap.wxss里【】@import "weui.wxss"，就可以直接调用了。微信官方 weui下载地址:https://github.com/weui/weui-wxss/ weui。自己备份在这里留用。
微信小程序之WeUI组件库的使用
XH_jing的博客
11-23 8226
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法，通过具体的示例代码进行介绍，相信能够对大家的学习和工作都有一定的参考学习意义，欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 二、下载 1. git 全部下载：https.
Jquery WeUI 复选框
三斗的博客
01-27 1425
html <div class="weui-cells__title ">製程</div> <div class="weui-cells weui-cells_checkbox" id="processSelect"> </div> 展示JS var processHtml = []; $.each(data.processes,function(key, value){ proce
WeUI使用
hangGe0111的博客
08-11 7309
方法一： 1.先去官网（官方网址：https://weui.io/）==》右键查看源码找到 &lt;link rel="stylesheet" href="./weui.css"/&gt; 点击href后的路径即可进入https://weui.io/weui.css，把所有的css复制到自己本地的weui.css文件中。如果嫌麻烦，也可引入bootcdn线上资源里的css。 2.如果想使...
微信小程序学习-1
qq_61726551的博客
04-08 425
吹牛吹大发了说我前端嘎嘎牛现在学弟学妹们看着我激动的小眼神，怪尴尬的。这里就介绍一下磕磕绊绊的小程序程序编写之路。这个是在虚拟机的环境下编写的，我先尝试一下hhhh操作系统：windows10。
weui获取checkbox选中值 带GIF效果演示
qq_36575358的博客
03-29 541
<div class="weui-cells weui-cells_checkbox"> <label class="weui-cell weui-check__label" for="s11044"> <div class="weui-cell__hd"> <input type="checkbox" class="weui-check" name="users" id="s11044" value="11044" onc.
使用weui进行选择文本数据，并展示到某个文本框内
qq_45728838的博客
08-12 477
//首先是点击事件的代码展示 //这部分是jsp页面设置点击事件 <a class="msgBtn">常用语</a> //这一部分是js点击事件 $(".msgBtn").click(function(){ //方法{}是我们传入的参数，function内是返回值 //传入参数的，假设传入id //SEARCH.deptSearch({Ids:"1"},function(obj) SEARCH.messageSearch({},function(obj){ $
微信小程序-weUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-09 6202
微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。 微信小程序的UI组件库有很多，可以参考下面这个内容： 微信小程序UI组件库合集 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组...
微信小程序weUI提示框使用
06-09
要使用weUI的提示框功能，需要先引入weUI的样式文件和JavaScript文件。在页面中可以使用以下代码来引入： ```html <link rel="stylesheet" type="text/css" href="/path/to/weui.min.css"> <script type="text/javascript" src="/path/to/zepto.min.js"></script> <script type="text/javascript" src="/path/to/weui.min.js"></script> ``` 其中，`weui.min.css` 是weUI的样式文件，`zepto.min.js` 是weUI所依赖的JavaScript库，`weui.min.js` 是weUI的JavaScript文件。 在页面中使用weUI的提示框，可以使用以下代码： ```javascript // 弹出成功提示框 weui.toast('操作成功', { duration: 2000, className: 'custom-classname', callback: function(){ console.log('close'); } }); // 弹出加载中提示框 weui.loading('数据加载中'); // 隐藏加载中提示框 weui.hideLoading(); ``` 其中，`weui.toast` 方法用于弹出成功提示框，`weui.loading` 方法用于弹出加载中提示框，`weui.hideLoading` 方法用于隐藏加载中提示框。 `weui.toast` 方法有以下参数： - `message`：提示框显示的文本内容。 - `options`：可选参数，包括： - `duration`：提示框显示的时间，单位为毫秒，默认为3000毫秒。 - `className`：提示框的自定义类名。 - `callback`：提示框关闭时的回调函数。 更多关于weUI的提示框使用方法可以参考weUI的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值