您的位置：首页 > 网站推广 > 经验心得  >  MIP Canonical使用规范 MIP Canonical怎么使用

MIP Canonical使用规范 MIP Canonical怎么使用

 更新时间：2016年12月21日 21:00  点击：2233
在某些情况下，站点对于同一个html页面，可能存在两种，一个是mip页，一个是原页面。百度会抓取这两个页面，并利用canonical标签将它们联系起来。

关联标签

你必须在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封装了单击，双击，滑动等手势，可在组件中使用，下面一聚教程网将为大家详细介绍MIP手势的用法。

    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"

                    });

[!--infotagslink--]

相关文章

  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25

  • ps怎么使用HSL面板

    ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。 &#8195;...2017-07-06

  • Plesk控制面板新手使用手册总结

    许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10

  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31

  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会...2014-06-07

  • 使用percona-toolkit操作MySQL的实用命令小结

    1.pt-archiver 功能介绍： 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍： pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据，不会对线上数据的OLTP查询造成太大影响，你可以将...2015-11-24

  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31

  • C#注释的一些使用方法浅谈

    C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25

  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24

  • 安装和使用percona-toolkit来辅助操作MySQL的基本教程

    一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24

  • php语言中使用json的技巧及json的实现代码详解

    目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30

  • PHP实现无限级分类（不使用递归）

    无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23

  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25

  • 使用jquery修改表单的提交地址基本思路

    基本思路： 通过使用jquery选择器得到对应表单的jquery对象，然后使用attr方法修改对应的action 示例程序一： 默认情况下，该表单会提交到page_one.html 点击button之后，表单的提交地址就会修改为page_two.html 复制...2014-06-07

  • 双冒号 ::在PHP中的使用情况

    前几天在百度知道里面看到有人问PHP中双冒号::的用法，当时给他的回答比较简洁因为手机打字不大方便！今天突然想起来，所以在这里总结一下我遇到的双冒号::在PHP中使用的情况！双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08

  • 浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧...2021-10-21

  • PHP mysql与mysqli事务使用说明 分享

    mysqli封装了诸如事务等一些高级操作，同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02

  • Postman安装与使用详细教程 附postman离线安装包

    这篇文章主要介绍了Postman安装与使用详细教程 附postman离线安装包,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-05

  • vs2019安装和使用详细图文教程

    这篇文章主要介绍了vs2019安装和使用详细图文教程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25