微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 avatar 头像组件是一个很常用的基础元件, MinUI 中 avatar 组件的效果图如下:
各式各样的头像都有,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:
下面介绍 avatar 组件的使用方式。
1、使用下列命令安装 Min-Cli,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册
npm install -g @mindev/min-cli
复制代码
2、初始化一个小程序项目。
min init my-project
复制代码
选择 新建小程序 选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home
页面。详细文档:Min 初始化小程序项目
3、安装 avatar 组件。
进入刚才新建的小程序项目的目录中:
cd my-project
复制代码
安装组件:
min install @minui/wxc-avatar
复制代码
4、开启dev。
min dev
复制代码
开启之后,修改源码后都会重新编译。
5、在页面中引入组件。
在编辑器中打开 src/pages
目录下的 home/index.wxp
文件,在 script
中添加 config
字段,配置小程序自定义组件字段,代码如下:
export default {config: {"usingComponents": {'wxc-avatar': "@minui/wxc-avatar"}}
}
复制代码
wxc-avatar
即为头像组件的标签名,可以在 wxml 中使用。
6、在 wxml 中使用 wxc-avatar
标签。
在 home/index.wxp
文件的 template
中添加 wxc-avatar
标签,代码如下:
<wxc-avatar class="avatar" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
复制代码
7、打开微信开发者工具,指定 dist
目录,预览项目。
home/index.wxp
文件的代码如下所示:
<!-- home/index.wxp -->
<template><wxc-avatar class="avatar" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template><script>
export default {config: {usingComponents: {'wxc-avatar': '@minui/wxc-avatar'}}
}
</script><style>.avatar {display: block;width: 120rpx;height: 120rpx;}
</style>
复制代码
图示:
至此,minui 组件库的 avatar 头像组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,如已有小程序项目中的使用方式请移步至如下链接:
在已有小程序项目中使用 MinUI 组件
了解组件的使用方式后,下面开始介绍 avatar 组件的 API 。
Avatar 【Props】
名称 | 描述 |
---|---|
src
|
头像图片地址 |
mold
|
头像规格,circle(正圆)、square(正方),默认 circle |
count
|
消息数,显示在头像右上角 |
更多demo
1、设置不同规格的头像
<template><wxc-avatar class="avatar avatar__1" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar><wxc-avatar class="avatar avatar__2" src="https://s10.mogucdn.com/mlcdn/c45406/171116_3a30h33df8cj7f651al68hdh7bki7_528x528.png"></wxc-avatar><wxc-avatar class="avatar avatar__3" src="https://s10.mogucdn.com/mlcdn/c45406/171116_62f571l0ki0ffcg94h6kg6452h497_356x356.png"></wxc-avatar>
</template><script>
export default {config: {usingComponents: {'wxc-avatar': '@minui/wxc-avatar'}}
}
</script><style>.avatar {display: inline-block;margin-right: 20rpx;}.avatar__1 {width: 120rpx;height: 120rpx;}.avatar__2 {width: 160rpx;height: 160rpx;}.avatar__3 {width: 200rpx;height: 200rpx;}
</style>复制代码
图示:
2、方形头像
<template><wxc-avatar class="avatar" mold="square" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template><script>
export default {config: {usingComponents: {'wxc-avatar': '@minui/wxc-avatar'}}
}
</script><style>.avatar {display: block;width: 120rpx;height: 120rpx;}
</style>
复制代码
图示:
3、消息提示
<template><wxc-avatar class="avatar" count="7" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
</template><script>
export default {config: {usingComponents: {'wxc-avatar': '@minui/wxc-avatar'}},data: {}
}
</script><style>.avatar {display: block;width: 120rpx;height: 120rpx;}
</style>
复制代码
图示:
4、自定义文字
<template><wxc-avatar class="avatar">U</wxc-avatar>
</template><script>
export default {config: {usingComponents: {'wxc-avatar': '@minui/wxc-avatar'}},data: {}
}
</script><style>.avatar {display: block;width: 120rpx;height: 120rpx;border-radius: 50%;background: #31b0d5;color: #FFF;}
</style>
复制代码
更多组件更新同步请关注 MinUI
小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 avatar 头像组件使用文档。
沟通反馈
请添加群助手 wUf18018252882 好友或者扫码加好友,并与群助手对话发送验证码 10088
按照指引进群。
相关链接
- Min-Cli 官方仓库
- MinUI 官方仓库
- Min 官方文档
开源组件
布局元素
- flex 布局
- cc 水平垂直居中
基础元件
- avatar 头像
- badge 徽章
- elip 文本截断
- icon 图标
- label 标签
- loadmore 页底提示
- price 价格
- progress 进度条
功能组件
- abnor 异常流展示
- countdown 倒计时
- counter 数字框
- loading 加载提示
- mask 遮罩层
- steps 步骤条
- tab 选项卡
提示反馈
- dialog 对话框
- popup 弹出层
- toast 提示框
表单组件
- Coming soon ...
蘑菇街前端团队,2018.01.17 于杭州
微信小程序 MinUI 组件库系列之 avatar 头像组件相关推荐
- 微信小程序使用第三方库(第三方js)问题
比如很多人会有这样的问题: 小程序怎样引用第三方js呢? 第三方js是封装好的类库 想引用进来实例化使用 这个帖子就综合一下所有相关的知识,做一个整合,以便大家能够集中了了解:我觉得这个还是应该让大家 ...
- 微信小程序把玩(二十八)image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩(二十六)navigator组件
微信小程序把玩(二十六)navigator组件 原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
- 微信小程序:2022虎年背景全新UI头像框制作
2021马上就结束了,2022也马上到来了,虎年降至 给大家带来一款以2022虎年为主的一款头像制作小程序源码 前两天小编也分享过一款虎年头像框的小程序 不过那款为了美观,所以就没有给那款小程序添加流 ...
- 微信小程序:2022虎年背景全新UI头像框制作带安全检测
不知不觉已经2022年了,记得上一次发布这款小程序还在2021 感叹时间过得还是挺快的,为什么小编又要重新发布一次这个小程序呢 因为有很多小伙伴说之前的没有安全内容检测,然后审核过不去 所以小编今天就 ...
- 微信小程序:朋友圈发圈助手文案,头像,壁纸组合
这是一款微信朋友圈助手的一款小程序源码 内包含了朋友圈文案,壁纸,头像等等 每一个都包含了多个大分类 比如发圈助手有正能量,节假日祝福,搞笑段子等等 壁纸和头像自然也会有不同的分类,具体大家可以看演示 ...
- 新手入门微信小程序-从注册到开发(校庆头像框)
微信公众号:数学建模与人工智能 GitHub - QInzhengk/Math-Model-and-Machine-Learning 展示效果: 最近从网上找了一个开源的生成和校庆有关的微信头像小程 ...
- 微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
- 微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
最新文章
- BS-GX-016基于SSM实现教材管理系统
- 【sparkStreaming】将DStream保存在MySQL
- AI和深度学习正在席卷医疗保健行业
- css毛玻璃效果白边_css3毛玻璃效果白边问题
- 中国大学生软件开发论坛 中国最大的大学生软件开发论坛
- EXCEL数组公式(6),注意聚合函数在数组公式中的用法
- 编译安装LNMP及报错解决
- php获取文章内容,php文章内容抓取
- python根据关键字爬取微博_Python 超简单爬取微博热搜榜数据
- Struts2文件的下载
- 华为路ws5200设置虚拟服务器,华为WS5200无线路由器怎么设置?
- Cousera-Introduction to Data Science in Python Assignment1-4答案
- 工具相关累计 慢慢更新防止忘记
- Java之乐观锁和悲观锁
- python 下载pip命令
- 利用微信小程序API获取所在位置周围的WIFI信息
- qbxt国庆水题记day3
- 解决SSH能连上,但是无法scp的问题
- ARM 官方文档下载地址
- 鲁大师性能测试要装什么软件吗,比鲁大师还好用的硬件检测软件,鲁大师再见!...
热门文章
- 【科软课程-信息安全】Lab13 Packet Sniffing and Spoofing
- 房源租赁签约管理系统、租房系统、退租、续租、换租、转租、房源管理、招租系统、租期账单、合同管理、营销推广、租客系统、业主系统、web原型、业务流程 、门禁系统、Axure原型、rp源文件
- 团队作业1 团队展示选题
- 强大的分组SectionListView, 支持自定义组头布局和分组的内容布局, 组头有挤压效果
- Spectral Clustering(谱聚类和其他)
- Python机器学习英文资源
- 《改进SIR 模型在社交网络信息传播中的应用》仿真实现
- iOS开发-苹果开发者账号注册、申请续费整个流程
- safari 模拟手机显示
- adb devices只显示List of devices attached解决方案(手机已打开调试或无其他问题情况)