混合开发 - WEB全局方法

前提

在阅读本文前，你要先把你的网页应用嵌套在uniappx中的x-webview-u组件内浏览器应用， 并在你的应用中引入好tmuiJssdk.js，才能继续往下看。

宿主的方法

下面的方法是宿主原生方法，并且可全局使用，如果你是ts开发，预览类型提示错误， 你可查看下一章jssdkApi介绍。

名称	参数	返回值	说明
tmuiApp.toast	(message : string)	-	系统提示
tmuiApp.refresh	-	-	刷新网页
tmuiApp.clearCache	-	-	清除缓存并强制刷新，对于需要更新页面内容时非常有用
tmuiApp.navback	-	-	回退网页
tmuiApp.forward	-	-	前进网页
tmuiApp.postMessage	(arg:string)	-	向宿主app发送消息

web全局方法

下面的方法

名称	参数	返回值	说明
tmuiJssdk	-	-	jssdk方法合集见jssdk介绍，引入sdk后即可调用，有类型提示。
uni	-	-	只有在tmui3.2 web vue组件被引入才可使用。
tmuiAppTheme	-	-	宿主的CSS变量js对象见栏目：css变量，是宿主在你网页载入前主动注入一段js到你的页面中的方法。

web与宿主通信

web向宿主发送消息

使用前面介绍的宿主方法在js中：tmuiApp.postMessage(发送的消息)；

这是单向通信，无回调。

宿主组件中：

<x-webview-u @postMessage="postMessage" ></x-webview-u>

// 收到web的消息。
const postMessage = (arg:uniAppPostmessageType) =>{
	console.log(arg.detail)
}

宿主向web发送消息

这是单向通信，无回调。

<x-webview-u ref="webu"></x-webview-u>

const webu = ref<ComponentPublicInstance|null>(null)
// 向web发消息
const postMessage = (arg:uniAppPostmessageType) =>{
	//这里执行web中的一个全局方法
	webu.value?.$callMethod('evaJs',`uni.showToast(${JSON.stringify({title:'Hi喽',icon:'none'})})`)
}

web执行宿主方法并获取返回值

这是双向通信，web执行宿主方法后，得到宿主的执行结果；

通过这个方法，你可以向宿主发消息，并在宿主执行任何函数，以此来拓展web执行宿主方法的事件机制

因为你执行后可以得到结果。

在web中如下执行方法 ：

const callMethod = async ()=>{
	const result = await tmuiJssdk.callMethod('任意数据');
	//失败还是成功，返回什么数据由宿主决定。
	console.log(result)
}

宿主响应tmuiJssdk.callMethod方法并返回结果。

<x-webview-u :callMethod="callMethod"></x-webview-u>

import { uniAppPostmessageType,xWebviewUCallMethodType } from "@/uni_modules/x-webview-u";

const callMethod = (message:xWebviewUCallMethodType)=>{
	// 这里可以得到上步web的值
	message.data //就是上步tmuiJssdk.callMethod方法中的参数，这里可以取到。
	//你可以通过自定义的这个消息体来执行你的任何业务逻辑
	// 执行后把结果返回给web
	// 下面的两个方法只要执行其中一个就行，收到消息后一定要执行其中的一个。不然可能会内存泄露。
	message.success('结果返回给web')
	message.fail('错误返回给web')
}

WEB拦截

<input type="file" />如果在混合中使用它,会自动调用宿主应用的选择器。它是按照w3c规范，可以使用相机或者相册 得到媒体文件，也可以选择仅相机或者仅相册获取媒体文件。已经被x-webview-u组件拦截替换为系统自带的选择器。

其它拦截：

拨号 tel://协议

发送邮件 mailto://协议

sms发短信 sms://协议

应用schem唤起 应用://协议 （如微信小程序拉起 weixin://dl/business/?appid=你的appid ）

其它权限控制见x-webview-u组件。