From f06e3e469ccbab80abe33f97cc5ca431646cc6c0 Mon Sep 17 00:00:00 2001 From: Miya Pan Date: Wed, 14 Aug 2019 21:13:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20mip-aio=20?= =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=BB=84=E4=BB=B6=20(#683)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 新增 mip-aio 服务组件 --- components/mip-aio/README.md | 49 +++++++++++++++++++++++++ components/mip-aio/example/example.js | 9 +++++ components/mip-aio/example/mip-aio.html | 17 +++++++++ components/mip-aio/mip-aio.js | 24 ++++++++++++ 4 files changed, 99 insertions(+) create mode 100644 components/mip-aio/README.md create mode 100644 components/mip-aio/example/example.js create mode 100644 components/mip-aio/example/mip-aio.html create mode 100644 components/mip-aio/mip-aio.js diff --git a/components/mip-aio/README.md b/components/mip-aio/README.md new file mode 100644 index 00000000..ee1f722a --- /dev/null +++ b/components/mip-aio/README.md @@ -0,0 +1,49 @@ +# mip-aio + +手百端能力调起服务，注入此组件脚本后可访问 Box 对象。 + +标题|内容 +----|---- +类型|通用 +支持布局|N/S +所需脚本|https://c.mipcdn.com/static/v2/mip-aio/mip-aio.js + +## 使用方式 + +在开发 MIP 组件时如需要手百端能力的时候，可通过引用该组件获取相关的端能力服务，无法单独使用。 + +### 1. 脚本引入 + +在需要使用 Box 对象的页面 HTML 当中引入脚本: + +`` + +### 2. 使用 + +在开发 MIP 组件时，需要在组件的生命周期钩子里通过 `MIP.Services.getServicePromise('mip-aio')` 方法异步获得手百端能力服务。然后通过 `getBox()` 方法获得 Box 对象，`version` 为资源版本号，比如 `http://s.bdstatic.com/common/openjs/aio.js?v=201602` 中的 `201602`。 + +```js +const servicePromise = MIP.Services.getServicePromise('mip-aio') + +servicePromise.then(service => { + // getBox(version) + service.getBox('201602').then(Box => { + console.log(Box.version) + console.log(Box.share) + }) +}) +``` + +### 示例 + +在开发组件时可以参照如下方式使用此组件的手百端能力服务: + +```js +export default MIPExample extends MIP.CustomElement { + async build () { + let aioService = await MIP.Service.getServicePromise('mip-aio') + let box = await service.getBox() + console.log(box.version) + } +} +``` diff --git a/components/mip-aio/example/example.js b/components/mip-aio/example/example.js new file mode 100644 index 00000000..60c3af9f --- /dev/null +++ b/components/mip-aio/example/example.js @@ -0,0 +1,9 @@ +const servicePromise = MIP.Services.getServicePromise('mip-aio') + +servicePromise.then(service => { + // getBox(version) + service.getBox('201602').then(Box => { + console.log(Box.version) + console.log(Box.share) + }) +}) diff --git a/components/mip-aio/example/mip-aio.html b/components/mip-aio/example/mip-aio.html new file mode 100644 index 00000000..335408af --- /dev/null +++ b/components/mip-aio/example/mip-aio.html @@ -0,0 +1,17 @@ + + + + + + MIP page + + + + + + + + + + + diff --git a/components/mip-aio/mip-aio.js b/components/mip-aio/mip-aio.js new file mode 100644 index 00000000..3d757a00 --- /dev/null +++ b/components/mip-aio/mip-aio.js @@ -0,0 +1,24 @@ +/** + * @file mip-aio 服务封装 + * @author Miya(panwenshuang@baidu.com) + */ + +export default class MIPAio { + getBox (version = '201602') { + if (this.scriptPromise) { + return this.scriptPromise + } + this.scriptPromise = new Promise((resolve, reject) => { + const aioScript = document.createElement('script') + const srcUrl = 'https://s.bdstatic.com/common/openjs/aio.js?v=' + version + aioScript.id = 'bd-box-sdk' + aioScript.onload = () => resolve(window.Box) + aioScript.onerror = () => reject(new Error(`脚本加载失败: ${srcUrl}`)) + aioScript.src = srcUrl + document.head.appendChild(aioScript) + }) + return this.scriptPromise + } +} + +MIP.registerService('mip-aio', MIPAio)