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

相关文章

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window