feat: 新增 mip-aio 服务组件 (#683)

* feat: 新增 mip-aio 服务组件
mipengine · Aug 14, 2019 · f06e3e4 · f06e3e4
1 parent a6ec978
commit f06e3e4
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 0 deletions.
diff --git a/components/mip-aio/README.md 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 当中引入脚本:
+
+`<script type="text/javascript" src="https://c.mipcdn.com/static/v2/mip-aio/mip-aio.js"></script>`
+
+### 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
@@ -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
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html mip>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <title>MIP page</title>
+  <link rel="canonical" href="对应的原页面地址">
+  <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
+</head>
+
+<body>
+
+  <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+  <script src="/mip-aio/mip-aio.js"></script>
+  <script src="./example.js"></script>
+</body>
+</html>
diff --git a/components/mip-aio/mip-aio.js b/components/mip-aio/mip-aio.js
@@ -0,0 +1,24 @@
+/**
+ * @file mip-aio 服务封装
+ * @author Miya([email protected])
+ */
+
+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)