原創(chuàng)： BrilliantOpenWeb OpenWeb開(kāi)發(fā)者 7月6日

作者 | Brilliant Open Web 團(tuán)隊(duì)
編輯 | Daisy

升級(jí)與重要進(jìn)展

歷時(shí)2個(gè)月，MIP團(tuán)隊(duì)完成了核心代碼重構(gòu)與核心功能升級(jí)，MIP新版本核心代碼（V2）在實(shí)現(xiàn)向下完全兼容當(dāng)前代碼（V1）的同時(shí)，也提供了新的能力，其中重要的幾項(xiàng)是：

• 基于 Vue 的新組件開(kāi)發(fā)方式，使組件開(kāi)發(fā)更加便捷高效。
• 新增多頁(yè)數(shù)據(jù)共享機(jī)制，提供整站沉浸式體驗(yàn)。
• 提供沙盒機(jī)制，屏蔽與限制組件里高能耗、不安全的API調(diào)用。

基于 Vue 的開(kāi)發(fā)方式

Vue 本身就是一個(gè)非常完善的組件化方案，完全滿足 MIP 的訴求的。我們選擇Vue開(kāi)發(fā)組件還有其他的一些原因：
- 組件需要支持?jǐn)?shù)據(jù)驅(qū)動(dòng)，雙向綁定，slot 機(jī)制，模版 語(yǔ)法等；
- Vue 社區(qū)和生態(tài)已經(jīng)非常成熟，MIP 可以使用 Vue 一摸一樣的方式開(kāi)發(fā)組件，開(kāi)發(fā)者介入成本低；
- Vue 組件也有自己完善生命周期；
- 很多 Vue 的組件可以直接拿到 MIP 中使用。

在 Vue 的使用方面，MIP 支持在 MIP-HTML 文檔中使用 customElement 標(biāo)簽，customElement 標(biāo)簽和常規(guī)的 HTML 標(biāo)簽在用法上完全保持一致，下面是一個(gè)簡(jiǎn)單的 customElement 標(biāo)簽 mip-hello-world 在 MIP-HTML 文檔中的用法。

<mip-hello-world attr1="hello" attr2="world"></mip-hello-world>

注冊(cè) MIP 組件的方法如下：

mip.registerVueCustomElement('mip-hello-world',/*** 這里傳入的對(duì)象就是 Vue 的實(shí)例對(duì)象（先不要蒙，后面我們會(huì)講為什么會(huì)是一個(gè) Vue 的實(shí)例）。* 但 MIP 中組件是獨(dú)立以 Vue 單文件開(kāi)發(fā)發(fā)布的，所以注冊(cè)這一步在 mip-cli 中已經(jīng)自動(dòng)完成*/{// 由于 Mip 種的 Vue 不帶 compiler，所以其實(shí)不支持 template 寫(xiě)法，只支持 render 方法，此處為示意代碼template: `<div class="hello-world-wrap">{{ attr1 }}, {{ attr2 }}</div>`,props: ['attr1', 'attr2']} );

當(dāng)頁(yè)面開(kāi)始渲染的時(shí)候，會(huì)將 mip-hello-world 渲染為如下 HTML 片段：

<mip-hello-world><div class="hello-world-wrap">hello, world</div> </mip-hello-world>

多頁(yè)數(shù)據(jù)共享機(jī)制

熟悉 MIP 的開(kāi)發(fā)者都了解，MIP 是以頁(yè)面 (Page) 為單位來(lái)運(yùn)行的。開(kāi)發(fā)者通過(guò)改造/提交一個(gè)個(gè)頁(yè)面，繼而被百度收錄并展示。

但以頁(yè)面為單位帶來(lái)一個(gè)問(wèn)題：當(dāng)一個(gè) MIP 頁(yè)面中存在往其他頁(yè)面跳轉(zhuǎn)的鏈接時(shí)，瀏覽器會(huì)使用加載頁(yè)面的默認(rèn)行為來(lái)加載新頁(yè)面。新版本的 MIP 為了解決這個(gè)問(wèn)題，引入了 Page 模塊。它的作用是 把多個(gè)頁(yè)面以一定的形式組織起來(lái)，讓它們互相切換時(shí)擁有和單頁(yè)應(yīng)用一樣的切換效果，而不是瀏覽器默認(rèn)的切換效果。
Page 模塊實(shí)現(xiàn)方案核心主要有以下幾點(diǎn)：

• MIP Page 借助 iframe 實(shí)現(xiàn)了頁(yè)面之間的互相隔離
• 通過(guò) iframe 和外界的通訊來(lái)實(shí)現(xiàn)頁(yè)面之間的通訊和傳遞數(shù)據(jù)

• 為了加載性能考慮，第一個(gè)頁(yè)面維持原狀，不放入 iframe 之中。

  在頁(yè)面結(jié)構(gòu)上，除了首個(gè)頁(yè)面的 DOM 全部保留之外，后續(xù)頁(yè)面均以 iframe 的形式存在。因?yàn)?DOM 結(jié)構(gòu)的原因，首個(gè)頁(yè)面等價(jià)于外部頁(yè)面或者外部，后續(xù)頁(yè)面等價(jià)于內(nèi)部頁(yè)面或者內(nèi)部，這里的“內(nèi)外”指的就是代碼執(zhí)行于 iframe 的內(nèi)部或者外部。

  沙盒機(jī)制

  MIP 允許開(kāi)發(fā)者通過(guò)提交 MIP 組件和寫(xiě) 等方式去寫(xiě) 等方式去寫(xiě) JS ，但是從性能和代碼維護(hù)的層面考慮，部分 API 是不應(yīng)該使用的，比如 alert、confirm 等等，因此我們提供了沙盒機(jī)制，去屏蔽和限制這類 API/屬性的使用。

目前MIP新版本核心代碼處于內(nèi)測(cè)階段，將會(huì)在不久的將來(lái)在當(dāng)前所有MIP站點(diǎn)中應(yīng)用，為開(kāi)發(fā)者提供更多核心能力，打造體驗(yàn)更好的Web站點(diǎn)。更多MIP代碼升級(jí)詳情，請(qǐng)點(diǎn)擊【閱讀原文】查看。

6月 AMP 技術(shù)一覽

<amp-geo> 組件

新增定位信息的封裝，讓站點(diǎn)在移動(dòng)設(shè)備瀏覽器中更友好的獲取用戶定位信息。具體的，可以通過(guò)使用 <amp-geo> 獲取用戶在哪一個(gè)國(guó)家。組件主要通過(guò)識(shí)別 IP 的方式來(lái)實(shí)現(xiàn)區(qū)域定位，但沒(méi)有提供獲取更多精確定位信息的功能。

<amp-date-picker>組件

實(shí)驗(yàn)版本的日歷組件發(fā)布，讓移動(dòng)端的日歷選擇體驗(yàn)更一致。此類組件如果由開(kāi)發(fā)者各自實(shí)現(xiàn)，最終提供給用戶的體驗(yàn)將會(huì)參差不齊。AMP 通過(guò)統(tǒng)一的方式提供此類功能組件，將極大提升開(kāi)發(fā)者的開(kāi)發(fā)體驗(yàn)和用戶的交互體驗(yàn)。

下月技術(shù)預(yù)告

極速服務(wù)

極速服務(wù)是一種基于 Web 技術(shù)的全網(wǎng)解決方案，是一個(gè)基于 MIP 技術(shù)的開(kāi)發(fā)框架。開(kāi)發(fā)者最終開(kāi)發(fā)的極速服務(wù)不僅能在百度 App 中提供優(yōu)質(zhì)體驗(yàn)，也能在其他任何移動(dòng)瀏覽器下使用和訪問(wèn)，并為用戶提供良好體驗(yàn)。極速服務(wù)的更多細(xì)節(jié)將會(huì)在下期內(nèi)容中與大家見(jiàn)面。

MIP組件開(kāi)發(fā)詳解

如何基于新版本 MIP 核心代碼開(kāi)發(fā)一個(gè) MIP 組件，開(kāi)發(fā)過(guò)程中都有哪些技巧，下期 MIP 核心代碼研發(fā)工程師將對(duì)此進(jìn)行深度解讀。

總結(jié)

以上是生活随笔為你收集整理的移动Web体验月报（6月）：MIP 核心代码升级，增加基于 Vue 开发能力的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。