组件列表

MIP 官方提供了一系列组件,封装了前端开发经常会用到的功能、样式或者布局等等,方便 MIP 开发者在无需引入自定义 JS 的情况下开发出功能丰富且性能好的网页。

官方组件从引入方式上分,可以分为两种:

  • 内置组件,MIP 核心(mip.js)内置了一部分常用 MIP 组件,开发者无需额外引入 script 就能够直接使用。比如 mip-imgmip-fixedmip-video 等等;
  • 扩展组件,需要开发者在使用的时候引入对应的 script 标签才能生效,比如 mip-accordionmip-tabs 等等。

下面的列表我们通过功能对 MIP 组件进行划分可以分成以下几类,开发者可以根据实际页面开发时所需要的功能在以下列表当中进行快速查找。

布局

组件名中文名简要描述
mip-accordion折叠节点折叠隐藏节点,可记录用户上次行为
mip-app-bannerApp 调起组件用于调起 App
mip-appdlApp 下载App 下载,可区分 Android 和 iOS
mip-carousel多图轮播<mip-carousel> 用来支持 MIP 中图片的一种展示方式,支持多图轮播
mip-fixed折叠节点折叠隐藏节点,可记录用户上次行为
mip-fx-collection滚动动画效果定义元素在滚入视口的时候所触发的动画效果
mip-fx-flying-carpet镂空滚动容器随着正文上下滚动,而在视觉上,其内容不会随着滚动,从而形成镂空滚动。
mip-iframeiframe<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-shellshell 组件使用 MIP Shell 最简单直接的方式是直接使用内置的组件 <mip-shell>。开发者可以在 每个页面中 使用这个标签来定义 Shell 的各项配置。内置的 <mip-shell> 仅提供头部标题栏,但通过 继承内置 Shell,开发者可以实现渲染其他部件,如底部菜单栏,侧边栏等等。(继承内置 Shell 的相关内容会在之后的部分进行讲述
mip-shell-inservice极速服务 mip-shell 定制化组件极速服务 mip-shell 定制化
mip-shell-xiaoshuo小说 mip-shell 定制化组件为极速小说阅读器定制的 mip-shell
mip-sidebar侧边栏组件侧边栏组件,点击按钮,侧边栏滑入屏幕
mip-tabstab 切换组件可嵌套、自定义 tab 标签及对应内容
mip-vd-tabstab 切换组件在网页中显示标签。标签页内元素较多时不建议使用,会影响页面性能。
mip-widget-full-height全高页面组件该组件设计用于展现全高的 MIP 页面,需要配合 iframe-shell 使用。

呈现

组件名中文名简要描述
mip-city-selection城市选择组件mip-city-selection 分组选择组件,可用于城市分组,英文名分组,颜色分组等
mip-date-countdown倒计时组件倒计时组件
mip-fit-text在给定文本内容和文本容器大小的情况下,调整字体大小使文字塞满容器。
mip-font自定义字体组件管理自定义字体的加载
mip-mathmlMathML 公式这个扩展组件会创建一个 iframe 并且渲染 MathML 公式
mip-remmip-rem 组件<mip-rem> 用来设置文档根元素的 font-size,防止样式错乱问题。默认值为空,即跟随浏览器的默认设置
mip-story小故事组件引入更好质量和多元化的内容的功能组件。
mip-timeago时间转化过去事组件用于将指定时间转换为 *** time ago 的形式,例如,3天前,2月前,31年后,5 years ago
mip-toggle显示隐藏提供显示/隐藏元素的功能。

多媒体

组件名中文名简要描述
mip-anim动画用来支持在 MIP 页中 GIF 图的使用
mip-audio音频播放音频播放组件,支持 src 播放,source 播放,进度拖动功能
mip-img图片<mip-img> 用来支持在 MIP 中增加图片内容
mip-novel-videomip-novel-video 组件用来支持在 MIP 页中广告视频的使用
mip-vd-baidu百度视频组件HTTP 视频源播放的百度解决方案。
mip-video视频组件<mip-video> 用来支持在 MIP 中增加视频内容,是 HTML <video>的直接包装。 功能和兼容性与 HTML5<video> 一致

动态内容

组件名中文名简要描述
mip-access页面内容访问权限定制组件mip-access 能够允许发布者对页面内容进行访问权限的控制,通过内容标记和用户访问情况进行综合评价,从而决定页面要展示的内容。
mip-bind绑定数据组件<mip-bind> 是以数据驱动页面更新的功能,开发者通过配置数据信息,并绑定在相应 DOM 上,就可以轻松做到数据变动后 DOM 元素随之变动的效果
mip-confirm提示框提示框组件 自定义内容 可配置确认取消按钮(confirm确认框) 和 只有确认按钮(alert提示框)
mip-env环境容器环境容器组件,可将内容仅在指定环境下做展示,否则不展示
mip-fastclickfastclick 组件点击延迟问题应该由页面引入 mip-fastclick 组件解决,禁止 组件内部单独引入 fastclick
mip-filter筛选组件筛选功能,支持从 hash 定位筛选项
mip-form表单组件form 表单
mip-gototop回到顶部组件点击回到页面顶部
mip-group-selection分组选择分组选择组件,可用于城市分组,英文名分组,颜色分组等。
mip-history历史记录封装了对历史记录的操作,实现页面间前进后退的功能。
mip-html-os操作系统根据操作系统来区分应该显示的内容,支持 Andriod 和 iOS。
mip-infinitescroll无限滚动当用户滚动到页面底部时,异步加载更多数据。适用于信息推荐
mip-inservice-login登录授权组件登录授权组件
mip-inservice-pay极速服务 支付组件件极速服务 支付组件
mip-install-serviceworker注册 Service Worker注册 Service Worker,使您的 MIP 站点实现离线可用。
mip-install-serviceworker注册 Service Worker该组件是实现离线可用的组件,帮助安装 Service Worker。
mip-link跳转链接实现两个 MIP 页面之间互相跳转的功能
mip-list列表组件可以渲染同步数据,或者异步请求数据后渲染
mip-map地图组件组件集成了百度地图的服务,目前支持定位、地图控件加载、定位点弹窗信息定制等功能
mip-mustachemustache 模板引擎允许页面写 mustache 模板。
mip-range拖动选择组件通过拖动滑块在一个固定区间内进行选择
mip-script自定义 JS 代码开发者可以在 mip-script 中编写自定义 JavaScript 代码来完成一些事情,使 MIP 页面交互更加灵活
mip-showmore显示更多隐藏过长的文章,点击按钮显示更多内容
mip-toast弹出框(只有文字 文字和图标 位置上、中、下提示框组件 自定义内容

广告

组件名中文名简要描述
mip-adMIP 广告用于在 MIP 页中引入广告脚本,投放广告。
mip-ad-ecom百度凤巢广告百度凤巢广告组件,仅在百度搜索来源的MIP页中生效。
mip-bridge-baidu百度商桥组件安装百度商桥代码,引入百度商桥功能。

社交与分享

组件名中文名简要描述
mip-share分享组件提供页面内分享按钮功能,默认分享当前网址。

统计与分析

组件名中文名简要描述
mip-analytics数据分析发送数据分析
mip-experiment前端抽样实验该组件用于前端抽样实验。
mip-pixmip-pix 统计将 <mip-pix> 组件直接引入,可发送带有自定义参数的请求,用于统计页面访问情况。这些参数主要包括页面打开时间点,页面 title 和当面页面地址
mip-stats-baidu添加百度统计组件添加百度统计组件,用于统计页面数据
mip-stats-cnzz友盟统计投放友盟(CNZZ)统计投放
mip-stats-tianrun天润统计组件添加天润统计