混合开发 - 组件介绍
介绍
xWebviewU，原生组件插件，定制化，非官方的webview，而是原生重写，权限控制等非常细致。
平台兼容
| Harmony | andriod | IOS | UTS | UNIAPP-X SDK | version |
|---|---|---|---|---|---|
| ☑ | ☑️ | ☑ | ☑️ | 4.86+ | 1.1.20 |
文件路径
ts
@/uni_modules/tmx-ui/x-webview-u/使用
ts
<x-webview-u></x-webview-u>Props 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 容器高,px,%，rpx | string | 100% |
| width | 容器宽,px,%，rpx | string | 100% |
| schema | app唤起协议白名单，在此协议内允许跳转并拉起app,tel:,mailto:,sms:等协议拉起拨号盘，发邮件，发短信 | string[] | [] |
| allowLoadUrlWhite | app在跳链接时的白名单，如果域名不在此内无法跳转，如果为空则放行所有 | string[] | [] |
| allowLoadUrl | [仅安卓支持]url连接跳转时是否允许访问返回false禁止，true放行 | (url : string | null) => boolean | (url : string | null) => true |
| addInterceptor | 执行宿主的任何方法都会先经过本函数验证返回true放行，false禁止执行 | (url : string | null,name:string) => boolean | (url : string | null,name:string) => true |
| progressChanged | 页面加载时，进度百分比回调函数 | (current:number) => void | (current:number) => void |
| showLoadProgress | 是否显示加载进度条 | boolean | true |
| loadProgressColor | 加载进度条颜色 | string | #00ca6c |
| url | 加载的url | string | https://x-ui.design |
| webConfig | 用于在所有打开的页面中注入的一个数据，任何页面可以在web中执行：tmuiApp.getConfig()得到这个数据，用于在web通过数据校验等是否允许访问或者你的其它场景所使用。 | UTSJSONObject | {} |
| callMethod | 说明见下 | (message:xWebviewUCallMethodType)=>void | (message:xWebviewUCallMethodType)=>{} |
callMethod属性说明
这是一个双向通信的属性方法。
- web执行tmuijJssdk.js中的特定方法tmuijJssdk.callMethod,会触发此方法，
- 本函数中得到的参数：message
- message.data js向宿主发送的数据
- message.success(返回值数据)，在web端可以收到此方法返回的结果，tmuijJssdk.callMethod是一个异步函数会等待本方法返回结果。
- message.fail(出错信息字符串)
- 其中usccess,fail函数必须执行一个，在收到本消息后。
Events 事件
| 名称 | 参数 | 说明 |
|---|---|---|
| init | - | webview创建初始成功 |
| pageStart | (url:string|null) | 页面加载时触发 |
| pageFinish | (url:string|null) | 页面加载错误时触发 |
| pageError | (url:string|null) | 页面加载错误时触发 |
| contentheightchange | (url:number) | body高变化时触发 |
| download | (event:{url:string , userAgent:string , contentDisposition:string , mimeType:string , contentLength:number}) | 页面发起下载链接时触发 |
| postMessage | (event:{detail:string}) | web通过tmuiJssdk.postMessage向宿主app发消息时触发 |
Slots 插槽
| 名称 | 说明 | 数据 |
|---|---|---|
| - | - | - |
Ref 方法
| 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| navback | - | - | 后退 |
| refresh | - | - | 刷新 |
| forward | - | - | 前进 |
| clearCache | - | - | 强制清缓存并刷新页面 |
| setUserAgent | agent ?: string | - | 设置webview用户代理字符串 |
| getUserAgent | - | - | 返回webview用户代理字符串 |
| loadUrl | url : string | - | 加载url,只支持远程链接 |
| evaJs | jsCode : string | Promise<string | null> | 宿主执行web函数（一定要挂载到全局window下）或者代码片断，如果反过来web执行宿主app方法见属性webCallMethod |
示例文件路径
见代码仓库混合开发中的demo，apk示例：
示例源码
uvue
vue
<template>
<view class="flex-1 ">
<x-webview-u ref="webu" :url="url"></x-webview-u>
</view>
</template>
<script setup>
import { useStore } from "../store"
import { TmuiSchemaType } from "@/uni_modules/x-webview-u"
const hostUrl = useStore.hostUrl;
const webu = ref<ComponentPublicInstance|null>(null)
const url = ref(hostUrl+'cssvar')
</script>
<style>
</style>