mip-audio音频播放详解 mip-audio音频播放怎么使用

mip-audio是一个音频播放组件，本次将为大家详细介绍mip-audio的使用方法，帮助大家了解mip-audio组件，下面请看详细介绍。

音频播放组件

描述	提供了一个音频播放组件
类型	通用
支持布局	N/S
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-audio/mip-audio.js

示例

<mip-audio

src="http://cp01-ps-fe-1.epc.baidu.com:8001/javascripts/nicai.mp3">

</mip-audio>

属性

src

说明：音频地址

必填：是

格式：url

使用限制：必须是https的

mip-appdl下载怎么用？mip-appdl 用来支持在 mip 中app的下载，详细的使用方法请看下文介绍。

描述	提供了一个mip中app的下载容器.
类型	通用
支持布局	N/S
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-appdl/mip-appdl.js

示例

基本使用

<mip-appdl

tpl="imageText"

src="http://filesimg.111cn.net/2016/12/17/20161217133210435.png"

texttip="['积分能当钱花了','下载百度浏览器','下载百度浏览器']"

downbtntext="立即使用"

Android-downsrc="http://sqdd.myapp.com/myapp/qqteam/AndroidQQ/mobileqq_android.apk"

Ios-downsrc="itms-apps://itunes.apple.com/app/id452186370"postiontye="static">

</mip-appdl>

固定位置

• 使用 悬浮组件支持

<mip-fixed type="bottom">

<mip-appdl

tpl="imageText"

src="http://filesimg.111cn.net/2016/12/17/20161217133210435.png"

texttip="['积分能当钱花了','下载百度浏览器','下载百度浏览器']"

downbtntext="立即使用"

postiontye="fixed"

Android-downsrc="http://sqdd.myapp.com/myapp/qqteam/AndroidQQ/mobileqq_android.apk"

Ios-downsrc="itms-apps://itunes.apple.com/app/id452186370"

postiontye="fixed">

</mip-appdl>

</mip-fixed>

属性

tpl

说明：展示类型

必填：是

格式：字符串

取值：noneImg, imageText

src

说明：图片地址

必填：是（if(tpl == imageText的)）

格式：字符串

取值：url 类型

texttip

说明：显示问只能

必填：是

格式：字符串

Android-downsrc

说明：安卓下载路径

必填：否

格式：字符串

取值：url 类型

使用限制：直接下载需要传递apk直接下载路径否则可传下载页路径.如果对应系统没有下载链接则自动不显示

Ios-downsrc

说明：ios下载路径

必填：否

格式：字符串

取值：url 类型

使用限制：必须填写appstore下载路径(itms-apps://itunes.apple.com/app/id452186370)或者下载页路径，如果对应系统没有下载链接则自动不显示

postiontye

说明：位置

必填：是

格式：字符串

取值：有两种位置static(在文档中的正常位置), fixed(固定在底部)

mip-anim动图详解将为大家介绍mip-anim动图怎么用，mip-anim 用来支持在 mip中gif图的使用，下面请看详细的介绍。

标题	内容
类型	通用
支持布局	responsive, fixed-height, fixed, container 文档
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-anim/mip-anim.js

示例

带placeholder的加载方式

<mip-anim 

layout="fixed" width=210 height=210  src="xxx"  alt="an animation">

<mip-img  

layout="fixed-height"  width=210  height=210  src="xxxx">

</mip-img>

</mip-anim>

只有gif图

<mip-anim

layout="fixed" width=210  height=210  src="xxx"alt="an animation">

</mip-anim>

属性

src

说明：图片路径

必选项：是

类型：字符串

取值范围：URL

本次一聚焦成为大家带来的是mip-accordion 折叠节点详解，mip-accordion 用来支持在 mip折叠隐藏的节点(可记录用户上次行为)，下面请看详细的介绍。

标题	内容
类型	通用
支持布局	responsive,fixed-height,fill,container,fixed 文档
所需脚本	https://mipcache.bdstatic.com/static/v1/mip-accordion/mip-accordion.js

示例

标题加内容形式

<mip-accordionsessions-key="mip_1">

<section>

<h4>下拉第一个</h4>

<p>我说你是人间的四月天；笑声点亮了四面风；轻灵在春的光艳中交舞着变。你是四月早天里的云烟，黄昏吹着风的软，星子在无意中闪，</p>

</section>

<section>

<h4>下拉第二个</h4>

<p>细雨点洒在花前。那轻，那娉婷，你是，鲜妍百花的冠冕你戴着，你是天真，庄严，你是夜夜的月圆。</p>

</section>

<section>

<h4>下拉第三个</h4>

<mip-img layout="responsive"width="400"height="200"src="http://filesimg.111cn.net/2016/12/17/20161217131228631.jpg">

</mip-img>

</section>

</mip-accordion>

标题加内容形式-手动

默认展开的节点此时要加 expanded 属性

<mip-accordion sessions-key="mip_1"type="manual">

<section>

<h4>下拉第一个</h4>

<p>我说你是人间的四月天；笑声点亮了四面风；轻灵在春的光艳中交舞着变。你是四月早天里的云烟，黄昏吹着风的软，星子在无意中闪，</p>

</section>

<section expanded>

<h4>下拉第二个</h4>

<p>细雨点洒在花前。那轻，那娉婷，你是，鲜妍百花的冠冕你戴着，你是天真，庄严，你是夜夜的月圆。</p>

</section>

<section>

<h4>下拉第三个</h4>

<mip-imglayout="responsive"width="400"height="200"

src="http://filesimg.111cn.net/2016/12/17/20161217131228631.jpg">

</mip-img>

</section>

</mip-accordion>

标题切换形式

<mip-accordion sessions-key="mip_2">

<section>

<h4>

<spanclass="show-more">显示更多</span>

<spanclass="show-less">收起</span>

</h4>

<p>显示显示收起收起显示显示收起收起显示显示收起收起显示显示收起收起</p>

</section>

</mip-accordion>

属性

sessions-key

说明：组件唯一标识符,用于区分同个页面中多个mip-accordion以还原用户上次操作

必选项：是

类型：字符串

type

说明：类型，区分自动根据session记录展开节点（automatic），还是手动配置默认展开节点（manual）

必选项：否

类型：字符串

单位：无

取值：automatic, manual

默认值：automatic

expanded

说明：默认展开的 mip-accordion 子节点需要配置此属性，只有在 mip-accordion 的 type 属性值为 manual 时才会生效

必选项：否

类型：字符串

单位：无

取值：无

默认值：无