uniapp开发APP 客服链接

uniapp开发APP嵌套第三方(米多客)客服链接,遇到了无法返回的问题

米多客的客服也回复很及时,发了一种解决方法

 详细描述问题

(记不清在哪看到一句话: 详细的描述出遇到的问题,问题就解决一大半了.)

我把三方链接直接放入webview里面,最初用h5调试,三方里有顶部导航栏和返回按键,于是隐藏了webview页面的顶部导航栏  "navigationStyle": "custom",

也是由于用h5调试,三方链接里的导航栏返回键一直没问题,所以一直没发现

手机app调试却出现问题,返回不了,同时@message也监听不到任何数据

于是客服发了一个html文件

解决方案

 此处两个方案,1.客服发的链接,2.经理提的修改方案

方案1.

webview里的链接用本地html文件,

 

//webview.vue
<template>
	<view>
		<web-view src="/hybrid/html/local.html"></web-view>
	</view>
</template>

客服链接点开是这样

点击在线咨询进入到聊天链接,点返回能返回上图页面了

    <input type="button" value="在线咨询" onclick="start();" style="position:absolute;left:100px; top:100px;" />
    <iframe src="" id="frame" width="100%" height="100%" style="display:none;left:0;top:0;position:fixed"></iframe>
<script type="text/javascript">
        function start() {
            var iframe = document.getElementById('frame');
            //聊天连接要修改为企业自己的
            iframe.src = "https://mamlive.***.com/Web/im.aspx?_=t&accountid=***";
            iframe.style.display = 'block';
        }

        //关键代码，接收对话窗口关闭时的消息通知
        window.addEventListener('message', function (e) {
            if (e.data.action && e.data.action == 'close') {
                document.getElementById('frame').style.display = 'none';
            }
        }, false);
</script>

 看到这里,去查官方文档webview相关内容,才知道h5里的webview其实是iframe内核,而APP却不是,要先新建iframe才可以监听到iframe返回.

原生HTML不熟练,最终效果没达到...后续再完善吧

方案2. 经理提的修改方案,不隐藏原生的vebview页面的顶部导航栏,让导航栏返回键覆盖三方返回键

		onReady() {
			// #ifdef APP-PLUS
			 var w=plus.webview.create('https://mamlive.***.com/Web/im.aspx?_=t&accountid=***','id',{ top:0, height:uni.getSystemInfoSync().screenHeight },{preload:'preload webview'}); // 可直接通过以下方法获取preload值
			 var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
			 currentWebview.append(w);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
			// #endif
		},

点返回,三方的提示框不会弹出,直接退出webview页面

顺便调一下导航栏颜色和三方聊天框颜色,此处占了一个便宜(没有要求标题是活的)