原創： 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 attr1="hello" attr2="world"></mip-hello-world>

注冊 MIP 組件的方法如下：

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

當頁面開始渲染的時候，會將 mip-hello-world 渲染為如下 HTML 片段：

<mip-hello-world><div class="hello-world-wrap">hello, 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 核心代碼研發工程師將對此進行深度解讀。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。