当前位置:首页 > 移动开发 >

MinUI使用手册(开发文档) PDF 完整版

大小:1.92 MB已被719人关注

MinUI使用手册(开发文档)是一个不错的学习资源,大小为1.92 MB,由从弘壮 提供,MinUI类资源中评分为7.4。

Tags:MinUI MinUI手册 

内容介绍

Min 一套完整的小程序组件化解决方案。提供 CLI 支持和基于规范的 UI 组件库; 具备完善的开发流程和配套设施, 让小程序组件化的开发和使用变得高效、愉悦。

使用 Min 工具可创建 微信小程序项目 和 微信小程序组件库项目 ,本节直接用两个创建好的工程引导新手入门使用 Min 工具。

注:为了方便区分 Min 设计的项目 与 已有小程序项目 这两者的项目结构和使用场景的区别,接下去文章里讲到的

通过 Min 工具初始化的 微信小程序项目 称为 Min小程序项目

通过 Min 工具初始化的一个 微信小程序组件库项目 称为 Min组件库项目

不是通过 Min 工具初始化 或 与Min设计的项目结构和使用方式存在差异的已有小程序 称为 已有小程序项目

用户需要开发一个小程序应用,请移步 Min小程序示例 快速入门

如果需要开发一套类似于 MinUI 组件库封装,请移步 Min组件库示例 快速入门

学习笔记

给大家精选了网上关于《MinUI使用手册(开发文档)》的学习笔记心得及相关实例内容,值得大家学习参考。

微信小程序 MinUI组件库系列之badge徽章组件示例

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 badge 徽章组件是一个很常用的基础元件, MinUI 中 badge 组件的效果图如下:

微信小程序 MinUI组件库系列之badge徽章组件示例

各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:

微信小程序 MinUI组件库系列之badge徽章组件示例

下面介绍 badge 组件的使用方式。

1、使用下列命令安装 Min-Cli ,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册

npm install -g @mindev/min-cli

2、初始化一个小程序项目。

min init my-project

选择 新建小程序 选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home 页面。详细文档:Min 初始化小程序项目

3、安装 badge 组件。

进入刚才新建的小程序项目的目录中:

cd my-project

安装组件:

min install @minui/wxc-badge

4、开启dev。

min dev

开启之后,修改源码后都会重新编译。

5、在页面中引入组件。

在编辑器中打开 src/pages 目录下的 home/index.wxp 文件,在 script 中添加 config 字段,配置小程序自定义组件字段,代码如下:

export default {
 config: {
 "usingComponents": {
  'wxc-badge': "@minui/wxc-badge"
 }
 }
}

wxc-badge 即为头像组件的标签名,可以在 wxml 中使用。

6、在 wxml 中使用 wxc-badge 标签。

home/index.wxp 文件的 template 中添加 wxc-badge 标签,代码如下:

<wxc-badge class="user__un-read-msg-count">9</wxc-badge>

7、打开微信开发者工具,指定 dist 目录,预览项目。

home/index.wxp 文件的代码如下所示:

<!-- home/index.wxp -->
<template>
 <view class="user">
 <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
 <wxc-badge class="user__un-read-msg-count">9</wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .user {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .user__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
 }
 .user__un-read-msg-count {
 position: absolute;
 top: -16rpx;
 right: -8rpx;
 }
</style>

图示:

微信小程序 MinUI组件库系列之badge徽章组件示例

至此,minui 组件库的 badge 徽章组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接:

在已有小程序项目中使用 MinUI 组件介绍

了解组件的使用方式后,下面开始介绍 badge 组件的 API 。

Badge

属性 描述
value [可选] 设置数值,优先级会高于标签内嵌套值
max [可选] 设置最大边界,越界数值显示为 maxVal+
type [可选] 设置标记类型,职位 dot 显示为弱提示的圆点

更多demo

1、vaule 传值

<template>
 <view class="user">
 <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
 <wxc-badge class="user__un-read-msg-count" value="100"></wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .user {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .user__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
 }
 .user__un-read-msg-count {
 position: absolute;
 top: -16rpx;
 right: -18rpx;
 }
</style>

图示:

微信小程序 MinUI组件库系列之badge徽章组件示例

2、设置最大边界值

<template>
 <view class="user">
 <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_20e8ac6bcjb67f9i8b88j2aiiil03_200x200.jpg"></image>
 <wxc-badge class="user__un-read-msg-count" max="99" value="230"></wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .user {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .user__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
 }
 .user__un-read-msg-count {
 position: absolute;
 top: -16rpx;
 right: -18rpx;
 }
</style>

图示:

微信小程序 MinUI组件库系列之badge徽章组件示例

3、个性化设置

<template>
 <view class="message">
 <image class="message__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image>
 <wxc-badge class="message__badge">new</wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .message {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .message__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 }
 .message__badge {
 position: absolute;
 top: -16rpx;
 right: -18rpx;
 }
</style>

图示:

微信小程序 MinUI组件库系列之badge徽章组件示例

4、红点模式

<template>

 <view class="message">
 <image class="message__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image>
 <wxc-badge class="message__badge" type="dot">30</wxc-badge>
 </view>

</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .message {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .message__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 }
 .message__badge {
 position: absolute;
 top: -20rpx;
 right: -2rpx;
 }
</style>

微信小程序 MinUI组件库系列之badge徽章组件示例

更多组件更新同步请关注 MinUI 小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 badge 徽章组件使用文档 。

相关链接

  • Min-Cli 官方仓库
  • MinUI 官方仓库
  • Min 官方文档

开源组件

  • 布局元素

    • flex 布局
    • cc 水平垂直居中
  • 基础元件

    • avatar 头像
    • badge 徽章
    • elip 文本截断
    • icon 图标
    • label 标签
    • loadmore 页底提示
    • price 价格
    • progress 进度条
  • 功能组件

    • abnor 异常流展示
    • countdown 倒计时
    • counter 数字框
    • loading 加载提示
    • mask 遮罩层
    • steps 步骤条
    • tab 选项卡
  • 提示反馈

    • dialog 对话框
    • popup 弹出层
    • toast 提示框
  • 表单组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

展开 +

收起 -

相关资源

Linux指令范例速查手册
Linux指令范例速查手册 第2版

Linux典藏大系自2010年陆续出版以来,因其内容丰富、讲解细腻、通俗易懂和实用性强等特色而深受广大读者的喜爱,长期位居同类图书销售排行榜的前列,累计销量近20万册。丛书中部分图书荣

立即下载
程序员面试手册:概念、编程问题及面试题
程序员面试手册:概念、编程问题及面试题 超清完整版

这书是朝向程序猿招聘面试的教材,书中包揽了各种各样程序编写解决方法,能够 用于合理地解决招聘面试、考题及校招。内容包括了代码、架构模式、数据库系统、数据结构及优化算法等关

立即下载
Excel职场手册:260招菜鸟变达人
Excel职场手册:260招菜鸟变达人 清晰版 立即下载
ThinkSystem SR650用户手册 影印版 立即下载
SD-WAN安装部署手册
SD-WAN安装部署手册 影印版

SD-WAN解决方案通过在WAN网络中部署网络控制器(SD-WAN@AC-Campus),集中管理CPE设备(AR650等)、零配置开局,缩短业务开通时间,从而帮助企业应对云服务带来的挑战,做到业务随需而变。 企业级软件定义广域网(SD-WAN)技术,旨在解决当前及未来现代企业应用的各种问题。软件定义广域网是云交付的重叠广域网架构,可在企业中实现全数字化和云转型。它可以显著降低广域网成本,缩短部署服务的时间,建立应用恢复能力,并为混合网络提供强大的安全架

立即下载
python3.8.2官方文档:API参考手册
python3.8.2官方文档:API参考手册 完整版

python3.8.2官方汉化版的文档,整理好的pdf文件,离线版的帮助手册。 这里汇总了Python3.8.2官方汉化版帮助文档,包含PythonC API 3.8.2 API参考手册、安装和使用 Python、常见问题、入门教程等,需要的朋友可下载试试! 说明:里面有部分文件没有汉化,这是官方汉化的问题,小编只是搬运工哦 Python3.8.2是一种易于学习又功能强大的编程语言。它提供了高效的高级数据结构,还能简单有效地面向对象编程。 Python 优雅的语法和动态类型,以及解释型语言的本质,使它

立即下载
程序化广告:个性化精准投放实用手册
程序化广告:个性化精准投放实用手册 完整版 立即下载
下载地址:百度网盘下载
读者心得
69小时52分钟前回答

微信小程序 MinUI组件库系列之badge徽章组件示例

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 badge 徽章组件是一个很常用的基础元件, MinUI 中 badge 组件的效果图如下: 各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快: 下面介绍 badge 组件的使用方式。 1、使用下列命令安装 Min-Cli ,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册 npm install -g @mindev/min-cli 2、初始化一个小程序项目。 ……

码小辫

富芷茹 提供上传

资源
20
粉丝
37
喜欢
119
评论
5

Copyright 2018-2021 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com