皮毛
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