绿色排版工具|热门专题|网站地图|移动官网
您的当前位置:网站首页 > 网站优化 > MIP > 正文

百度mip入门指南+快速改造

来源:未知 编辑:小蚂蚁站长 时间:2019-12-09 11:30:47 阅读:

百度mip入门指南+快速改造
1.  编码为UTF-8   <meta charset="utf-8">

2. meta-viewport,用于移动端展现。<meta name="viewport" content="width=device-width,initial-scale=1">

3. 在<html>标签中增加mip属性标识  <html mip>

4. 在 HTML 代码中,添加 MIP 依赖的mip.js和mip.css

5. 添加 MIP 关联对应页面   <link rel="miphtml"> 指向mip页面, <link rel="canonical">指向原页面, ,    必须在<head>标签中包含<link rel="canonical" href="当前网站链接">

6. 添加样式,  必须写在head里面,  不能外链,不能写行内样式, 只能内嵌,<style mip-custom>h1{color: red;} </style>  只能有一个style标签

7. 不能引入自定义或第三方库的js文件, 必须使用Mip的组件

8. 使用Mip组件完成功能, 并引入对应组件的js文件

9. 必须在<body>标签中包含<script src="https://c.mipcdn.com/static/v1/mip.js"></script>,如果包含在<head>标签中则须增加async属性。

10. 部分标签禁用或需要替换,或需要按照规则进行修改:   https://www.mipengine.org/doc/2-tech/1-mip-html.html

11. 引入jq, 必须在组件内部引入

define(function(require){var$ =require('jquery');// orvar$ =require('zepto');}); 

12. 数据绑定

···

<style mip-custom>

[data-clicked=true] {

background: prink;

}

</style>

<mip-data>

<script type="application/json">{"clicked":false}</script>

</mip-data>

<span m-bind:data-clicked=''clicked" on="tap.MIP.setData({clicked:!m.clicked})">来点我呀 </span>

···

m表示 mip-data整个对象,

13.   mip 代码检测工具  https://www.mipengine.org/validator/validate

14.   Mip 开发组件   http://www.cnblogs.com/mipengine/p/mip_cli_1_install.html


上一篇:没有了
下一篇:没有了

相关文章推荐:

热门阅读推荐:

图文精选:

栏目分类
推荐文章

Copyright©2012-2019 小蚂蚁信息网版权所有 粤ICP备14061018号


郑重声明:本网站资源、信息来源于网络,完全免费共享,仅供学习和研究使用,版权和著作权归原作者所有,如有不愿意被转载的情况,请通知我们删除已转载的信息。

Top