企微JSSDK的引入以及简单使用

使用

在可以到官网下载jssdk 放入到文件目录(我是放在src/components/jweixin-1.0.0.js)中下的

在使用的页面进入引入

javascript 复制代码
<script>
import wx from '@/components/jweixin-1.0.0.js'
//在使用之前 还需要对wx这块进行权限注入(签名认证等)这块可以单独定义在一个js文件中 然后引入使用
import checkWxJssdk from '@/components/checkWxJssdk.js';
export default {
		methods: {
		text(){ 
			//_appid, _timestamp, _nonceStr, _signature,initData 这些数据从后台拿
			checkWxJssdk(_appid, _timestamp, _nonceStr, _signature,initData)
			wx.ready(function () {
					wx.invoke('sendChatMessage', {
					    msgtype:"news", //消息类型,必填
						news:
						{
							link:url, //H5消息页面url 必填 动态传入
							title: "请点击链接完成入组问卷", //H5消息标题
							desc: "获得完整的病程管理服务", //H5消息摘要
							imgUrl: "http://cloud-h5.ruiyudtx.com/images/artwordsend/2024/01/08/1744223672752803840.jpg", //H5消息封面图片URL
						}
					}, function(res) {
						if (res.err_msg == 'sendChatMessage:ok') {
							//发送成功
							console.info("getContext:" + JSON.stringify(res))
						}
					})
				})
			}
			
		}
</script>

//components/checkWxJssdk.js

javascript 复制代码
async function wxCorpJsConfig(_appid, _timestamp, _nonceStr, _signature,initData) {
		var that = this;
		wx.config({
			beta: true,
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。   
			appId: _appid, // 必填,公众号的唯一标识
			timestamp: _timestamp, // 必填,生成签名的时间戳
			nonceStr: _nonceStr, // 必填,生成签名的随机串
			signature: _signature, // 必填,签名
			jsApiList: [
				'chooseImage',
				'sendChatMessage'
				
			] // 必填,需要使用的JS接口列表
		});
		// config信息验证后会执行ready方法,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
		wx.ready(function(res) {
			console.log('走ready?')
			wx.checkJsApi({
				jsApiList: ['chooseImage','getContext','getCurExternalContact','sendChatMessage'],
				success: function(res) {
					// alert('成功');
					console.info("success:" + JSON.stringify(res))
				}
			});
		});
		//config信息验证失败会执行error函数
		wx.error(function(res) {
			//alert("error:" + res.errMsg);
			console.info("error:" + JSON.stringify(res))
		});
}

企微的官方文档地址:

https://developer.work.weixin.qq.com/document/path/90514

相关推荐
名字还没想好☜2 小时前
Next.js App Router 数据获取:fetch 缓存、revalidate 与 dynamic 一次讲清
前端
成都渲染101云渲染66666 小时前
如何在3ds Max中实现更快、更高质量的渲染
前端·javascript·人工智能
闲猫8 小时前
Spring AI 对接Deepseek ChatModel 聊天对话
java·前端·spring
自信的未来10 小时前
JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
java·前端·json
SRET10 小时前
Mineradio 沙盒隔离安装完全指南 | 一键安全运行 Electron 应用!!!
javascript·经验分享·安全·electron·aigc·音视频·ai编程
全栈前端老曹10 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
zhangxingchao11 小时前
AI大模型核心八:从 Agent Skill、长文档 RAG 到知识库更新与训练策略
前端·人工智能·后端
zhangxingchao12 小时前
AI大模型核心七:从 Workflow、RAG、记忆治理到幂等性
前端·人工智能·后端
gyx_这个杀手不太冷静12 小时前
Agent开发进阶指南(第 1 章):AI Agent 到底是什么?
前端·agent·ai编程
小小小小宇13 小时前
模型相关知识
前端