需求:点击商品详情里的客服按钮,跳转(注意:不是拉起)页面,页面为客服窗口
尝试:
- 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高度