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

编程问答

uni-app接入环信客服云 easemobim

發布時間：2024/1/18 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java itext7 生成pdf及电子
下一篇：【图像传感器】--- 半导体中的光电转换