MIP前端改造,组件使用

百度移动网页加速器MIP(Mobile Instant Pages)问题解决方案大全

MIP 推出后,我们收到了一些站长的疑问。现将常见问题整理出来,帮助大家了解 MIP 的知识

MIP (Mobile Instant Pages - 移动网页加速器), 是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。关于MIP的基础知识可以到MIP官网进行了解。为帮助站长和开发者更好地了解MIP,MIP开发团队对大家的疑问进行了整理,帮助大家了解 MIP 的知识。

MIP 主要由三部分组织成:

  • MIP HTML:基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容;

  • MIP JS:可以保证 MIP HTML 页面的快速渲染;

  • MIP Cache:用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。


MIP前端改造,组件使用

3.1 目前 MIP 组件之外的一些 JavaScript 插件如何支持?譬如广告、统计、推荐,等等?

MIP 为了确保安全性和性能表现,不允许用户自定义 JavaScript,需要用 MIP 组件的形式引进来;MIP 组件是开源的,开发者可以自行开发组件并提交给 MIP 组件库。可以参照MIP组件开发规范文档来封装组件并提交。

3.2 MIP 页面中可以展现哪些元素?对于弹窗广告有何限制?

MIP 页面中可以展示所有原页面的元素,在前端代码中对于一些标签做替换即可。比如,如果需要使用悬浮元素(position:fixed)需要改用 mip-fixed 组件或 mip-semi-fixed 组件。

3.3 MIP 提供的组件不能满足交互需求怎么办?

在 MIP 官方组件不能满足需求的情况下,如果升级官方组件可以满足,可以 提需求 或自己升级官方组件,MIP 项目组来审核;如果涉及到站点自身业务逻辑,可以自行封装组件并通过 组件审核平台 提交审核组件,审核通过后可以上线。

3.4 网盟反屏蔽广告申请广告位的时候,能否同时生成 MIP 页面的广告代码片段?

暂时还是不支持直接生成的,需要人工的根据转换规则将非 MIP 反屏蔽投放代码转换成 MIP 反屏蔽投放代码。这个转换规则还是比较清晰的,在 MIP 文档 里有说明。

3.5 为什么投放网盟反屏蔽广告,直接打开MIP页广告展现,在MIP预览工具和百度搜索结果页却看不到广告呢?

MIP预览工具和百度搜索结果页是https环境,会相应地引用https反屏蔽脚本。如果反屏蔽域名不支持https,就不能加载脚本了。可以参考反屏蔽广告组件文档的注意事项,通过支持https来解决这个问题。

3.6 对于自适应站点,MIP 对页面的改造要怎么弄?

MIP 改造主要有三步:

  1. 引用 MIP 提供的 JS 和 CSS

  2. 替换部分标签为 mip-html 标签

  3. 去除原有 JS 逻辑,改引用 mip-js 组件。

是否需要特殊改造,由网站对 “响应式” 的实现方式决定:

  • 如果您的自适应站点是用 CSS 的 Media Query 来实现的,那么不需要做特殊的改造,MIP 对 CSS 没有限制。

  • 如果您的自适应是通过 JS 计算实现的,则需要进行相应的改造(见改造第 3 步)。 如果您需要的功能不在我们的组件列表里面,可以通过 github issues 给我们反馈。

3.7 MIP 规范中写到不能用 link 标签对样式表进行加载,是不是我的样式都要写到 HTML 页面里,并且只能出现一次 style 标签?

MIP 规范不建议外链样式表,是为了节省网络加载时间,加速 MIP 页面。 开发时,样式表可以作为单独的文件维护,上线前通过一次编译(fis3,grunt,gulp)实现文件内联,将 css 作为<style>标签插入<html>, 达到 MIP 要求。

3.8 如何保证 MIP 页面代码符合规范,有校验工具么?

代码校验工具地址为:https://www.mipengine.org/validator/validate。在 MIP 官网—常用链接中也可以找到。

3.9 react 能否和 MIP 结合使用?是否会和其他 js 框架(比如angular )结合?

MIP 与其他框架(除zepto和jquery)及其组件不能结合使用。交互功能可以通过引入 MIP组件实现。

3.10 MIP页是否支持自定义cookie? 实现 登录、统计、广告等功能

cookie可以使用<mip-access>组件实现,使用方法见博客《MIP ACCESS细节剖析》

3.11 MIP的统计功能如何实现的?

目前我们提供百度统计天润统计,第三方站长开发的 cnzz 统计,还有 mip-pix 自定义统计。在页面中引入相应的组件就可以实现统计功能。

3.12 与服务端异步交互请求如何发出,如AJAX,官方提供了什么组件?

与服务端的交互请求比较个性化,需要自行封装组件,在组件中可以用 fetch 自行实现。文档请见官网。示例:

fetch(location.href).then(function (res) {
   return res.text();
}).then(function (text) {
   fetchElement.innerHTML = 'fetch: ' + (text.search('mip-test') !== -1);
});

3.13 第三方自定义组件的时候是否限制个数和规范?

暂无个数限制,规范需要通过FECS的规范检查,请保证新提交的组件不重复实现已有功能。未来我们会开放MIP组件平台,方便大家提交组件。

3.14 组件开发后多久可以上线?

组件开发按照 github 的标准,开发自测完成后,提交到 MIP 组件上线平台。1个工作日内可以上线。

3.15 组件之间是否可以交互?

为了组件间的抽象分离,mip不建议做组件间的交互。但是可以通过dom加on属性的形式控制。如mip-lightbox 弹层组件与mip-sidebar 侧边栏组件,点击button按钮可以触发展开收起。

<button on="tap:my-lightbox.open" id="btn-open" role="button" tabindex="0">
   Open lightbox
</button>

<mip-lightbox
   id="my-lightbox"
   layout="nodisplay"
   class="mip-hidden">
   <div class="lightbox">
       <h1>Hello, World!</h1>
       <p> this is the lightbox</p>
   </div>
</mip-lightbox>

如果有遇到新的前端技术问题,可以通过 GitHub issues 与我们交流,提交 issue 可以按照博客文章操作。


MIP前端改造,组件使用相关百科