美文网首页
mip入门指南

mip入门指南

作者: Biao_349d | 来源:发表于2018-09-26 15:19 被阅读0次

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

相关文章

网友评论

      本文标题:mip入门指南

      本文链接:https://www.haomeiwen.com/subject/obodoftx.html