MIP 页面编写规范
所有页面 必须 包含
<html>
,<head>
,<body>
,组织方式和常规 HTML 相同:<html> <head></head> <body></body> </html>
所有页面 必须 在
<body>
的 最后 编写或引用 mip 相关的 js。其中顺序是:- mip.js
各组件的 js。如有相互依赖,把被依赖项写在前面。
举例来说,一个页面引用了两个组件
component-a
和component-b
,并且component-b
依赖component-a
(例如在component-b
的模板中出现了<mip-component-a>
),那么这个页面的组织结构应该是:<body> <!-- DOM or MIP Component --> <script type="text/javascript" src="https://somecdn/mip.js"></script> <script type="text/javascript" src="https://somecdn/mip-component-a.js"></script> <script type="text/javascript" src="https://somecdn/mip-component-b.js"></script> </body>
MIP 页面中的链接依然使用
<a>
,具体如下:如果跳转到其他 同域名的 MIP 页面,使用
mip-link
属性或者data-type="mip"
:<a href="https://somesite.com/mip/anotherMIPPage.html" mip-link>xxx</a> <a href="https://somesite.com/mip/anotherMIPPage.html">xxx</a>
href
指向当前域名的页面- 不允许使用
target
属性
如果跳转到其他页面 ,不添加
mip-link
属性或者data-type="mip"
,进行普通跳转:<a href="https://www.another-site.com/">Jump Out</a>
href
属性值沿用旧版 mip-link 规范,取值范围:https?://.*
,mailto:.*
,tel:.*
,不允许使用相对路径或者绝对路径。(如./relativePage.html
,/absolutePage.html
)和默认浏览器行为相同,
<a>
也可以用作页面内部的快速定位滚动,只需要将href
中包含#
即可,如http://somesite.com/mip/page.html#second
。特别地,#second
作为href
取值范围的例外也被认为合法,可以用作当前页面的快速定位。默认情况下点击链接后会向 History 中
push
一条记录。如果想覆盖当前记录,可以在<a>
元素上增加replace
属性。通过
data-title
和innerHTML
可以设置下一个页面的标题。(详情可见 MIP Shell 相关章节)重点注意:对于老版 MIP1 页面(即引用的是 https://c.mipcdn.com/static/v1/mip.js),因为其内部不包含 SHELL 等功能,因此等同于外部页面,不应当 使用
mip-link
或者data-type="mip"
,否则可能会出现 loading 动画永远无法消失,一直遮盖下层页面的问题。
页面内元素的样式中
z-index
不能超过 10000,否则会引起页面切换时的样式遮盖问题。