企业微信内嵌H5项目接入聊天功能

产品需求是,在列表中把符合条件的列表接入聊天功能,以下是详细步骤:

1.引入企业微信

<script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>

 2.获取wx签名(必须要)

/*** 获取wx签名**/
export function getWxJsApi(data) {return request({url: '/js-sdk',method: 'post',data})
}

3.封装组件(两个)

wxConfig.js

import {getWxJsApi} from "@/api/arrives";export const wxConfig = async (url, jsApiList, jsApiListChat) => {try {let res = await getWxJsApi({url});if (res && res.status === 200) {const { corpId, nonceStr, signature, timeStamp } = res.datawx &&wx.config({beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: corpId, // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用timestamp: timeStamp, // 必填,生成签名的时间戳nonceStr, // 必填,生成签名的随机串signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法jsApiList,});wx &&wx.ready(() => {if (jsApiListChat) {getWxJsApi ({url}).then(result => {if (res.status === 200) {wx.agentConfig({beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: result.data.corpId, // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用timestamp: result.data.timeStamp, // 必填,生成签名的时间戳nonceStr: result.data.nonceStr, // 必填,生成签名的随机串signature: result.data.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法jsApiList:jsApiListChat});}})}wx.error(function() {console.log('error');});});}} catch(error) {} 
}

mixin.js

import {wxConfig} from '@/utils/wxConfig'
const chatMixin = {mounted() {let url = location.hrefwxConfig(url, ['openEnterpriseChat','checkJsApi'], ['selectExternalContact', 'getCurExternalContact'])},methods: {wxEnterpriseChat (obj) {wx &&wx.checkJsApi({jsApiList: ['openEnterpriseChat'],success: function (res) {wx.openEnterpriseChat({...obj,groupName: '',chatId: "",success: function(res) {var chatId = res.chatId;// 回调},fail: function(res) {if(res.errMsg.indexOf('function not exist') > -1){alert('版本过低请升级')}}})},fail: function(error) {console.log(error)}})}}
}export {chatMixin}

4.页面上使用

<1>引入

import {chatMixin} from "@/utils/mixin";
export default {mixins: [chatMixin],
}

html

<div class="right-customer-detail flex" v-if="enterpriseWeChatUserId == item.userAccountId && item.externalUserId"><imgsrc="https://static-resource.dossen.com/H5/marketing/img/wechat.png"class="wechat-img"@click.stop="() => testChat(item.externalUserId)"/></div>

methods:

 testChat(externalUserIds) {let obj = {externalUserIds}this.wxEnterpriseChat(obj)},

已结束

备注: 

这里的this.wxEnterpriseChat就是上面mixin.js封装的方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/362292.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在信创领域中做好防泄露

随着信息技术的迅猛发展&#xff0c;数据安全和防泄露成为了企业和政府机构面临的重大挑战。在信创&#xff08;Creative and Innovative Intelligent Products&#xff09;领域中&#xff0c;沙箱技术以其独特的隔离和保护机制&#xff0c;成为了防泄露的关键手段之一。 一、沙…

上古世纪战争台服官网地址+台服预约+预创建角色教程

上古世纪战争台服上线啦&#xff0c;在《上古世纪战争》中&#xff0c;通过主要势力和地区&#xff0c;剧情和角色可以想起原作。《上古世纪战争》的主要背景为&#xff0c;原大陆消失之后&#xff0c;完成移民的种族们定居在诺伊大陆之后遇到的多个势力之间的冲突。同时&#…

鸿蒙期末项目(4)

day4 页面的设计与编写基本完成&#xff0c;接下来使用我们之前搭建好的服务器与相关的网络接口将鸿蒙中的逻辑真正实现一下。 在实现购物车页面展示功能时&#xff0c;使用了如下代码&#xff1a; getCartList(uid: number): Promise<CartItem[]> {return new Promise…

MTK平台Android13实现三方launcher为默认

一、前言 目前有遇到客户的定制需求,希望使用三方的launcher作为默认的launcher使用,一般情况下直接将三方launcher通过内置到系统并通过overlay机制即可很方便的实现launcher的替换,但是存在一个问题,需要增加ROM的维护成本。本文通过设备在使用前联网通过后台下发三方lau…

基于SpringBoot的财务管理系统

根据您提供的论文内容和模板要求&#xff0c;以下是定制化的文章输出&#xff1a; 你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; SpringBoot…

沙龙圆满举行 | 数据资产入表新动向·驱动企业新质生产力!

近日&#xff0c;由四川智慧城市发展联盟、璞华科技有限公司等公司主办的“数据治理与入表专题沙龙会”在成都圆满落幕。璞华科技有限公司作为数据治理、数据资产入表领域的领军企业&#xff0c;为此次盛会贡献了我们的专业见解与实战经验。 沙龙现场&#xff0c;业内精英齐聚一…

Redis优化之持久化

目录 1.Redis高可用 2.Redis持久化 2.1 RDB持久化 2.1.1 触发条件 2.1.2 执行流程 2.1.3 启动时加载 2.2 AOF持久化 2.2.1 开启AOF 2.2.2 执行流程 2.2.3 文件重写触发方式 2.2.4 文件重写的流程 2.2.5 启动时加载 2.3 RDB和AOF的优缺点 3.Redis性能管理 3.1 查看…

btrace使用记录

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 未经允许不得转载 目录 一、导读二、使用三、 推荐阅读 一、导…

Vivo手机怎么录屏?分享2种录屏方法

“新换的Vivo手机还挺好用的&#xff0c;但是今天看到一个视频想录下来保存&#xff0c;但找不到录屏功能啊&#xff0c;想问问大家Vivo手机的录屏功能怎么打开啊&#xff1f;还有Vivo手机能不能录制出高质量的视频呢&#xff1f;” 随着智能手机的普及&#xff0c;录屏功能已…

C++系统编程篇——Linux第一个小程序--进度条

&#xff08;1&#xff09;先引入一个概念&#xff1a;行缓冲区 \r和\n \r表示回车 \n表示回车并换行 ①代码一 #include<stdio.h> #include<unistd.h> int main()…

深度学习 --- stanford cs231学习笔记五(训练神经网络之数据的预处理)

数据的预处理(Data Preprocessing) 2 Data Preprocessing数据的预处理 数据预处理的几种方法 2&#xff0c;1 数据的零点中心化 数据的零点中心化的目的就是为了把数据的整体分布拉回到原点附近&#xff0c;也就是让数据的整体均值变为0。 ​ 2&#xff0c;2 数据的标准化 数据…

必应bing搜索广告投放介绍,投放的广告形式和效果

必应Bing搜索广告以其独特的市场定位、高质量的用户群体和强大的全球覆盖能力&#xff0c;成为众多企业拓展业务、提升品牌影响力的重要渠道。作为微软旗下的一款搜索引擎&#xff0c;必应不仅在美国市场占据重要份额&#xff0c;其在全球范围内的影响力也不容小觑。对于寻求国…

数据资产与云计算深度融合:借助云计算技术,优化数据存储、高效处理并创新应用,驱动企业数字化转型

目录 一、引言 二、数据资产与云计算深度融合的必要性 1、数据资产的重要性 2、云计算技术的优势 三、云计算技术在数据资产管理中的应用 1、数据存储的优化 2、数据处理的高效性 3、数据应用的创新 四、云计算驱动企业数字化转型的实践案例 案例一&#xff1a;金融行…

Docker(九)-Docker运行redis6.0.8容器实例

1.宿主机新建目录存放redis.conf文件 目的&#xff1a;运行redis容器实例时使用自己的配置文件2.运行redis容器实例 docker run -d -p 6379:6379 --privilegedtrue -v 【宿主机配置文件目录】:/etc/redis/redis.conf -v 【宿主机数据目录】:/data --nameredis6.0.8 redis:6.0…

神经网络实战2-损失函数和反向传播

其实就是通过求偏导的方式&#xff0c;求出各个权重大小 loss函数是找最小值的&#xff0c;要求导&#xff0c;在计算机里面计算导数是倒着来的&#xff0c;所以叫反向传播。 import torch from torch.nn import L1Lossinputstorch.tensor([1,2,3],dtypetorch.float32) targe…

驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接的解决方法

在连接数据库的时候出现了下面图面中的错误&#xff0c;尝试集中方法后终于解决了这个问题。 1.修改驱动程序版本 出现这种错误可能是因为你的驱动程序版本不兼容&#xff0c;我们可以尝试修改版本解决。而我们的驱动程序往往是以依赖的形式导入&#xff0c;因此可以在maven仓…

实际项目开发:Spring集成Redis,并实现短信登录功能

redis新手&#xff0c;学了几种基本数据类型&#xff0c;却不知道怎么使用&#xff1f; 总是一边学一边忘&#xff1f; 学会了Redis的大多数使用命令&#xff0c;却不知道如何在项目中使用&#xff1f; 本文将从实际出发&#xff0c;为大家解决这些问题。 我是蚊子码农&#xf…

初学51单片机之长短键应用定时炸弹及扩展应用

51单片机RAM区域划分 51单片机的RAM分为两个部分&#xff0c;一块是片内RAM&#xff0c;一块是片外RAM。 data&#xff1a; 片内RAM从 0x00 ~0x7F 寻址范围&#xff08;0-127&#xff09; 容量共128B idata: 片外RAM从 0x00~0xFF 寻址范围(0-255) 容量共256B pdata&am…

昇思25天学习打卡营第1天|初学教程

文章目录 背景创建环境熟悉环境打卡记录学习总结展望未来 背景 参加了昇思的25天学习记录&#xff0c;这里给自己记录一下所学内容笔记。 创建环境 首先在平台注册账号&#xff0c;然后登录&#xff0c;按下图操作&#xff0c;创建环境即可 创建好环境后进入即可&#xff0…

基于elastic stack的docker-compose部署的ELK与LDAP集成

说明&#xff1a; ldap信息配置到es配置文件上&#xff0c;然后kibana读取es的配置信息 用户与角色的关系通过role_mapping.yml文件配置获取 角色与权限的关系通过elastic stack提供的DevTools或API进行维护 一、前置条件&#xff1a; 1.1 es已开启xpack&#xff08;已开启…