更新web-view示例

pages/component/web-view/web-view.uvue

@@ -11,8 +11,8 @@
         <input class="uni-input" confirmType="go" placeholder="输入网址跳转" @confirm="confirm" maxlength="-1"/>
       </view>
       <view class="uni-row uni-btn-v">
-        <button class="uni-flex-item" type="primary" @click="back">后退</button>
-        <button class="margin-left-5 uni-flex-item" type="primary" @click="forward">前进</button>
+        <button class="uni-flex-item" type="primary" :disabled="!canGoBack" @click="back">后退</button>
+        <button class="margin-left-5 uni-flex-item" type="primary" :disabled="!canGoForward" @click="forward">前进</button>
       </view>
       <view class="uni-row uni-btn-v">
         <button class="uni-flex-item" type="primary" @click="reload">重新加载</button>
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+  import { canWebViewGoBack, canWebViewGoForward } from '@/uni_modules/uts-get-native-view';
   export default {
     data() {
       return {
@@ -53,6 +54,8 @@
         loadError: false,
         horizontalScrollBarAccess: true,
         verticalScrollBarAccess: true,
+        canGoBack: false,
+        canGoForward: false,
         // 自动化测试
         autoTest: false,
         eventLoading: null as UTSJSONObject | null,
@@ -109,6 +112,8 @@
       },
       loading(event : UniWebViewLoadingEvent) {
         console.log(JSON.stringify(event.detail));
+        this.canGoBack = canWebViewGoBack(this.webviewElement as UniWebViewElement);
+        this.canGoForward = canWebViewGoForward(this.webviewElement as UniWebViewElement);
         if (this.autoTest) {
           this.eventLoading = {
             "tagName": event.target?.tagName,

uni_modules/uts-get-native-view/package.json

+{
+  "id": "uts-get-native-view",
+  "displayName": "uts-get-native-view",
+  "version": "1.0.0",
+  "description": "uts-get-native-view",
+  "keywords": [
+    "uts-get-native-view"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.6.8"
+  },
+  "dcloudext": {
+    "type": "uts",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u",
+        "alipay": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-android": "u",
+          "app-ios": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/uts-get-native-view/readme.md

+# uts-get-native-view
+### 开发文档
+[UTS 语法](https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html)
+[UTS API插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
+[UTS 组件插件](https://uniapp.dcloud.net.cn/plugin/uts-component.html)
+[Hello UTS](https://gitcode.net/dcloud/hello-uts)
\ No newline at end of file

uni_modules/uts-get-native-view/utssdk/app-android/config.json

+{
+  "minSdkVersion": "21"
+}
\ No newline at end of file

uni_modules/uts-get-native-view/utssdk/app-android/index.uts

+import { CanWebViewGoBack, CanWebViewGoForward } from "../interface";
+import WebView from 'android.webkit.WebView';
+
+export const canWebViewGoBack : CanWebViewGoBack = function (element : UniElement) : boolean {
+  const view = element.getAndroidView<WebView>();
+  return view == null ? false : view.canGoBack();
+}
+
+export const canWebViewGoForward : CanWebViewGoForward = function (element : UniElement) : boolean {
+  const view = element.getAndroidView<WebView>();
+  return view == null ? false : view.canGoForward();
+}
\ No newline at end of file

uni_modules/uts-get-native-view/utssdk/app-ios/config.json

+{
+  "deploymentTarget": "12"
+}

uni_modules/uts-get-native-view/utssdk/app-ios/index.uts

+/**
+ * 引用 iOS 系统库，示例如下：
+ * import { UIDevice } from "UIKit";
+ * [可选实现，按需引入]
+ */
+
+/* 引入 interface.uts 文件中定义的变量 */
+import { MyApiOptions, MyApiResult, MyApi, MyApiSync } from '../interface.uts';
+
+/* 引入 unierror.uts 文件中定义的变量 */
+import { MyApiFailImpl } from '../unierror';
+
+/**
+ * 引入三方库
+ * [可选实现，按需引入]
+ *
+ * 在 iOS 平台引入三方库有以下两种方式：
+ * 1、通过引入三方库framework 或者.a 等方式，需要将 .framework 放到 ./Frameworks 目录下，将.a 放到 ./Libs 目录下。更多信息[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#ios-平台原生配置)
+ * 2、通过 cocoaPods 方式引入，将要引入的 pod 信息配置到 config.json 文件下的 dependencies-pods 字段下。详细配置方式[详见](https://uniapp.dcloud.net.cn/plugin/uts-ios-cocoapods.html)
+ *
+ * 在通过上述任意方式依赖三方库后，使用时需要在文件中 import:
+ * 示例：import { LottieLoopMode	} from 'Lottie'
+ */
+
+/**
+ * UTSiOS 为平台内置对象，不需要 import 可直接调用其API，[详见](https://uniapp.dcloud.net.cn/uts/utsios.html)
+ */
+
+/**
+ * 异步方法
+ *
+ * uni-app项目中（vue/nvue）调用示例：
+ * 1、引入方法声明 import { myApi } from "@/uni_modules/uts-api"
+ * 2、方法调用
+ * myApi({
+ *   paramA: false,
+ *   complete: (res) => {
+ *      console.log(res)
+ *   }
+ * });
+ *
+ */
+export const myApi : MyApi = function (options : MyApiOptions) {
+
+  if (options.paramA == true) {
+    // 返回数据
+    const res : MyApiResult = {
+      fieldA: 85,
+      fieldB: true,
+      fieldC: 'some message'
+    };
+    options.success?.(res);
+    options.complete?.(res);
+
+  } else {
+    // 返回错误
+    let failResult = new MyApiFailImpl(9010001);
+    options.fail?.(failResult)
+    options.complete?.(failResult)
+  }
+
+}
+
+/**
+ * 同步方法
+ *
+ * uni-app项目中（vue/nvue）调用示例：
+ * 1、引入方法声明 import { myApiSync } from "@/uni_modules/uts-api"
+ * 2、方法调用
+ * myApiSync(true);
+ *
+ */
+export const myApiSync : MyApiSync = function (paramA : boolean) : MyApiResult {
+  // 返回数据，根据插件功能获取实际的返回值
+  const res : MyApiResult = {
+    fieldA: 85,
+    fieldB: paramA,
+    fieldC: 'some message'
+  };
+  return res;
+}
+
+/**
+ * 更多插件开发的信息详见：https://uniapp.dcloud.net.cn/plugin/uts-plugin.html
+ */

uni_modules/uts-get-native-view/utssdk/interface.uts

+/**
+ * webview页面是否可以后退
+ */
+export type CanWebViewGoBack = (element : UniElement) => boolean
+
+/**
+ * webview页面是否可以前进
+ */
+export type CanWebViewGoForward = (element : UniElement) => boolean
\ No newline at end of file