新增JsBridge和axios文档

zhangjianh · May 20, 2023 · 05d2d2f · 05d2d2f
1 parent da7670b
commit 05d2d2f
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 2 deletions.
diff --git a/_sidebar.md b/_sidebar.md
@@ -36,5 +36,6 @@
     - [WebView 与 HTML](/webViewAndHtml)
     - [执行命令 - Shell](/shell)
     - [调用 Java](/workWithJava)
+    - [axios](/axios)
 
-- [常见问题](/qa)
+- [常见问题](/qa)
diff --git a/axios.md b/axios.md
@@ -0,0 +1,110 @@
+# axios
+> <font color="#ec5315">稳定性: 实验</font>
+
+<font color="#ef5952">**注意**: 这个模块是异步的，返回的全部都是`Promise`，如果你的程序有大量阻塞函数，请谨慎使用</font>
+这个模块不会自动加载，如需使用，请用
+```js
+const axios = require('axios/index.js');
+//或  在子模块中不可用
+const axios = require('axios');
+```
+模块使用方法与axios完全一致，请参阅[官方网站](https://www.axios-http.cn/docs/intro)，以下只介绍一些在autox中特有的内容。   
+
+这个模块通过模拟浏览器关键对象`XMLHttpRequest`得以运行，内部使用okhttp进行网络请求，行为与浏览器中有些许差异。
+
+不支持的内容:
+* `ArrayBuffer` 不支持处理和解析
+* `XMLHttpRequest.overrideMimeType()`
+* `XMLHttpRequest.timeout` 暂不支持设置
+
+支持的`responseType`:
+* `text`
+* `json`
+* `blob`
+* `inputstream` java输入流
+
+支持的请求体数据类型:
+* `RequestBody` okhttp3.RequestBody对象
+* `FormData` 
+* `Blob`
+* `InputStream` java输入流
+* `String`
+* `plain object` 会解析成json
+
+一个简单的示例
+```js
+const axios = require("axios");
+const FormData = axios.browser.FormData;
+
+/*
+  下载文件
+*/
+axios('https://m.baidu.com', {
+    responseType: 'blob'
+}).then((res) => {
+    const blob = res.data
+    log('blob:', blob);
+    //保存blob
+    //return axios.utils.saveBlobToFile(blob, savePath)
+}).then(() => {
+    log('下载成功')
+}).catch(console.error)
+
+
+/*
+  使用表单
+*/
+let form = new FormData()
+form.set('a', 'b')
+form.append('b', '123')
+form.append('b', '测试')
+axios.post('http://baidu.com', form).then(function (res) {
+    log('请求成功1');
+}).catch(console.error)
+
+/*
+  使用表单上传文件
+*/
+let blob = axios.utils.openFile('./使用axios.js')
+
+form.enctype = 'multipart/form-data'
+form.set('file', blob)
+axios.post('http://baidu.com', form).then(function (res) {
+    log('请求成功2');
+}).catch(console.error)
+
+/*
+  也可以使用直接传输
+*/
+axios.post('http://baidu.com', blob).then(function (res) {
+    log('请求成功3');
+}).catch(console.error)
+```
+
+## axios.browser
+用于模拟浏览器环境的对象，包含`XMLHttpRequest`、`FormData`等，除了`FormData`，其他对象都不建议直接使用。
+
+## axios.utils
+包含一些操作blob对象方法
+### utils.saveBlobToFile(blob, path)
+* `blob` {Blob} 要保存的对象
+* `path` {String} 保存路径  
+
+保存blob对象到指定路径，返回一个`Promise`。
+
+### utils.openFile(path)
+* `path` {String} 要打开的文件路径
+
+打开一个文件，返回一个blob对象  
+### utils.copyInputStream(inputstream, outputstream)
+* `inputstream`java输入流
+* `outputstream` java输出流
+
+拷贝输入流到输出流，这个函数是阻塞的，且不会自动关闭流。
+### utils.ThreadPool
+此对象用于将一个同步函数转成异步方法运行，返回一个`Promise`，例如
+```js
+let promise = ThreadPool.run(()>{
+  //同步代码，返回值就是Promise的返回值
+})
+```
diff --git a/webViewAndHtml.md b/webViewAndHtml.md
@@ -1,5 +1,70 @@
 # WebView 与 HTML
+## *JsBridge
+v6.3.9新增  
+html>>
+```html
+<html>
+  <body style="font: size 2em">
+    <div style="font-size: 100px">原内容</div>
+    <!-- 导入依赖包，也可以不加，不过需要监听AutoxJsBridgeReady事件后才能使用$autox -->
+    <script src="autox://sdk.v1.js"></script>
+    <script>
+      function addText(text) {
+        const div = document.createElement("div");
+        div.innerHTML = text;
+        document.body.appendChild(div);
+      }
+      //注册一个监听函数
+      $autox.registerHandler("jsTest", (data, callBack) => {
+        addText(`来自安卓调用，data=${data}`);
+        setTimeout(() => {
+          //回调安卓
+          callBack("web回调数据");
+        }, 1000);
+      });
+      //调用安卓端
+      $autox.callHandler("test", "web调用数据", (data) => {
+        addText("安卓回调, data:" + data);
+      });
 
+      document.addEventListener("AutoxJsBridgeReady", () => {
+        //$autox.
+      });
+    </script>
+  </body>
+</html>
+```
+js代码  
+```js
+"ui";
+
+ui.layout(`
+    <vertical>
+        <webview id="web" h="*"/>
+    </vertical>`)
+
+ui.web.loadUrl("file://" + files.path("./网页.html"))
+/*
+    注意：在web与安卓端传递的数据只能是字符串，其他数据需自行使用JSON序列化
+    在调用callHandler时传入了回调函数，但web端没有调用则会造成内存泄露。
+    jsBridge自动注入依赖于webViewClient，如设置了自定义webViewClient则需要在合适的时机（页面加载完成后）调用webview.injectionJsBridge()手动注入
+*/
+//注册一个监听函数
+ui.web.jsBridge.registerHandler("test", (data, callBack) => {
+    toastLog("web调用安卓,data:" + data)
+    setTimeout(() => {
+        //回调web
+        callBack("1155")
+    }, 2000)
+})
+//定时器中等待web加载完成
+setTimeout(() => {
+    ui.web.jsBridge.callHandler('jsTest', '数据', (data) => {
+        toastLog('web回调,data:' + data)
+    })
+}, 1000)
+```
+## 纯js实现
 ```js
 "ui";
 ui.layout(
@@ -178,4 +243,4 @@ ui.loadLocalHtmlBtn.on('click', () => {
     ui.webView.loadUrl(path);
 });
 
-```
+```