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-PLUSvar 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页面

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