mip-pix统计是什么 mip-pix统计怎么使用

mip-pix统计是什么，mip-pix 用来支持站长在页面中添加百度搜索的相关统计。这些统计主要包括访问时间，来自的点击title和来自的域名，下面请看详细的介绍。

标题	内容
类型	通用
所需脚本	无

示例

接入方提供一个接收请求的服务地址，例如：https://yourselfdomain/mip/tj.gif， 如果服务地址不支持HTTPS，可以使用百度提供的HTTPS代理服务使用MIP提供的插件，向服务地址定向发送请求。

如：

<mip-pixsrc="https://yourselfdomain/mipurl/tj.gif?t={TIME}&title={TITLE}&host={HOST}&from=baidu"></mip-pix>

MIP会自动匹配参数，生成请求地址。

例如：//yourselfdomain/mipurl/tj.gif?t=1459415529464&title=MIP_PIX_DEMO&host=mip.bdstatic.com&from=baidu

目前支持的参数: {TIME}，{TITLE}，{HOST}

属性

src

说明：资源方服务地址

必选项：是

很多人都还不知道mip-img图片是什么，以及mip-img图片怎么用，mip-img 用来支持在 mip 中增加图片内容，本次一聚教程网为大家带来了详细的介绍，请看下文。

标题	内容
类型	通用
支持布局	responsive,fixed-height,fill,container,fixed
所需脚本	无

示例

最基本使用

<mip-img 

 layout="responsive"

width="350"

height="263"

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg"

</mip-img>

加全屏查看

<mip-img

 layout="responsive"

width="350"

height="263"

popup

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg">

</mip-img>

其他布局（以fixed为例）

<mip-img 

layout="fixed-height"

height="263"

alt="baidu mip img"

rc="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg">

</mip-img>

带图片标题

图片标题可添加在<mip-img>后用于说明，可在<style mip-custom>标签下自定义样式

<mip-img

layout="responsive"

width="350"

height="263"

popup

alt="baidu mip img"

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg"

</mip-img>

<p class="mip-img-subtitle">带图片标题的类型</p>

属性

src

说明：图片地址

必选项：是

格式：字符串

popup

说明：设置图片资源是否可以在被点击后弹出全屏浮层查看

必选项：否

取值：无

alt

说明：与img标签的alt属性相同

必选项：否

class

说明：与img标签的class属性相同，用于标识元素，设置元素样式

必选项：否

mip-iframe 是用来支持在 mip 中嵌入第三方内容的一种方式，需要注意的是：所嵌入的内容强制是符合https协议的，下面请看详细的介绍。

如您的网站还不支持https，可使用百度云加速或其他同类型服务，开通https

标题	内容
类型	通用
支持布局	responsive, fixed-height, fixed
所需脚本	无

示例

基本使用

<mip-iframe

allowfullscreen

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true"> 

</mip-iframe>

加布局（fixed-height为例）

<mip-iframe

layout="fixed-height"

height="50"

allowfullscreen 

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true"> 

</mip-iframe>

属性

src

说明：与原生iframe的src属性作用一致

必选项：是

类型：URL

单位：无

取值：必须要使用https地址

默认值：无

width

说明：与高度（height）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

height

说明：与宽度（width）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

allowfullscreen

说明：与原生iframe的allowfullscreen属性作用一致

必选项：否

取值：空

默认值：无

srcdoc

说明：与原生iframe的srcdoc属性作用一致

必选项：否

类型：HTML_code

单位：无

取值：要显示在 iframe 中的 HTML 内容。必需是有效的 HTML 语法。

默认值：无

sandbox

说明：与原生iframe的sandbox属性作用一致

必选项：否

类型：字符串

单位：无

取值："", allow-same-origin,allow-top-navigation,allow-forms,allow-script

默认值：无

allowtransparency

说明：与原生iframe的allowtransparency属性作用一致

必选项：否

类型：字符串

单位：无

取值："",true,false

默认值：无

mip-carousel 用来支持 mip 中图片的一种展示方式，支出多图轮播，下面将为大家详细介绍怎么实现。

标题	内容
类型	通用
支持布局	fixed-height,responsive
所需脚本	无

示例

response 布局

<mip-carousel 

layout="responsive" 

width="600" 

height="400"> 

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

自动轮播

<mip-carousel 

autoplay 

layout="responsive"

width="600" 

height="400"> 

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> 

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

设置轮播时间间隔

<mip-carousel 

autoplay 

defer="1000"

layout="responsive" 

width="600" 

height="400"> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> 

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img> 

</mip-carousel> 

加指示器

<mip-carousel 

autoplay 

defer="1000" 

layout="responsive" 

width="600" 

height="400" 

indicator 

> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

加翻页按钮

<mip-carousel 

autoplay 

defer="1000"

layout="responsive" 

width="600" 

height="400"

indicator 

buttonController 

> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

加副标题

<mip-carousel
    autoplay
    defer="1000" 

layout="responsive" 

width="600" 

height="400"

indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" 

width="600"

height="400">

        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

点击图片跳转

非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

<mip-carousel
    autoplay
    defer="1000"

layout="responsive" 

width="600" 

height="400">
    <mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">  

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400">
        </mip-img>
    </a>
    <mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

autoplay

说明：自动轮播开关

必选项：否

类型：字符串或空

取值："",autoplay

单位：无

默认值：无

defer

说明：每次轮播的时间间隔，如果设置了autoplay，可以添加defer来指定轮播的时间间隔

必选项：否

类型：数字

单位：ms

默认值：2000