本文中所展示的UI均通过colorui组件库实现

实现流程如下

上篇之引导用户触发订阅消息

引导用户点击订阅 UI如下

这里牵涉到三个逻辑：

• 获取用户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);
      }
    })
  }

订阅的显示与隐藏

 <view class="cu-bar bg-white solid-bottom" wx:if="{{!isAccept}}">
    <view class='action'>
      <text class='cuIcon-check text-gray'></text>订阅壁纸更新通知，享受每一天
    </view>
    <view class='action'>
      <button class="cu-btn bg-green shadow" bindtap="subscriptionNotice">订阅</button>
    </view>
  </view>

点击订阅代码如下

subscriptionNotice: function() {
    wx.vibrateShort();
    let that = this;
    let id = 'xxxxx'; // 订阅消息模版id
    if (wx.requestSubscribeMessage) {
      wx.requestSubscribeMessage({
        tmplIds: [id],
        success(res) {
          if (res[id] == 'accept') {
            //用户同意了订阅，添加进数据库，用于上面的查询checkIsAccept()需要
            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: '订阅成功'
          })
        })
      })
  }

细节处理

• 在checkIsAccept()里无论成功和失败都需要做自己页面需要的业务逻辑，比如fetchData

下篇之发送订阅消息

效果图

UI

实现逻辑

• 查询已经接受订阅消息的用户uses
• 遍历users获取openid从而推送订阅消息

wxml

<form class="padding">
  <view class="cu-form-group">
    <view class="title">日期选择</view>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2030-09-01" bindchange="DateChange">
      <view class="picker">
        {{date}}
      </view>
    </picker>
  </view>
  <view class="cu-form-group">
    <textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaInput" placeholder="多行文本输入框"></textarea>
  </view>
  <view class="padding flex flex-direction">
    <button class="cu-btn bg-blue margin-tb-sm lg" bindtap="sendMessageByClick">推送消息</button>
  </view>
</form>

data

data: {
    users: [],
    date: '2018-12-25',
    textareaValue: '',
  }

onload(进入页面开始查询接受订阅的用户)

onLoad: function(options) {
    this.getAllUsers();
},
getAllUsers: function() {
    let that = this;
    wx.showLoading({
      title: '数据加载中',
    })
    db.collection('notices').get({
      success(res) {
        console.log(res.data);
        that.setData({
          users: res.data
        }, () => {
          wx.hideLoading();
        })
      },
      fail(res) {
        console.log("请求失败", res);
      }
    })
}

点击事件

sendMessageByClick: function() {
    let {
      date,
      textareaValue,
      users
    } = this.data;
    for (let i of users) {
      this.sendMessageByCloud(i._openid, textareaValue, date)
    }
  }

发送订阅消息

sendMessageByCloud: function(id, text, date) {
    let that = this;
    wx.showLoading({
      title: '发送消息中',
    })
    wx.cloud.callFunction({
      name: 'sendMessage', // 上一篇文章中给到的云函数
      data: {
        openid: id, // 订阅消息模版参数,不同的模版参数不同
        content: text, // 订阅消息模版参数,不同的模版参数不同
        time: date // 订阅消息模版参数,不同的模版参数不同
      },
      complete: res => {
        console.log(res);
        wx.hideLoading();
      }
    })
}

细节处理

• 这里我是群发的订阅消息，当然根据不同的业务需求可以实现给单个用户发
• UI上可以加一些发送的订阅消息的反馈
• 权限控制(发送订阅消息页面)

总结

以上主要分享了用户点击订阅消息的整个流程以及怎么发送订阅消息， 如果你有好的实现方式/文章不足之处，欢迎评论纠正😊

扫码体验