APP跳微信客服
# APP跳微信客服
注意
项目:uniapp编写的APP项目
微信客服:https://work.weixin.qq.com/kf/frame#/ (opens new window)
企业微信:https://work.weixin.qq.com/wework_admin/frame#index (opens new window)
uni-app开发的APP跳转到微信客服需要调用H5+的原生界面控件。
# 1.首页去客服网站申请一个企业微信拿到企业ID和客服URL



# 2.开启分享模块
因为用到了分享功能,所以在打包原生应用时,需要注意:首先勾选权限配置,manifest.json->App 模块权限配置->Share。然后,manifest.json->App SDK 配置->分享,按照提示填写微信分享的信息(微信开放平台,不是微信公众平台)。

# 3.因为涉及到第三方 SDK 的配置,需要运行到手机进行测试。(记得打包或者自定义基座)

# 4.相关代码:
<template>
<view class="center">
<view class="text" @click="checkWeChat">跳转到微信客服</view>
</view>
</template>
<script>
export default {
data() {
return {
sweixin: null
}
},
onLoad() {
this.getPlus()
},
methods: {
getPlus() {
//获取当前显示的webview
var pages = getCurrentPages()
var page = pages[pages.length - 1]
var currentWebview = page.$getAppWebview()
//调用H5+APP的扩展API
var shares=null;
let that = this
var pusher = plus.share.getServices(function(s){
shares={};
for(var i in s){
var t=s[i];
shares[t.id]=t;
}
that.sweixin=shares['weixin'];
}, function(e){
console.log("获取分享服务列表失败:"+e.message);
});
//放入当前的webview
currentWebview.append(pusher);
},
checkWeChat() {
//调用微信小程序
this.sweixin.openCustomerServiceChat({
corpid:'111112222', //企业ID
url:'https://www.weixin.com//' //客服URL
})
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
到这里的时候,会报个错“deeplink customerservice no permission”
,可能是id与微信开放平台还是哪个平台不一致导致(待测试)
,导致我测试不了,然后我发现微信客服url链接,在浏览器输入客服的URL链接
可以将我们带到
# 5.有了 4 的想法后,代码如下:
//客服中心
handleLinkChat() {
let wechatUrl = `客服URL`;
plus.runtime.openURL(wechatUrl, function(res) {
console.log('跳转微信客服:'+ res);
});
}
1
2
3
4
5
6
7
2
3
4
5
6
7
这样就可以打开微信客服了,但还需要去浏览器点击确认之后才能跳去微信,这样体验不好,所以我们可以使用webView
来解决这个问题,改后代码如下:
//客服中心
handleLinkChat() {
let wv = plus.webview.create("", "custom-webview", {
plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
uni-app: 'none', //不加载uni-app渲染层框架,避免样式冲突
top: 9999, //将它推到最底部,让它不展示在是窗口中
})
wv.loadURL(`客服URL`)
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
上次更新: 5/13/2023, 5:48:10 PM