uni-app接入环信客服云 easemobim

周18

已于 2023-05-03 10:47:19 修改

阅读量806

点赞数

文章标签： uni-app javascript 前端

于 2023-04-11 17:00:25 首次发布

本文链接：https://blog.csdn.net/qq_35736512/article/details/130087976

版权

需求：点击商品详情里的客服按钮，跳转（注意：不是拉起）页面，页面为客服窗口
尝试：

uni-app webview直接集成网页链接（https://106280.kefu.easemob.com/webim/im.html?configId=xxx），失败。页面空白
在index.html里，通过：
<script src='//106280.kefu.easemob.com/webim/easemob.js?configId=xxx'></script>引入，引入后：
（1）谷歌-移动端调试，客服按钮显示不出来
（2）如果在index,html引入，全局都会有按钮
（3）直接script src引入，会出现引入失败，如果使用

 var script = document.createElement('script');
script.src = "//106280.kefu.easemob.com/webim/easemob.js?configId=xxx";
document.head.appendChild(script)

浏览器会抛异常。

解决办法：

首先在static下建easemob.html。注意，只能在该文件夹下，这样不会被编译

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>在线客服</title>

    </head>
    <body>
		<p onclick='easemobim.bind({configId: "xxx"})' id='aid'></p>
		<script>
		window.easemobim = window.easemobim || {};
		easemobim.config = {
		    hide: true,
		    autoConnect: false    
		};
		</script>
		<script src='//kefu.easemob.com/webim/easemob.js'></script>
		<script>
			(()=>{
						//  兼容IE
					    if(document.all) {
					        document.getElementById("aid").click();
					    }
					    //  兼容其它浏览器
					    else {
					        var e = document.createEvent("MouseEvents");
					        e.initEvent("click", true, true);
					        document.getElementById("aid").dispatchEvent(e);
					    }
					})();
		</script>
    </body>
</html>

新建kefu.vue

<template>
  <view>
		 <web-view src="/static/easemob.html"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		components: {
		     
		},
		created(){
			
		},
		onLoad(option) {
			
		},
		onShow(){
			
		},
		methods: {
		},
	}
</script>
<style lang="scss" scoped>

</style>

3.在需要跳转客服的地方

uni.navigateTo({
					url:"/pages/shop/goods/kefu"
				})

即可实现：点击按钮跳转客服页面
在这里插入图片描述
//2023/05/01更新
真机运行，发现页面出不来，又去问了客服，web-view引入的客服地址，需要是线上的，（app端是这样，其余未测试）所以把上面写的那个打个包到h5，取下链接给web-view，重新真机运行就可以了

//2023/05/03更新
如头部为自定义的，web-view会把头部遮住。则需要改变web-view高度，设置层级是没用的，具体看下uni的文档。
如头部为pages.json里设置的，则无需设置web-view高度

周18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
uni-app接入环信客服云 easemobim

需求：点击商品详情里的客服按钮，跳转（注意：不是拉起）页面，页面为客服窗口。即可实现：点击按钮跳转客服页面。3.在需要跳转客服的地方。
复制链接

扫一扫