新手指南 – 创建你的第一个MIP页面

按照下面的步骤,你可以快速创建一个基本的 MIP HTML 页面;通过进一步了解 MIP HTML 规范、对 MIP HTML 页面进行阶段性的验证等内容,你可以轻松开发出理想的 MIP 页面。

基本步骤包括:

    1、创建基础 MIP HTML 页面
    2、引入图片
    3、调整样式和布局
    4、预览和验证
    5、最后一步

1. 创建基础 MIP HTML 页面

下面这段代码是一个基础的 MIP HTML 的 demo 。将它复制到html文件中,并根据规范添加你想要的元素。

需要注意,页面中必须加载css文件https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css 和 js文件https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js,v0.0.1是版本号,版本号会根据功能的升级而不同,开发中可以根据文档中的说明进行加载。

  1. <!DOCTYPE html>
    
  2. <html mip>
    
  3.     <head>
    
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  5.         <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
  6.         <title>文章大标题</title>
    
  7.         <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css">
    
  8.     </head>
    
  9.     <body>
    
  10.         <h1>欢迎使用MIP,这是你的第一个MIP页面!</h1>        
    
  11.     </body>
    
  12.     <script src="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js"></script>   
    
  13. </html>

2. 引入图片

用MIP HTML 中的组件 <mip-img > 代替 HTML原生的 <img > 标签

3. 改变页面的样式

使用MIP HTML 时,你可以自定义页面样式,具体方法如下:

1)改变样式

MIP HTML 是web页面,页面中任何元素的样式都可以通过普通的css属性来设计。使用时,在页面的head部分引入css样式,在css中,可以通过类或者元素选择器进行选择要修改样式的dom元素。例如:

  1. <style mip-custom>
  2.     /* any custom style goes here */
  3.     body {
  4.         background-color: white;
  5.     }
  6.     mip-img {
  7.         background-color: gray;
  8.         border: 1px solid black;
  9.     }
  10. </style>

需要注意,每个 MIP HTML 页面只允许有一个嵌入css样式,且<style> 标签需要标记自定义样式,即写成 <style mip-custo>。

2)控件的布局

出于对性能的考虑,MIP页面暂时不支持第三方通过css来元素进行布局。

4. 预览和验证

在页面开发的过程中你需要严格注意校验规则。这样才能确保所开发的 MIP 页面是一个有效页面。

开发完成后,你可以选择如下方式,像预览普通HTML站点一样预览 MIP HTML 页面:

直接在浏览器中打开(由于XML Http Requests失败可能会导致某些元素预览失败)

在本地部署一个服务,如apache,nginx等

在开发过程中难免会出现一些细节性错误,你可以按如下步骤进行验证 MIP 页面是否合格:

1) 在浏览器中打开页面

2)打开控制台, 验证错误

5. 最后一步

恭喜你!到达这一步表明你已经完成了页面的本地测试,并修复了所有验证错误,你的第一个MIP页面已经准备好了。

你可以通过阅读本教程的其他内容,了解MIP的工作原理以及详细的组件说明,它们将帮助你创建出完美的MIP页面。

如果你想让搜索引擎检索到你的 MIP 页面,请参考教程让搜索发现你的页面。


发布日期:

所属分类: 网站运营 SEO 标签: