微信小程序订阅消息开发之云开发(一)

实现流程如下

image

引导用户点击订阅 UI如下

这里使用的是colorui组件库，很棒，这里是个参考

image

这里牵涉到三个逻辑：

• 获取用户openid
• 查询用户是否订阅(包括订阅消息的显示与隐藏)
• 点击订阅

data

 data: {
    isAccept: true,// 防止静态先显现出来，你也可以添加loading判断
    openid: '' // 当前用户openid
  },

获取用户openid

微信云开发提供免登录即可获取用户openid cloud.getWXContext() ，微信官方订阅消息文档

// 进入页面立即查询用户openid
onLoad: function(options) {
    this.getOpenid();
}
  
  
getOpenid:function() {
    let that = this;
    wx.showLoading({
      title: '数据加载中',
    })
    wx.cloud.callFunction({
      name: 'getOpenid',
      complete: res => {
        console.log('云函数获取到的openid: ', res.result.OPENID)
        var openid = res.result.OPENID;
        that.setData({
          openid: openid
        },()=>{
        // 检测用户是否已经订阅
          this.checkIsAccept(openid)
        })
      }
    })
  }
  
// getOpenid 云函数
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = (event, context) => {
    const wxContext = cloud.getWXContext()
        return {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
    }
}

查询用户是否订阅

checkIsAccept:function(id){
    let that = this;
    db.collection('notices').where({_openid:id}).get({
      success(res) {
        if(res.data.length = 0){
          that.setData({
            isAccept:true
          })
        }
      },
      fail(res) {
        console.log("请求失败", res);
        that.fetchList();
      }
    })
  }

订阅的显示与隐藏

 
    
      订阅壁纸更新通知，享受每一天
    
    
      订阅
    
  

点击订阅代码如下

subscriptionNotice: function() {
    wx.vibrateShort();
    let that = this;
    let id = 'xxxxx'; // 订阅消息模版id
    if (wx.requestSubscribeMessage) {
      wx.requestSubscribeMessage({
        tmplIds: [id],
        success(res) {
          if (res[id] == 'accept') {
            //用户同意了订阅，添加进数据库
            that.addAccept(that.data.openid)
          } else {
            //用户拒绝了订阅或当前游戏被禁用订阅消息
            wx.showToast({
              title: '订阅失败'
            })
          }
        },
        fail(res) {
          console.log(res)
        },
        complete(res) {
          console.log(res)
        }
      })
    } else {
    // 兼容处理
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  }
  
  // 用户点击订阅添加到数据库
  addAccept: function(_id) {
    db.collection('notices')
      .add({
        data: {
          id: _id
        }
      })
      .then((res) => {
        console.log('入notices库成功', res);
        this.setData({
          isAccept: true
        }, () => {
          wx.showToast({
            title: '订阅成功'
          })
        })
      })
  }

总结

以上主要分享了用户点击订阅消息的整个流程以及实现逻辑，我会在下一篇文章里写到怎么推送订阅消息给到用户，敬请期待

扫码体验

image