关联标签
你必须在MIP添加<link rel="canonical">指向原始页面，以保证MIP更好的继承原始页面的权重。
同时，你可以在原始页面中添加<link rel="miphtml">指向MIP，以使得搜索引擎更好的发现你创建的MIP。
使用规则：
- 在MIP页中使用<link rel="canonical”>，指向原页面(m站)，也可以指向原始网页中<link rel="canonical">所指向的pc页。
- 若MIP页没有对应的原页面，则指向MIP页本身url。
- 在原页面(m站)使用<link rel="miphtml">，用来指向MIP页。
在head中添加link标签让百度搜索发现你的页面
两种页面同时存在
在非 MIP 页中添加：
<linkrel="miphtml"href="https://m.baidu.com/mip/demo.html">
在 MIP 页中添加：
<linkrel="canonical"href="https://m.baidu.com/demo.html">
如果只有 MIP 页
同样需要添加，指向自己：
<linkrel="canonical"href="https://m.baidu.com/mip/demo.html">
新建MIP页的文件path建议
原网页与mip页的url的对应关系尽量简单、直接。
原网页出现的文档名或文档id，在MIP页命名时也要出现。
本次为大家带来的是MIP组件开发规范，帮助大家了解组件在开发时需要用到的组建是哪些，以及这些组件的作用等。开发文档
站长开发扩展组件请参照下面链接
扩展组件 开发文档
开发辅助工具库
开发辅助工具和模块
手势：单击，双击，滑动
其它：dom触发js事件
组件类型划分
1、内置组件
定义：为了解决性能、安全性问题必须要使用的组件，代码被集成在mip.js中。如 mip-img、mip-video 等。
2、扩展组件
定义：其它类型的组件，一般情况下组件开发都是扩展组件，使用时需要引入对应的js文件。
mip除了手势之外还提供一些功能，以解决在组件中遇到的各种问题和提升开发效率，下面就为大家带来这些功能的详细介绍。prerenderElement
提前渲染 mip 元素。
如果元素不在 viewport 内，强制触发元素的 viewportCallback firstInviewCallback 方法。
|
varelement =document.getElementById('mip-test'); MIP.prerenderElement(element); |
event-action
由于mip不允许使用附加的JS代码。所以提供了一套事件action机制，可以通过dom属性来触发某个mip元素的自定义事件。
html：
|
<mip-testid="test"></mip-test> <divon="tap:test.custom_event">不带参数</div> <divon="tap:test.custom_event(test_button)">带参数</div> <divon="tap:test.custom_event(test_button) tap:test.custom_event(test_button1)">多个事件</div> |
JS：
|
// mip-test.js define(function(require){ var customEle =require('cust omElement').create(); customEle.prototype.build =function(){ // 绑定事件，其它元素可通过 on="xxx" 触发 this.addEventAction("custom_event",function(event/* 对应的事件对象 */, str/* 事件参数 */){ console.log(str);// undefined or 'test_button' or 'test_button1' }); }; returncustomEle; }); |
MIP封装了单击，双击，滑动等手势，可在组件中使用
示例
var util = require('util'); var Gesture = util.Gesture; var customEle = require('customElemenet').create(); var build = function () { var gesture = new Gesture(this.element); // on 可接受多个事件名做为参数，以空格分隔。如 gesture.on('tap swipe') gesture.on('tap', function (event, data) { // 原始事件。如tap事件是通过 touchend 触发，event为tap对应的touchend事件对象 console.log(event); // gesture 计算后的数据。参数介绍见后面 console.log(data.type); // "tap" }); }; |
初始化参数介绍
gesture 实例化时第二个参数可以传一个object做为配置参数
示例：
// 默认阻止纵向滑动事件 var gesture = new Gesture(element, { preventY: true }); |
具体参数介绍：
|
preventDefault |
是否阻止默认事件 |
|
preventX |
是否阻止横向滑动时的默认事件 |
|
preventY |
是否阻止纵向滑动时的默认事件 |
|
stopPropagation |
是否阻止事件冒泡 |
默认参数：
// 如果初始化时不传入配置参数，会使用下面的配置进行初始化 { preventDefault: false, stopPropagation: false, // 默认会阻止横滑的事件，考虑到浏览器横滑有很多默认操作，所以在这里默认阻止横滑 preventX: true, preventY: false } |
gesture 数据对象介绍
数据对象做为事件处理函数的第二个参数传入。
示例：
gesture.on('tap', function (event, data) { console.log(data); }); |
通用字段：
|
angle |
滑动角度，如横滑为0度 |
|
deltaTime |
从开始到结束的时间间隔。单位是ms |
|
deltaX |
横轴位移 |
|
deltaY |
纵轴位移 |
|
direction |
方向。0: 未变动 1: 上 2:右 3: 下 4: 左 |
|
distance |
移动距离 |
|
pointers |
触摸点 |
|
timeStamp |
事件发生的时间戳 |
|
velocity |
速度 |
|
velocityX |
横向速度 |
|
velocityY |
纵向速度 |
| x |
触摸中心点坐标x |
| y |
触摸中心点坐标y |
|
type | 事件类型 |
扩展字段：
各手势可以向数据对象中扩展字段。如 swipe 事件中的 swipeDirection 字段，具体请看手势识别器介绍
手势识别器
手势识别器可以接收 gesture 数据对象，并识别出具体手势，触发具体的手势事件。
手势识别器对象在用户绑定事件时自动创建，在用户解绑事件时自动销毁。
目前有三种内置识别器：tap、dobuletap、swipe
tap
使用方法:
doubletap
双击，如果同时绑定tap和doubletap，tap事件会延迟300ms触发以判断是否触发双击。
使用方法：
gesture.on('tap', function (event, data) { console.log('单击'); }); |
gesture.on('tap', function (event, data) { console.log('双击'); }); |
swipe
滑动
使用方法：
// 使用方法1： gesture.on('swipe', function (event, data) { console.log(data.type); // "swipe" console.log(data.swipeDirection); // "up" or "right" or "down" or "left" }); // 使用方法2： gesture.on('swipeup swipedown', function (event, data) { console.log(data.type) // "swipeup" or "swipedown" console.log(data.swipeDirection) // "up" or "down" }); |