企业微信内嵌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封装的方法

相关文章:
企业微信内嵌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) {r…...
微信小程序 this.setData高级用法(只更改单个数据)
合理使用 setData | 微信开放文档 1、页面 <view class"h-100px"></view> <view>最简单的数据:</view> <button bind:tap"handleAdd" data-type"1">点我加 1: {{text}}</button> &…...
使用npm发布自己的插件包
文章目录 1. 准备工作1.1 拥有一个npm账号1.2 准备你的插件代码1.3 编写package.json文件 2. 本地测试3. 发布到npm3.1 登录npm3.2 发布插件3.3 更新插件 4. 注意事项 在JavaScript和Node.js的生态系统中,npm(Node Package Manager)是一个非常…...
前端入门篇(五十二)练习6:transition过渡小动画
所以应该先找到第n个li,找到li再找img,li没有找错,底下又各自只有一个img,解决 ul li:nth-child(1) img { } 描述文字从下往上: 一开始描述也在框框下面,当hover时,translateY(0)࿰…...
scrapy模块的基础使用
scrapy模块是爬虫工作者最常用的一个模块之一,因它有许多好用的模板,和丰富的中间件,深受欢迎。 一,scrapy的安装 可以通过pypi的指引进行安装 在终端内输入以下代码: pip install scrapy 二,项目的建…...
如何在不降低网络安全防护的前提下,优化pcdn的流量清洗效率?
在不降低网络安全防护的前提下,优化PCDN的流量清洗效率是一个复杂但至关重要的任务。以下是一些建议,帮助您实现这一目标: 一.升级硬件与网络设备: 投资于高性能的硬件和网络设备,以确保流量清洗过程中的…...
linux发行版CentOS、Debian和Ubuntu的对比
一、CentOS、Debian和Ubuntu优缺点比较 CentOS、Debian和Ubuntu是目前国内云服务市场上最常见三个linux发行版本,在我们选购云服务时,要怎么选择?以下表格详细介绍了三者之间的优缺点和适用场景。 特性CentOSDebianUbuntu优点稳定性高&…...
WordPress如何删除内存中的缓存?
今天boke112百科将某篇文章修改分类和内容更新后,发现文章底部的相关文章显示的内容跟文章分类、标签毫无关系,还是显示原来的旧内容。后来查看YIA主题相关文章的代码,才发现相关文章的数据保存到内存中的,而且是永不过期…...
【XML模版文件参数初始化】
XML 模版文件,内部存在需要自定义的数据,使用 Python 进行初始化。 1、存在一个 XML 模版文件,定义如下 <!-- 文件名称 index.xml --> <root><HEAD><VER>1.0</VER><SRC>10000000000000</SRC><…...
Golang | Leetcode Golang题解之第160题相交链表
题目: 题解: func getIntersectionNode(headA, headB *ListNode) *ListNode {if headA nil || headB nil {return nil}pa, pb : headA, headBfor pa ! pb {if pa nil {pa headB} else {pa pa.Next}if pb nil {pb headA} else {pb pb.Next}}retu…...
基于FOC控制器的BLDC无刷直流电机控制系统matlab编程与仿真
目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于FOC控制器的BLDC无刷直流电机控制系统matlab编程与仿真,使用MATLAB编程实现,包括FOC控制器,clark,park等,不使用…...
ffmpeg转换视频格式
ffmpeg -i "录屏 2024-06-16 01-56-40.webm" -vf "scale1912:1070" -vcodec libx264 pit.mp4如果你觉得视频压缩速度太慢,可以尝试以下几种方法来加速视频处理: 1. 使用多线程 FFmpeg 支持多线程,可以利用多个 CPU 核心…...
设计程序,利用栈实现数值转换
二、利用栈实现数值转换,先定义一个栈的顺序存储结构,那么我们需要定义一个结构体,结构体里面有个int类型的数组,还有一个top用来存储栈顶元素的下标。栈是一种基本的数据结构,它遵循先进后出的原则。这意味着最后添加…...
QSharedMemory使用详解
QSharedMemory 是 Qt 提供的一个类,用于在多个进程之间共享内存。它可以让您在不同的进程间传递数据,而无需通过文件或网络来进行传输。下面是 QSharedMemory 的详细用法和相关知识点。 一、基本概念 共享内存:共享内存是一块可以被多个进程…...
Gartner发布2024年人工智能技术成熟度曲线:29项决定人工智能领域发展方向的前沿和趋势性技术
人工智能投资已达到新高,重点是生成式人工智能,但在大多数情况下,该技术尚未实现预期的商业价值。这项研究通过分析各种人工智能创新(其中许多创新正在快速发展),帮助人工智能领导者确定其他值得投资的技术…...
顺势而为:雷军、小米与创业成功的深层思考
一、引言 在当今快速发展的商业环境中,成功的企业家如马云和雷军,都以其独特的商业智慧和不懈的勤奋精神赢得了业界的尊重。然而,当我们深入探讨他们的成功之道时,会发现一个更为核心的因素——“顺势而为”。本文将基于雷军对不…...
Java+ffmpeg 合并两个mp4文件
使用ffmpeg测试命令 ffmpeg -i "E:\Monitor\video_20240617_10.mp4" -i "E:\Monitor\video1_20240617_10.mp4" -filter_complex "[0:v][0:a][1:v][1:a]concatn2:v1:a1[v][a]" -map "[v]" -map "[a]" -c:v libx264 -c:a…...
汽车IVI中控开发入门及进阶(三十一):视频知识扫盲
有效的视频资源管理需要集成许多不同的底层技术,共同为用户提供给定应用程序的最佳体验。其中许多技术是从早期电视广播中使用的技术演变而来的。其他方法,如用于通过网络流式传输视频的压缩方法,相对较新且不断发展。 以下详细概述了与图形和视频处理和传输相关的一些基本…...
【后端】Java学习笔记(二周目-1)
环境 安装JDK8并配置环境变量 jvm核心类库jre jre开发工具jdk Java基础运行流程,代码从上到下,从左往右,只运行一次 桌面—>新建文件夹—>新建记事本—>打开编写代码 public class Hello{public static void main(String[] arg…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
