FreeUI 微信小程序的组件框架使用详情介绍

最新推荐文章于 2023-05-12 20:17:30 发布
最新推荐文章于 2023-05-12 20:17:30 发布
阅读量6.4k 收藏 3
点赞数
分类专栏： 微信小程序 微信开发 文章标签： 开源代码 github 框架 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wu_shuxuan/article/details/78264125
版权

微信小程序搜索：PockerUI

开源代码github地址：https://github.com/wushuxuan/PockerUI

码云库地址：https://gitee.com/wushuxuan/PockerUI

概述

PockerUI是我个人开发的开源小程序框架版本，结合了微信的视觉规范，为其他开发者提供统一的类库。

包含 badge、btn、capsule、card、cell、color、dialog、form、helper、icon、label、loadmore、noticebar、panel、popup、quantity、steps、switch、tab、toast、toptip 共计 21 类组件或元素。

首页：

这里写图片描述

自定义带进度条的audio:

这里写图片描述 

Button:

这里写图片描述
这里写图片描述

Capsule:

capsule

Card:

card

Picker:

picker

Navgition:

navgition
navgitionafter

「已注销」
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
国内知名6大UI框架、组件整理（PC\移动、微信小程序）
02-18
国内知名6大UI框架、组件整理（PC\移动、微信小程序）
微信小程序button组件使用详解
01-03
本文为大家分享了微信小程序button组件的使用方法，供大家参考，具体内容如下 展示效果图 button组件的常用属性 size：default、mini—-default为块级按钮、mini为小按钮 type：primary、default、warn—-primary提交成功、default默认灰色、warn警告色 plain：true、false—-按钮是否镂空，背景色透明 disabled：true、false—-是否禁用 loading：true、false—-名称前是否带 loading 图标 WXML
当前流行的UI框架
顺其自然~专栏
12-05 873
1、Bootstrap：用于开发响应式布局、移动优先的Web项目。可以快速上手，几乎没什么学习成本，是一个入门级的UI框架。 2、AmazeUI：妹子UI，它也是一个移动优先的UI框架，主要能解决国内浏览器存在的跨屏适配和兼容性问题。 3、Uni-app：是一个使用Vue.js开发的所有前端应用的UI框架，开发一套代码，可发布到IOS、Android、H5和微信小程序、快应用等多个平台。 4、ElementUI：是由饿了么前端开发团队开源的UI框架，主要用于PC端。 5、WeUI：是微信原生视觉体验一致的前
Taro —— 开发微信小程序总结
Wu_shuxuan的博客
06-29 3783
Taro官网：https://nervjs.github.io/taro/GETTING-STARTED.html# 安装及使用 1、安装： npm install -g @tarojs/cli 2、创建项目： taro init movies 3、编译预览： 小程序 # npm script $ npm run dev:weapp # 仅限全局安装 $ taro bu...
UniApp、微信小程序、Vue常用的UI组件
番茄Salad
03-30 1970
在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。
FreeUI，一款微信原生开发UI组件库
qq_35568841的博客
05-27 978
Free UI 轻量简洁的微信原生开发UI组件库 简介 Free UI，是一款微信原生开发的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水 如果你喜欢，请给个star呗~ 个人说明 如有问题，请联系QQ664423077或公众号留言搞文艺的猿。 预览 您可以通过微信扫码，查看最佳的演示效果。 源码地址 github地址: https://github.com/awzks1314/Free-UI gitee地址：https://gitee.com/zkszz/free-ui 开...
一个简单的web UI框架FreeUI
weixin_30809333的博客
12-06 243
初衷: 由于工作需要,前期做了一个业务管理的后台系统,最初是花了一天时间随便搞了一个简单的UI框架,因为没几个功能,但是问题来了,持续半年的业务发展,这个后台的管理功能越做越多,到现在一功7,80个功能了,眼看有破百的可能,而且这个管理后台使用的人也越来越多.... 后台的菜单展示及界面太小学了,以至于内部门用的人还凑合(要求不高,能用就行),外部门的人一看就难免吐槽,于是呼...尴了个尬.....
微信小程序用css实现 NoticeBar 功能 循环滚动无缝衔接
qq_46177396的博客
04-27 544
【代码】微信小程序用css实现 NoticeBar 功能 循环滚动无缝衔接。
5个非常实用的小程序UI设计模板分享
七小嗨少的博客
05-12 5379
在互联网飞速发展的时代，手机逐渐成为工作、学习和生活的必需品。小程序作为一种无需下载和安装即可使用的应用程序，因其快速、方便、强大的功能而受到用户的喜爱。小程序无处不在，随时可用，用完就走。随着需求市场的逐步扩大，许多开发团队也致力于小程序UI设计。为了方便开发团队，本文选择了来自即时设计资源社区的5个精品小程序UI设计模板。让我们看看！
WeUI - 微信官方推出的免费开源 UI 组件库，上手简单，风格简约，在微信生态开发轻量项目的绝佳选择
那些免费的砖
04-04 2175
微信早年发布的 UI 框架，对想要创建让微信用户感到熟悉的应用来说，是一个好选择。
Lin UI微信小程序组件库-其他
06-13
Lin UI 是一套基于微信小程序原生语法实现的高质量 UI 组件库。遵循简洁、易用、美观的设计规范。快速上手：安装1、初始化你的项目为一个 NPM 项目npm init -y若项目根目录已包含 package.json 文件，则可跳过该步骤...
微信小程序-微信小程序组件及api使用示例
08-06
wxSmartApp 本项目主要展示微信小程序中组件以及微信api的使用示例，关于微信项目环境的搭建以及各目录结构创建请参考小程序基础教程https://mp.weixin.qq.com/debug/wxadoc/dev/
微信小程序源码 框架(学习版)
06-18
微信小程序源码 框架(学习版)微信小程序源码 框架(学习版)微信小程序源码 框架(学习版)微信小程序源码 框架(学习版)微信小程序源码 框架(学习版)微信小程序源码 框架(学习版)微信小程序源码 框架(学习版)微信小程序...
微信小程序 —— button按钮去除border边框
热门推荐
Wu_shuxuan的博客
10-11 6万+
在开发微信小程序组件框架时，我遇到了一个问题，微信小程序中的button组件有特定的css，背景可以用：“background：none”去掉，但是边框再用“border : none”去掉就不可以了，这也是微信小程序与h5的不同之处。但是在微信小程序中使用:after选择器就可以实现这一功能。
微信小程序 —— 多个view左右对齐的巧用方法（display:flex布局）
Wu_shuxuan的博客
10-13 4万+
在以前写web端代码的时候，遇到俩个，三个的div平铺在一个大div中我都会用“width: 50%;display:inline-block;”这种方法来搞定，但是这样的写法很low,而且会经常有一种情况出现： 左边右边总有一个不能很好的对称 但是现在有简单一个方法，可以解决这个问题： 在最外层的view(div)中加“ display: flex; ” .free-all{ disp
微信小程序 —— 在微信小程序里面退出小程序
Wu_shuxuan的博客
01-17 3万+
微信小程序的开发文档中没有直接完成这样功能的api，但是可以用 wx.navigateBack 来实现。 1. 如果在index.wxml中直接退出； onLoad: function () { wx.showModal({ title: '提示', content: '您的帐户已冻结，请联系客服解除。客服电话' + app.globalD
微信小程序 —— 多个div（多个微信小程序view）横向排列的便捷方法
Wu_shuxuan的博客
10-19 3万+
在写自适应div( web端 )或view（微信端）的布局时，可以用以下俩种方法进行便捷布局 ： 利用外层div或外层view的display : flex ; flex-flow : row; 利用外层div或外层view的white-space：nowrap;属性 white-space属性值 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类
微信小程序 —— 自定义带进度条的音频播放控件audio
Wu_shuxuan的博客
10-19 2万+
在使用微信小程序的音频控件（audio）的时候发现居然控件中竟然没有播放进度条。例如： 而微信小程序自带的音频空间（audio）光秃秃的: 所以我就想了个办法，做了一个动态的音频进度条，像这样音乐进行到百分之几，进度条走到百分之几： -wxml <audio bindtimeupdate="MusicStart" bindended="MusicEnd" wx:for="{{MusicList}}"
微信小程序 —— 验证码获取倒计时效果
Wu_shuxuan的博客
11-15 2万+
wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button>js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获取验证码', //倒计
微信小程序ui组件框架
最新发布
07-27
有很多流行的微信小程序UI组件库可以使用，以下是其中几个比较常用的： 1. WeUI：由腾讯团队开发的一套基于微信原生视觉体验的UI组件库，包含了丰富的常用组件和样式风格。 2. Vant Weapp：是有赞团队开发的一款轻量、可靠的小程序UI组件库，提供了丰富的组件和灵活的定制能力。 3. ColorUI：是一款颜值非常高的小程序UI组件库，提供了多种主题样式和组件，可以实现快速搭建漂亮的小程序界面。 4. MinUI：是蘑菇街团队开发的一套基于微信小程序的UI组件库，提供了丰富的组件和样式风格，同时支持按需引入。 这些组件库都有详细的文档和示例，可以根据自己的需求选择合适的组件库来使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值