uniapp 写H5页面的时候,实现公众号(服务号)订阅通知的消息推送,使用微信JS-SDK,中的wx-open-subscribe

本文主要是介绍uniapp 写H5页面的时候,实现公众号(服务号)订阅通知的消息推送,使用微信JS-SDK,中的wx-open-subscribe,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先看效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
首先我是uniapp写的H5页面,挂在别人的小程序上面

不废话,说一下步骤:

第一步:安装微信SDK
第二步:配置SDK环境
第三步:使用wx-open-subscribe(这是重点)
这里头有后端开发人员的支持
来,上代码:

第一步:安装SDK

npm install jweixin-module

使用的时候:

// 先引入
//#ifdef H5
var jweixin = require("jweixin-module");
// #endif

第二步、配置环境 和 第三步


//创建一个方法/*** 配置信息--微信SDK* */getCofig() {const url = location.href.split("#")[0];uni.request({url: "/nj-fpyj/wechat/getJSConfig", //后端提供的接口method: "post",data: {url: url,},success: (res) => {// alert(JSON.stringify(res) + "请求API");if (res) {jweixin.config({debug: true, // 开启调试模式,appId: res.data.result.appId, // 必填,企业号的唯一标识timestamp: res.data.result.timestamp, // 必填,生成签名的时间戳nonceStr: res.data.result.nonceStr, // 必填,生成签名的随机串signature: res.data.result.signature, // 必填,签名jsApiList: ['wx-open-subscribe',"scanQRCode"], // 必填,需使用的JS接口列表openTagList: ['wx-open-subscribe']//非必填,但是要使用wx-open-subscribe就写上});jweixin.ready(() => {console.log("配置完成,扫码前准备完成");alert(res.errMsg + "配置完成,扫码前准备完成");// wx-open-subscribe 原生绑定点击事件this.$nextTick(() => {const btn = this.$refs.subscribeBtn;btn.addEventListener('success', ({detail}) => {// this.content2 = JSON.parse(detail.subscribeDetails)alert('授权成功'+ JSON.parse(detail.subscribeDetails))//..........然后对接后端的接口,让后端推送消息就行});btn.addEventListener('error', (e) => {alert('授权失败了,请重试')});})});jweixin.error(function (res) {//wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。console.log("出错了:" + res.errMsg);alert(res.errMsg + "配置失败");});} else {console.log("获取配置信息返回为空");alert("获取配置信息返回为空")}},fail: (error) => {console.log(error, "请求获取微信配置失败");alert(error, "调用接口失败")},});},

需要注意的是:

1、一定要在公众号后台配置业务域名和js域名和网页域名

在这里插入图片描述

2、一定要在该域名的环境下进行测试(我是打包项目部署到该域名的服务器下)

3、 一定要真机调试,不能是电脑的微信客户端或者开发者工具,要不然出现的问题千奇百怪

这篇关于uniapp 写H5页面的时候,实现公众号(服务号)订阅通知的消息推送,使用微信JS-SDK,中的wx-open-subscribe的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/918393

相关文章

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态