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
网友评论