欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

uni-app接入环信客服云 easemobim

发布时间：2024/1/18 编程问答 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 uni-app接入环信客服云 easemobim 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

  • 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>(()=>{// 兼容IEif(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高度

    总结

    以上是生活随笔为你收集整理的uni-app接入环信客服云 easemobim的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。