产品宣传册设计网站建设,cms开发框架,黄冈网站推广优化技巧,衡水做淘宝网站原创#xff1a; BrilliantOpenWeb OpenWeb开发者 7月6日
作者 | Brilliant Open Web 团队 编辑 | Daisy
升级与重要进展
历时2个月#xff0c;MIP团队完成了核心代码重构与核心功能升级#xff0c;MIP新版本核心代码#xff08;V2#xff09;在实现向下完全兼容当前代…原创 BrilliantOpenWeb OpenWeb开发者 7月6日
作者 | Brilliant Open Web 团队 编辑 | Daisy
升级与重要进展
历时2个月MIP团队完成了核心代码重构与核心功能升级MIP新版本核心代码V2在实现向下完全兼容当前代码V1的同时也提供了新的能力其中重要的几项是
基于 Vue 的新组件开发方式使组件开发更加便捷高效。 新增多页数据共享机制提供整站沉浸式体验。 提供沙盒机制屏蔽与限制组件里高能耗、不安全的API调用。
基于 Vue 的开发方式
Vue 本身就是一个非常完善的组件化方案完全满足 MIP 的诉求的。我们选择Vue开发组件还有其他的一些原因 - 组件需要支持数据驱动双向绑定slot 机制模版 语法等 - Vue 社区和生态已经非常成熟MIP 可以使用 Vue 一摸一样的方式开发组件开发者介入成本低 - Vue 组件也有自己完善生命周期 - 很多 Vue 的组件可以直接拿到 MIP 中使用。
在 Vue 的使用方面MIP 支持在 MIP-HTML 文档中使用 customElement 标签customElement 标签和常规的 HTML 标签在用法上完全保持一致下面是一个简单的 customElement 标签 mip-hello-world 在 MIP-HTML 文档中的用法。 mip-hello-world attr1hello attr2world/mip-hello-world
注册 MIP 组件的方法如下
mip.registerVueCustomElement(mip-hello-world,/*** 这里传入的对象就是 Vue 的实例对象先不要蒙后面我们会讲为什么会是一个 Vue 的实例。* 但 MIP 中组件是独立以 Vue 单文件开发发布的所以注册这一步在 mip-cli 中已经自动完成*/{// 由于 Mip 种的 Vue 不带 compiler所以其实不支持 template 写法只支持 render 方法此处为示意代码template: div classhello-world-wrap{{ attr1 }}, {{ attr2 }}/div,props: [attr1, attr2]}
);
当页面开始渲染的时候会将 mip-hello-world 渲染为如下 HTML 片段
mip-hello-worlddiv classhello-world-wraphello, world/div
/mip-hello-world
多页数据共享机制
熟悉 MIP 的开发者都了解MIP 是以页面 (Page) 为单位来运行的。开发者通过改造/提交一个个页面继而被百度收录并展示。
但以页面为单位带来一个问题当一个 MIP 页面中存在往其他页面跳转的链接时浏览器会使用加载页面的默认行为来加载新页面。新版本的 MIP 为了解决这个问题引入了 Page 模块。它的作用是 把多个页面以一定的形式组织起来让它们互相切换时拥有和单页应用一样的切换效果而不是浏览器默认的切换效果。 Page 模块实现方案核心主要有以下几点
MIP Page 借助 iframe 实现了页面之间的互相隔离 通过 iframe 和外界的通讯来实现页面之间的通讯和传递数据为了加载性能考虑第一个页面维持原状不放入 iframe 之中。 在页面结构上除了首个页面的 DOM 全部保留之外后续页面均以 iframe 的形式存在。因为 DOM 结构的原因首个页面等价于外部页面或者外部后续页面等价于内部页面或者内部这里的“内外”指的就是代码执行于 iframe 的内部或者外部。 沙盒机制 MIP 允许开发者通过提交 MIP 组件和写 等方式去写 等方式去写 JS 但是从性能和代码维护的层面考虑部分 API 是不应该使用的比如 alert、confirm 等等因此我们提供了沙盒机制去屏蔽和限制这类 API/属性的使用。
目前MIP新版本核心代码处于内测阶段将会在不久的将来在当前所有MIP站点中应用为开发者提供更多核心能力打造体验更好的Web站点。更多MIP代码升级详情请点击【阅读原文】查看。
6月 AMP 技术一览
amp-geo 组件
新增定位信息的封装让站点在移动设备浏览器中更友好的获取用户定位信息。具体的可以通过使用 amp-geo 获取用户在哪一个国家。组件主要通过识别 IP 的方式来实现区域定位但没有提供获取更多精确定位信息的功能。
amp-date-picker组件
实验版本的日历组件发布让移动端的日历选择体验更一致。此类组件如果由开发者各自实现最终提供给用户的体验将会参差不齐。AMP 通过统一的方式提供此类功能组件将极大提升开发者的开发体验和用户的交互体验。
下月技术预告
极速服务
极速服务是一种基于 Web 技术的全网解决方案是一个基于 MIP 技术的开发框架。开发者最终开发的极速服务不仅能在百度 App 中提供优质体验也能在其他任何移动浏览器下使用和访问并为用户提供良好体验。极速服务的更多细节将会在下期内容中与大家见面。
MIP组件开发详解
如何基于新版本 MIP 核心代码开发一个 MIP 组件开发过程中都有哪些技巧下期 MIP 核心代码研发工程师将对此进行深度解读。
