docs: 更新鸿蒙开发文档

7fb73105 · 雪洛 · b42658de · 7fb73105
隐藏空白更改
内联并排

Showing with 123 addition and 0 deletion

docs/tutorial/harmony/dev.md docs/tutorial/harmony/dev.md +123 -0

未找到文件。
--- a/docs/tutorial/harmony/dev.md
+++ b/docs/tutorial/harmony/dev.md
@@ -484,6 +484,8 @@ console.log("安卓、苹果不会编译，鸿蒙会编译，小程序和Web也
 // #endif
 ```

+## harmonyOS特性说明
+
 ### map组件及定位等api

 > 新增于HBuilderX 4.26
@@ -516,6 +518,127 @@ map组件、getLocation、openLocation、chooseLocation依赖于地图厂商。
 }
 ```

+### webview组件通讯
+
+在编译到鸿蒙时，plus对象不可用。如果要向webview发送消息，可以使用[WebviewContext的evalJs](https://doc.dcloud.net.cn/uni-app-x/api/create-webview-context.html)，注意此方案来源于uni-app-x，非uni-app-x仅鸿蒙支持。
+
+示例如下：
+
+```js
+// uni-app页面
+<template>
+  <view class="content">
+    <web-view id="web" @message="onMessage" src="/static/index.html"></web-view>
+  </view>
+</template>
+
+<script>
+  let context
+  const native = {
+    add: (a, b, callback) => {
+      callback(undefined, a + b)
+    }
+  }
+
+  function callback(id, err, data) {
+    context.evalJs(
+      `window.__bridge.callback(${id}, ${err ? JSON.stringify(err) : undefined}, ${data ? JSON.stringify(data) : undefined})`
+    )
+  }
+  export default {
+    data() {
+      return {
+        title: 'Hello'
+      }
+    },
+    onLoad() {},
+    onReady() {
+      context = uni.createWebviewContext('web', this)
+    },
+    methods: {
+      onMessage(event) {
+        const dataList = event.detail.data
+        dataList.forEach(({
+          data
+        } = {}) => {
+          if (data && typeof data === 'object' && data.action === '__invoke') {
+            const {
+              method,
+              args,
+              id
+            } = data
+            if (!(method in native)) {
+              return callback(id, {
+                message: `method:${method} not found`
+              })
+            }
+            try {
+              native[method](...args, (err, data) => {
+                callback(id, err, data)
+              })
+            } catch (e) {
+              callback(id, e)
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
+```
+
+```html
+<!-- webview内的html -->
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSBridge Demo</title>
+  </head>
+  <body>
+    <button id="call-native-method">callNativeMethod</button>
+    <script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
+    <script>
+      let callbackId = 0
+      const callbacks = {}
+
+      window.__bridge = {
+        invoke(method, args, callback) {
+          const id = callbackId++
+          callbacks[id] = callback
+          uni.postMessage({
+            data: {
+              action: '__invoke',
+              method,
+              args,
+              id
+            }
+          });
+        },
+        callback(callbackId, err, data) {
+          const callback = callbacks[callbackId]
+          if (!callback) {
+            return
+          }
+          delete callbacks[callbackId]
+          callback(err, data)
+        }
+      }
+      document.querySelector('#call-native-method').addEventListener('click', () => {
+        console.log(uni)
+        window.__bridge.invoke('add', [1, 2], (err, data) => {
+          console.log('invoke add callback:', err, data)
+        })
+      })
+    </script>
+  </body>
+</html>
+```
+
 ## 注意事项@tips

 1. 移植已有的 uni-app 项目源码时，如有其他 npm 依赖，请自行安装