百度MIP改造

分类:编程时间:2024-07-30 21:08:29 浏览:1235 评论:0 小中大全屏

皮毛

MIP定义:

移动网页加速器

MIP原理:

1、组件封装。2、缓存

MIP的好处

MIP可以降低手机版网页的开发难度。(组件)

MIP页面被手机百度收录后，会在搜索结果中显示闪电标志,暗示此网页的访问速度快一些。

MIP改造的方案：

1. PC+M+MIP (三套URL使用同一个数据库)

2. PC+MIP (将手机M站改造成MIP )

3.自适应+MIP (新增MIP站)

4.完全MIP ( PC+手机自适应)

框架部分:MIP网页基本要求(与普通网页的区别)

1.首行申明<!DOCTYPE html> (与HTML 5相同)

2. <html mip>标签以及UTF8编码

3. viewport标签(里面的参数值写1 尽量不要写1.0)

4.引入mip.css

5.<link rel="miphtml"> 和<link rel=" canonical">

6.body结尾前引入mip.js

（自适应可以直接写 <link rel=" canonical" href="当前url">）

第一个mip网页:

<!DOCTYPE HTML>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
<link rel="canonical" href="https://www.baidu.com">
<title>TEST DEMO</title>
</head>
<body>

<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>

可以复制到百度MIP检测工具看下是否符合规范,检测地址:https://www.mipengine.org/validator/validate

内容部分:MIP网页基本要求(与普通网页的区别)

1:内部使用style标签时,后面加mip-custom

<style mip-custom>(注意区别)
h1 {color :red;}
</style>

2.支持link标签引入外部CSS样式表

3.禁止使用行内样式( <div style="color:red"></div> )

常用:图片

(responsive响应式,其他属性请参考:https://www.mipengine.org/v2/docs/mip-standard/mip-html-spec.html#mipimg)

示例:按4:1宽高显示

<mip-img layout="responsive" width="4" height="1" alt=" 风景图片”src="1.jpg">
<!--
layout="responsive"  width="4" height="1" 响应式,宽高 按比例显示
layout="fixed" width="400" height="400"   真实宽高,会显示正方形
layout="fixed-height" width="无效" height="200"  高真实高度  宽度100%自适应

-->

点击图片实现全拼效果

<mip-img popup layout="fixed" width="400" height="400" alt=" 风景图片”src="1.jpg">
<!--加上 popup即可实现点击图片 全屏显示  popup可以没有值-->

常用:mip幻灯片

<mip-carousel layout=" responsive" width="600" height="400"
indicator autoplay defer="3000">
<mip-img src= ”01.jpg"></mip-img>
<mip-img src=" 02.jpg"></mip-img>
<mip-img src= ”03.jpg"></mip-img>
</mip- carousel>

需要额外引入脚本的组件:

详情参考:https://www.mipengine.org/v2/components/dynamic-content/mip-gototop.html

下面有一个所需脚本. 则需要把这个脚本引入到body结束标签前.

总结:

1.改造方案(网站类型、新建或改造) 一般情况只适合新闻资讯或文章类型的网站来进行建设,功能比较复杂的不太适合.

2.网页编码( UTF-8 )

3.外部JS (改为组件的方式,如轮播图、统计等)

4.标签替换(如img/video )

其他:请参考:https://www.mipengine.org/v2/components/index.html