Zwx's blog Zwx's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 工作笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档

Zwx

Aal izz well 一切顺利
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 工作笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

  • 工作笔记

    • APP跳微信客服
      • 1.首页去客服网站申请一个企业微信拿到企业ID和客服URL
      • 2.开启分享模块
      • 3.因为涉及到第三方 SDK 的配置,需要运行到手机进行测试。(记得打包或者自定义基座)
      • 4.相关代码:
      • 5.有了 4 的想法后,代码如下:
    • H5微信支付跳转问题
    • H5支付宝跳转问题
    • css
    • npm
    • ts
    • uniapp
    • vue
    • vue响应式插件
    • 其他
    • node版本包管理-n
    • react路由严格模式问题
    • react Router嵌套路由不生效
    • GIT 遇到问题
    • 在 M1 芯片 Mac 上使用 Homebrew
  • 模板

  • 日常记录

  • 技术
  • 工作笔记
Zwx
2021-01-16
0

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)

HTML5+API:https://www.html5plus.org/doc/zh_cn/share.html#plus.share.ShareService.openCustomerServiceChat (opens new window)

uni-app开发的APP跳转到微信客服需要调用H5+的原生界面控件。

# 1.首页去客服网站申请一个企业微信拿到企业ID和客服URL


image-20211227161441864 image-20211227161501805 image-20211227161805842



# 2.开启分享模块

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

image-20211227160400682

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


image-20211227160601739



# 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

到这里的时候,会报个错“deeplink customerservice no permission”,可能是id与微信开放平台还是哪个平台不一致导致(待测试),导致我测试不了,然后我发现微信客服url链接,在浏览器输入客服的URL链接可以将我们带到

image-20211227162107559image-20211227162049173



# 5.有了 4 的想法后,代码如下:

//客服中心
handleLinkChat() {
	let wechatUrl = `客服URL`;
    plus.runtime.openURL(wechatUrl, function(res) {
    	console.log('跳转微信客服:'+ res);
    }); 
}
1
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
上次更新: 5/13/2023, 5:48:10 PM
vdoing主题效果图
H5微信支付跳转问题

← vdoing主题效果图 H5微信支付跳转问题→

最近更新
01
在 M1 芯片 Mac 上使用 Homebrew
11-08
02
GIT 遇到问题
11-06
03
react Router嵌套路由不生效
10-27
更多文章>
Theme by Vdoing | Copyright © 2019-2023 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×