微信小程序订阅消息(一次性订阅消息)

1、准备工作

  • 登录微信公众平台-->订阅消息-->在公共模板库中选中一个模版-->将模版id复制,前后端都需要。
  • 点击详情-->查看详细内容模版 复制给后端

2、相关api的使用

3、前端具体代码实现(不考虑通知消息开关关闭的情况下)

javascript 复制代码
        wx.requestSubscribeMessage({
          tmplIds:['此处为模版ID'], // 订阅的模板消息 ID
          success:(res) => {
            console.log(res, '订阅res')
            // 处理用户授权结果
            if (res['此处为模版ID'] === 'accept' ) {
              // 用户同意接收订阅消息  -- 点击右侧允许按钮
              wx.showToast({
                title: '已通知',
                icon: 'success',
                duration: 2000
              });
            } else {
              // 用户拒绝接收订阅消息  -- 点击左侧拒绝按钮
              wx.showToast({
                title: '通知失败',
                icon: 'none',
                duration: 2000
              });
            }
          },
          fail: (err) => {
            console.error('订阅失败', err)
          }
        });

4、前端具体代码实现(考虑通知消息开关关闭的情况)

以下包含了一点点业务代码,可自行去除。

了解 wx.getSetting和 wx.openSetting的具体作用,以及返回各参数表示什么含义后。

javascript 复制代码
  verifyFun() {
    var _this = this
    // var deviceId = wx.getStorageSync('openid');
    if (this.data.state != null && this.data.deviceId !='') {
        //
        wx.getSetting({
          withSubscriptions:true,
          success (res) {
            console.log(res,'get中的res')
            if(res.subscriptionsSetting.mainSwitch ){
              // 执行订阅通知 调用弹窗接口
              if( res.subscriptionsSetting.itemSettings == undefined || ( res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings['模版id'] == 'accept') ){
                wx.requestSubscribeMessage({
                  tmplIds:['模版id'], // 订阅的模板消息1 ID 
                  success:(res) => {
                    console.log(res, '订阅res')
                    // 处理用户授权结果
                    if (res['模版id'] === 'accept' ) {
                    // 用户同意接收订阅消息  -- 点击右侧允许按钮
                      wx.showToast({
                        title: '已通知',
                        icon: 'success',
                        duration: 2000
                      });

                      // 请求开启弹窗
                      wx.showLoading({
                        title: '开启中',
                      })
                      verify({
                        deviceId: _this.data.deviceId
                      })
                      .then((res) => {
                        console.log(res, '点击弹窗开启')
                        wx.hideLoading()
                        _this.setData({
                          circleContent: '弹窗已开启'
                        })
                      setTimeout(() => {
                          _this.setData({
                            circleContent: '开启弹窗',
                          });
                        }, 5000)
                      })
                    } else {
                      // 用户拒绝接收订阅消息  -- 点击左侧拒绝按钮
                      wx.showToast({
                        title: '通知失败',
                        icon: 'none',
                        duration: 2000
                      });
                    }
                  },
                  fail: (err) => {
                    console.error('订阅失败', err)
                  }
                });
              }else{
                   wx.openSetting({
                      withSubscriptions:true,
                      success (res) {
                         console.log(res,' wx.openSetting(的res')
                      }
                    })
                 }
             }else{
              // 调起客户端小程序设置界面 提示用户开启通知
              wx.openSetting({
                withSubscriptions:true,
                success (res) {
                  console.log(res,' wx.openSetting(的res')
    
                }
              })
            }
          }
        })
    }
     else {
      wx.showToast({
        title: '请先扫码绑定设备',
        icon: 'none'
      })
      wx.switchTab({
        url: '/pages/scanCode/scanCode'
      })

    }
  },

/*

1、总开关关闭 调wx.openSetting 到设置页面

2、总开关打开,留言开关 关闭 用户点击拒绝 未通知 再次点击 会弹订阅弹框(不勾选 总是保持以上选择开关)

3、总开关打开,留言开关 打开 用户点击拒绝 未通知 再次点击 会弹订阅弹窗(不勾选 总是保持以上选择开关)

4、总开关打开,留言开关 关闭 用户点击拒绝 未通知 再次点击 会跳到通知设置页面,用户手动将留言通知勾选成接受(勾选 总是保持以上选择开关)再次点击 通知成功,但页面不会出现订阅弹框(正常)

5、总开关打开,留言开关 打开 用户点击拒绝 未通知 再次点击 会跳到通知设置页面,用户手动将留言通知勾选成接受(勾选 总是保持以上选择开关)再次点击 通知成功,但页面不会出现订阅弹框(正常)

*/

相关推荐
计算机毕业设计小帅28 分钟前
【2026计算机毕业设计】基于Springboot的校园失物招领小程序
spring boot·小程序·课程设计
盛夏绽放3 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠3 小时前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008895 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
小岛前端7 小时前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
cesske7 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
從南走到北10 小时前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
木易 士心16 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员17 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序