组件列表
优质
小牛编辑
129浏览
2023-12-01
MIP 官方提供了一系列组件，封装了前端开发经常会用到的功能、样式或者布局等等，方便 MIP 开发者在无需引入自定义 JS 的情况下开发出功能丰富且性能好的网页。
官方组件从引入方式上分，可以分为两种：
- 内置组件，MIP 核心（mip.js）内置了一部分常用 MIP 组件，开发者无需额外引入 script 就能够直接使用。比如
mip-img、mip-fixed、mip-video等等； - 扩展组件，需要开发者在使用的时候引入对应的 script 标签才能生效，比如
mip-accordion、mip-tabs等等。
下面的列表我们通过功能对 MIP 组件进行划分可以分成以下几类，开发者可以根据实际页面开发时所需要的功能在以下列表当中进行快速查找。
布局
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-accordion | 折叠节点 | 折叠隐藏节点，可记录用户上次行为 |
| mip-app-banner | App 调起组件 | 用于调起 App |
| mip-appdl | App 下载 | App 下载，可区分 Android 和 iOS |
| mip-carousel | 多图轮播 | <mip-carousel> 用来支持 MIP 中图片的一种展示方式，支持多图轮播 |
| mip-fixed | 悬浮布局 | 悬浮元素整体使用方案 |
| mip-fx-collection | 滚动动画效果 | 定义元素在滚入视口的时候所触发的动画效果 |
| mip-fx-flying-carpet | 镂空滚动 | 容器随着正文上下滚动，而在视觉上，其内容不会随着滚动，从而形成镂空滚动。 |
| mip-iframe | iframe | <mip-iframe> 是用来支持在 MIP 中嵌入第三方内容的一种方式，需要注意的是：所嵌入的内容强制是符合 HTTPS 协议的 |
| mip-image-slider | 图片对比组件 | 一种将两张 mip-img 图片对比的组件。用户可以点击或拖动移动条来比较图片 |
| mip-lightbox | 弹出层 | 由用户控制展现或关闭的全屏浮层组件，组件全屏覆盖。 |
| mip-nav-slidedown | 菜单 | 响应式菜单，在 MIP 官网有引用 |
| mip-scrollbox | 横向滑动组件 | 支持自动适合屏幕宽度、栅格化（12列和两端 17px 边距）等特性。 |
| mip-semi-fixed | 自动贴顶 | position:sticky 的 JS 兼容版本。页面元素滑动到顶部时自动贴顶 |
| mip-shell | shell 组件 | 使用 MIP Shell 最简单直接的方式是直接使用内置的组件 <mip-shell>。开发者可以在 每个页面中 使用这个标签来定义 Shell 的各项配置。内置的 <mip-shell> 仅提供头部标题栏，但通过 继承内置 Shell，开发者可以实现渲染其他部件，如底部菜单栏，侧边栏等等。(继承内置 Shell 的相关内容会在之后的部分进行讲述 |
| mip-shell-xiaoshuo | 小说 mip-shell 定制化组件 | 为极速小说阅读器定制的 mip-shell |
| mip-sidebar | 侧边栏组件 | 侧边栏组件，点击按钮，侧边栏滑入屏幕 |
| mip-tabs | tab 切换组件 | 可嵌套、自定义 tab 标签及对应内容 |
| mip-vd-tabs | tab 切换组件 | 在网页中显示标签。标签页内元素较多时不建议使用，会影响页面性能。 |
呈现
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-custom | 定制化 MIP | 定制化 MIP 组件，想在页面中加入定制化内容，必须引入这个组件 |
| mip-date-countdown | 倒计时组件 | 倒计时组件 |
| mip-date-display | 时间显示组件 | 用于在 MIP 页面中显示不同格式的时间 |
| mip-date-picker | 日期选择组件 | 日期选择组件，提供简单日期选择和日期范围选择两种模式 |
| mip-fit-text | 在给定文本内容和文本容器大小的情况下，调整字体大小使文字塞满容器。 | |
| mip-font | 自定义字体组件 | 管理自定义字体的加载 |
| mip-mathml | MathML 公式 | 这个扩展组件会创建一个 iframe 并且渲染 MathML 公式 |
| mip-rem | mip-rem 组件 | <mip-rem> 用来设置文档根元素的 font-size，防止样式错乱问题。默认值为空，即跟随浏览器的默认设置 |
| mip-story | 小故事组件 | 引入更好质量和多元化的内容的功能组件。 |
| mip-timeago | 时间转化过去事组件 | 用于将指定时间转换为 *** time ago 的形式，例如，3天前，2月前，31年后，5 years ago |
| mip-toggle | 显示隐藏 | 提供显示/隐藏元素的功能。 |
| mip-user-notification | 消息通知组件 | 用于站点向用户发出通知 |
| mip-viz-vega | 基于 vega 的可视化组件 | 基于 vega 的 mip 可视化组件 |
| mip-widget-full-height | 全高页面组件 | 用于展现全高的 MIP 页面，需要配合 iframe-shell 使用 |
多媒体
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-anim | 动画 | 用来支持在 MIP 页中 GIF 图的使用 |
| mip-animation | 增强动画 | 用来定义和展示动画效果，在其内部定义一段 json 作为对动画效果的描述 |
| mip-audio | 音频播放 | 音频播放组件，支持 src 播放，source 播放，进度拖动功能 |
| mip-img | 图片 | <mip-img> 用来支持在 MIP 中增加图片内容 |
| mip-vd-baidu | 百度视频组件 | HTTP 视频源播放的百度解决方案。 |
| mip-video | 视频组件 | <mip-video> 用来支持在 MIP 中增加视频内容，是 HTML <video>的直接包装。 功能和兼容性与 HTML5<video> 一致 |
动态内容
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-access | 页面内容访问权限定制组件 | mip-access 能够允许发布者对页面内容进行访问权限的控制，通过内容标记和用户访问情况进行综合评价，从而决定页面要展示的内容。 |
| mip-action-macro | MIP 可交互行为扩展 | 为 MIP on 表达式拓展 1）行为封装 2）方法执行前置判断 3）有限运算支持 等功能。 |
| mip-autocomplete | input 提示框 | 基于自定义配置，根据用户输入给予用户提示，类似百度搜索的下拉提示。 |
| mip-confirm | 提示框 | 提示框组件 自定义内容 可配置确认取消按钮（confirm确认框） 和 只有确认按钮（alert提示框） |
| mip-data | MIP 数据加载器 | <mip-data> 是 MIP 数据驱动机制当中的数据加载器。开发者通过配置数据信息，并绑定在相应 DOM 上，就可以轻松做到数据变动后 DOM 元素随之变动的效果 |
| mip-env | 环境容器 | 环境容器组件，可将内容仅在指定环境下做展示,否则不展示 |
| mip-fastclick | fastclick 组件 | 点击延迟问题应该由页面引入 mip-fastclick 组件解决，禁止 组件内部单独引入 fastclick |
| mip-filter | 筛选组件 | 筛选功能，支持从 hash 定位筛选项 |
| mip-form | 表单组件 | form 表单 |
| mip-gototop | 回到顶部组件 | 点击回到页面顶部 |
| mip-group-selection | 分组选择 | 分组选择组件，可用于城市分组，英文名分组，颜色分组等。 |
| mip-history | 历史记录 | 封装了对历史记录的操作，实现页面间前进后退的功能。 |
| mip-html-os | 操作系统 | 根据操作系统来区分应该显示的内容，支持 Andriod 和 iOS。 |
| mip-infinitescroll | 无限滚动 | 当用户滚动到页面底部时，异步加载更多数据。适用于信息推荐 |
| mip-install-serviceworker | 注册 Service Worker | 注册 Service Worker，使您的 MIP 站点实现离线可用。 |
| mip-link | 跳转链接 | 实现两个 MIP 页面之间互相跳转的功能 |
| mip-list | 列表组件 | 可以渲染同步数据，或者异步请求数据后渲染 |
| mip-login-done | 登录跳转组件 | 与 mip-access 配套使用，提供了登录完成后跳转的页面。mip-login-done 本身不能独立使用 |
| mip-map | 地图组件 | 组件集成了百度地图的服务，目前支持定位、地图控件加载、定位点弹窗信息定制等功能 |
| mip-modal | 模态框 | 模态框可以在页面中央打开一个浮层，与用户进行交互。 |
| mip-mustache | mustache 模板引擎 | 允许页面写 mustache 模板。 |
| mip-position-observer | 位置监听组件 | 用于在用户滑动屏幕的时候监听元素的位置信息，发出 enter exit scroll 事件 |
| mip-range | 拖动选择组件 | 通过拖动滑块在一个固定区间内进行选择 |
| mip-script | 自定义 JS 代码 | 开发者可以在 mip-script 中编写自定义 JS 代码，以扩展数据驱动的计算能力 |
| mip-selector | 选择器组件 | 控制元素成为可选项，完成选择功能 |
| mip-showmore | 显示更多 | 隐藏过长的文章，点击按钮显示更多内容 |
| mip-toast | 弹出框（只有文字 文字和图标 位置上、中、下 | 提示框组件 自定义内容 |
广告
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-ad | MIP 广告 | 用于在 MIP 页中引入广告脚本，投放广告。 |
| mip-ad-ecom | 百度凤巢广告 | 百度凤巢广告组件，仅在百度搜索来源的MIP页中生效。 |
| mip-bridge-baidu | 百度商桥组件 | 安装百度商桥代码，引入百度商桥功能。 |
| mip-sticky-ad | 广告容器组件 | 用于将广告固定在页面的底部 |
社交与分享
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-share | 分享组件 | 提供页面内分享按钮功能，默认分享当前网址。 |
统计与分析
| 组件名 | 中文名 | 简要描述 |
|---|---|---|
| mip-analytics | 数据分析 | 发送数据分析 |
| mip-experiment | 前端抽样实验 | 该组件用于前端抽样实验。 |
| mip-linksubmit | 百度站长平台链接自动提交组件 | 实现 MIP 页面 URL 自动提交给百度站长平台的功能。 |
| mip-pix | mip-pix 统计 | 将 <mip-pix> 组件直接引入，可发送带有自定义参数的请求，用于统计页面访问情况。这些参数主要包括页面打开时间点，页面 title 和当面页面地址 |
| mip-stats-baidu | 添加百度统计组件 | 添加百度统计组件，用于统计页面数据 |
| mip-stats-cnzz | 友盟统计投放 | 友盟（CNZZ）统计投放 |
| mip-stats-google | GA统计组件 | 添加 Google GA 统计 |
| mip-stats-mta | 腾讯 mta 统计组件 | 添加腾讯 mta 统计 |
| mip-stats-tianrun | 天润统计组件 | 添加天润统计 |