uniapp 之订阅信息

目录

前言

效果图

提示

第一步 配置 

第二步 代码

分析

 代码

后续

订阅信息 注意点

总代码

方法二 :封装


前言

小程序上线后,使用时,是没啥问题,但是呢,当小程序 某项功能干完后,没有提示,那用户怎么知道 这件事做完了没有,所以 我们就要做个 微信订阅信息提示

效果图

提示

若频繁的 调用这个方法,上面有两个模板,它有时 只会显示一个模板,若出现这种问题,不用担心,不用管它,过段时间自己就好了

这个功能总分为两部

第一步 配置 

在 功能 --->  订阅信息 ---> 我的模板  ---> 选用 

长期订阅 跟 一次性订阅 是不同的 ,长期订阅是 限制 服务类目;而一次性的是,所有的都可以使用

示意图

点击选用

示意图

第二步 代码

分析

订阅信息 这个事件 是 当用户 点击的时候触发 或者 是 支付成功后触发

tmplIds : 是 模板 id

官网

 代码

 subScribeMsg() { // 订阅信息
        uni.getSetting({
          withSubscriptions: true,
          success(res) {
            console.log('1', res.subscriptionsSetting);
            if (!res.subscriptionsSetting.mainSwitch) {
              uni.openSetting({ //打开设置页
                success(res) {
                  console.log(res.authSetting);
                }
              })
            } else {
              uni.requestSubscribeMessage({
                tmplIds: ['UyBPbADlZfsCj89rh_xvfZGlxTW5J5KURpZtt9CNFrY',
                  'BGgZe98QHr0I1S1GrtGps5_rLX6n9cW1AsXhL4YkHHc',
                ],
                success(res) {
                  console.log(res);
                  if (res['BGgZe98QHr0I1S1GrtGps5_rLX6n9cW1AsXhL4YkHHc'] == "accept") { // 用户点击确定后
                    console.log('1111');
                  }
                }
              })
            }
          }
        })
      },

后续

订阅信息 注意点

1. 订阅信息 只能在点击事件 或 支付回调中使用,

但 在点击事件中要注意 要先执行 订阅信息 requestSubscribeMessage 后在执行 其他点击事件 触发的方法否则会报

requestSubscribeMessage:fail can only be invoked by user TAP gesture

只能被用户点击实现

 2.当初因 uni.getSetting 成功后的  判断条件写错了,导致 它未能执行 requestSubscribeMessage方法,

43101 user refuse to accept the msg rid: 5f7184ff-5448020d-6384be15。

亲测有效 可以直接使用

总代码

 subScribeMsg() {
        var that = this
        uni.getSetting({
          withSubscriptions: true,
          success(res) {
            console.log('1', res, '订阅信息', res.subscriptionsSetting);
            if (!res.subscriptionsSetting.mainSwitch) {
              uni.openSetting({ //打开设置页
                success(res) {
                  console.log('打开设置页', res.authSetting);
                }
              })
            } else {
              uni.requestSubscribeMessage({
                tmplIds: ['UyBPbADlZfsCj89rh_xvfZGlxTW5J5KURpZtt9CNFrY',
                  'BGgZe98QHr0I1S1GrtGps5_rLX6n9cW1AsXhL4YkHHc',
                ],
                success(res) {
                  console.log('requestSubscribeMessage 订阅信息', res);
                  if (res['BGgZe98QHr0I1S1GrtGps5_rLX6n9cW1AsXhL4YkHHc'] == "accept") { // 用户点击确定后
                    console.log('用户订阅点击确定按钮');
                    // that.getSubMsg()
                  } else {
                    console.log('拒绝');
                  }
                },
                fail(errMessage) {
                  console.log("订阅消息 失败 ", errMessage);
                },
                // 不管成功或失败都要执行
                complete() {
                  if (that.ordercode == null) return that.getOrder();
                  if (that.ordercode != null) return that.getPayOrder();
                }
              })
            }
          },
        })
      },

可以把 点击事件 放在 complete 里,that.getSubMsg() 是调用后端接口,控制发服务通知的时间,

我这个项目 点击事件里

  1. 先执行 this.subScribeMsg()方法,点击requestSubscribeMessage事件 显示弹窗,
  2. 不管这个方法成功或失败都让它执行下面其他请求,
  3. 请求成功后 跳转其他页面(中间栈页面)
  4. 在中间栈页面 判断事件是否成功,成功的话 传递code,调用后端 服务通知 接口,
  5. 服务通知 会在 这个事件 成功后发送至微信,微信上显示

方法二 :封装

因项目其他某个地方也需要使用订阅方法,因此封装订阅方法

我的是在common  → userInfo.js,文件中封装的

function subScribeMsg() {
  return new Promise((resolve, reject) => {
    uni.getSetting({
      withSubscriptions: true,
      success(res) {
        console.log('1', res, '订阅信息', res.subscriptionsSetting);
        if (!res.subscriptionsSetting.mainSwitch) {
          uni.openSetting({
            success(res) {
              console.log('打开设置页', res.authSetting);
            }
          })
        } else {
          uni.requestSubscribeMessage({
            tmplIds: ['BGgZe98QHr0I1S1GrtGps0y3uhvURtQNkbMAzI2D8g8',
              'UyBPbADlZfsCj89rh_xvfR2ZP1iwtmPcMFA0sUOJwog',
            ],
            success(res) {
              console.log('requestSubscribeMessage 订阅信息', res);
              resolve(res)
              if (res['UyBPbADlZfsCj89rh_xvfR2ZP1iwtmPcMFA0sUOJwog'] == "accept") { // 用户点击确定后
                console.log('用户订阅点击确定按钮');
                // that.getSubMsg()
              } else {
                console.log('拒绝');
              }
            },
            fail(errMessage) {
              reject(errMessage)
              console.log("订阅消息 失败 ", errMessage);
            },
            complete() {
              // if (that.ordercode == null) return that.getOrder(appoint);
              // if (that.ordercode != null) return that.getPayOrder(appoint);
              // that.startDisabled = false
            }
          })
        }
      },
    })
  })
}


module.exports = {
  subScribeMsg
}

 项目中调用

import {
    subScribeMsg
  } from '@/common/userInfo.js'


// 点击时触发订阅信息
async aClick(){

    await subScribeMsg()

     if (this.ordercode == null) return this.getOrder();
     if (this.ordercode != null) return this.getPayOrder();

}

备注(封装订阅方法,使用return new Promise 以及 点击触发订阅信息中使用  await subScribeMsg() ,是为了让用户点击订阅弹窗中的取消或确定按钮后执行下面的操作)否则 不等用户点击它就直接执行后面的操作

猜你喜欢

转载自blog.csdn.net/LJM51200/article/details/128575773