当前位置: 首页 > news >正文

企业微信内嵌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>最简单的数据&#xff1a;</view> <button bind:tap"handleAdd" data-type"1">点我加 1&#xff1a; {{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的生态系统中&#xff0c;npm&#xff08;Node Package Manager&#xff09;是一个非常…...

前端入门篇(五十二)练习6:transition过渡小动画

所以应该先找到第n个li&#xff0c;找到li再找img&#xff0c;li没有找错&#xff0c;底下又各自只有一个img&#xff0c;解决 ul li:nth-child(1) img { } 描述文字从下往上&#xff1a; 一开始描述也在框框下面&#xff0c;当hover时&#xff0c;translateY(0)&#xff0…...

scrapy模块的基础使用

scrapy模块是爬虫工作者最常用的一个模块之一&#xff0c;因它有许多好用的模板&#xff0c;和丰富的中间件&#xff0c;深受欢迎。 一&#xff0c;scrapy的安装 可以通过pypi的指引进行安装 在终端内输入以下代码&#xff1a; pip install scrapy 二&#xff0c;项目的建…...

如何在不降低网络安全防护的前提下,优化pcdn的流量清洗效率?

在不降低网络安全防护的前提下&#xff0c;优化PCDN的流量清洗效率是一个复杂但至关重要的任务。以下是一些建议&#xff0c;帮助您实现这一目标&#xff1a; 一&#xff0e;升级硬件与网络设备&#xff1a; 投资于高性能的硬件和网络设备&#xff0c;以确保流量清洗过程中的…...

linux发行版CentOS、Debian和Ubuntu的对比

一、CentOS、Debian和Ubuntu优缺点比较 CentOS、Debian和Ubuntu是目前国内云服务市场上最常见三个linux发行版本&#xff0c;在我们选购云服务时&#xff0c;要怎么选择&#xff1f;以下表格详细介绍了三者之间的优缺点和适用场景。 特性CentOSDebianUbuntu优点稳定性高&…...

WordPress如何删除内存中的缓存?

今天boke112百科将某篇文章修改分类和内容更新后&#xff0c;发现文章底部的相关文章显示的内容跟文章分类、标签毫无关系&#xff0c;还是显示原来的旧内容。后来查看YIA主题相关文章的代码&#xff0c;才发现相关文章的数据保存到内存中的&#xff0c;而且是永不过期&#xf…...

【XML模版文件参数初始化】

XML 模版文件&#xff0c;内部存在需要自定义的数据&#xff0c;使用 Python 进行初始化。 1、存在一个 XML 模版文件&#xff0c;定义如下 <!-- 文件名称 index.xml --> <root><HEAD><VER>1.0</VER><SRC>10000000000000</SRC><…...

Golang | Leetcode Golang题解之第160题相交链表

题目&#xff1a; 题解&#xff1a; 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编程与仿真&#xff0c;使用MATLAB编程实现&#xff0c;包括FOC控制器&#xff0c;clark&#xff0c;park等&#xff0c;不使用…...

ffmpeg转换视频格式

ffmpeg -i "录屏 2024-06-16 01-56-40.webm" -vf "scale1912:1070" -vcodec libx264 pit.mp4如果你觉得视频压缩速度太慢&#xff0c;可以尝试以下几种方法来加速视频处理&#xff1a; 1. 使用多线程 FFmpeg 支持多线程&#xff0c;可以利用多个 CPU 核心…...

设计程序,利用栈实现数值转换

二、利用栈实现数值转换&#xff0c;先定义一个栈的顺序存储结构&#xff0c;那么我们需要定义一个结构体&#xff0c;结构体里面有个int类型的数组&#xff0c;还有一个top用来存储栈顶元素的下标。栈是一种基本的数据结构&#xff0c;它遵循先进后出的原则。这意味着最后添加…...

QSharedMemory使用详解

QSharedMemory 是 Qt 提供的一个类&#xff0c;用于在多个进程之间共享内存。它可以让您在不同的进程间传递数据&#xff0c;而无需通过文件或网络来进行传输。下面是 QSharedMemory 的详细用法和相关知识点。 一、基本概念 共享内存&#xff1a;共享内存是一块可以被多个进程…...

中电金信:保险业多项举措共绘数字化转型新篇章

...

Gartner发布2024年人工智能技术成熟度曲线:29项决定人工智能领域发展方向的前沿和趋势性技术

人工智能投资已达到新高&#xff0c;重点是生成式人工智能&#xff0c;但在大多数情况下&#xff0c;该技术尚未实现预期的商业价值。这项研究通过分析各种人工智能创新&#xff08;其中许多创新正在快速发展&#xff09;&#xff0c;帮助人工智能领导者确定其他值得投资的技术…...

顺势而为:雷军、小米与创业成功的深层思考

一、引言 在当今快速发展的商业环境中&#xff0c;成功的企业家如马云和雷军&#xff0c;都以其独特的商业智慧和不懈的勤奋精神赢得了业界的尊重。然而&#xff0c;当我们深入探讨他们的成功之道时&#xff0c;会发现一个更为核心的因素——“顺势而为”。本文将基于雷军对不…...

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基础运行流程&#xff0c;代码从上到下&#xff0c;从左往右&#xff0c;只运行一次 桌面—>新建文件夹—>新建记事本—>打开编写代码 public class Hello{public static void main(String[] arg…...

Original PIPE vs. Serdes PIPE: Understanding the Key Differences in PHY Interface Design

1. 从零理解PIPE接口&#xff1a;物理层设计的通用语言 第一次接触PIPE接口时&#xff0c;我完全被各种缩写搞晕了。直到在某个PCIe项目中被时序问题折磨了整整两周后&#xff0c;才真正明白这个接口的重要性。简单来说&#xff0c;PIPE&#xff08;PHY Interface for PCI Expr…...

SOONet效果展示:多查询并行定位——‘倒水’‘接电话’‘写笔记’三任务同步响应

SOONet效果展示&#xff1a;多查询并行定位——‘倒水’‘接电话’‘写笔记’三任务同步响应 1. 引言&#xff1a;当视频搜索变得像说话一样简单 想象一下&#xff0c;你有一段长达一小时的会议录像&#xff0c;现在需要快速找到“张三站起来发言”、“李四在白板上画图”以及…...

Windows系统优化新范式:Win11Debloat技术原理与实践指南

Windows系统优化新范式&#xff1a;Win11Debloat技术原理与实践指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简化和…...

如何用Python爬取全国空气质量监测站数据(附完整代码与避坑指南)

Python实战&#xff1a;构建高稳定性的空气质量监测数据爬虫系统 清晨打开天气应用时&#xff0c;那些跳动的PM2.5数值背后&#xff0c;是遍布全国的空气质量监测站在持续工作。作为数据分析师或环境研究者&#xff0c;直接获取这些原始监测数据往往能发现更有价值的规律。但当…...

路侧3D检测翻车实录:Rope3D数据集标签里的航向角坑,我是怎么填上的

路侧3D检测实战&#xff1a;Rope3D数据集航向角问题的深度解析与修复方案 当你在深夜盯着屏幕上那些"反向行驶"的虚拟车辆时&#xff0c;那种荒诞感会让人瞬间清醒。这不是科幻场景&#xff0c;而是我在使用Rope3D数据集进行路侧3D目标检测时遇到的真实困境——车辆航…...

brpc连接池动态调整算法:基于排队理论的设计与实现

brpc连接池动态调整算法&#xff1a;基于排队理论的设计与实现 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendat…...

基于模糊PID的水下航行器运动控制系统研究——Matlab 2016b及以上软件应用、课程报告...

基于模糊PID的水下航行器运动控制系统研究 1.适用软件Matlab 2016b及以上 2.课程报告6500字左右共16页 3.课程报告小报告仿真仿真视频 4.请结合以下图片水下航行器的运动控制一直是海洋工程领域的热门课题。面对复杂多变的洋流扰动和强非线性的水动力特性&#xff0c;传统PID控…...

Workbench与Ls-Dyna中位移与远程位移设置的关键字映射解析

1. 固定支撑的关键字映射与实战配置 在有限元分析中&#xff0c;固定支撑是最基础的边界条件之一。Workbench和Ls-Dyna对固定支撑的实现逻辑完全不同&#xff0c;但最终达到的约束效果是等效的。先看Workbench端的操作&#xff1a;在Mechanical界面右键选择Ls-Dyna环境&#xf…...

Remotery WebSocket通信机制:浏览器端性能数据可视化

Remotery WebSocket通信机制&#xff1a;浏览器端性能数据可视化 【免费下载链接】Remotery Single C file, Realtime CPU/GPU Profiler with Remote Web Viewer 项目地址: https://gitcode.com/gh_mirrors/re/Remotery Remotery作为一款轻量级实时CPU/GPU性能分析工具&…...

从SWF中提取加密通信协议:JPEXS Free Flash Decompiler安全分析报告

从SWF中提取加密通信协议&#xff1a;JPEXS Free Flash Decompiler安全分析报告 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler 在网络安全分析领域&#xff0c;SWF&#xff08;Shockwa…...