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

这一篇主要写怎么推送订阅消息给用户，上一篇写了怎么实现订阅消息，没看的可以先看下～微信小程序订阅消息开发之云开发(一)

效果图

image

UI

image

实现逻辑

• 查询已经接受订阅消息的用户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上可以加一些发送的订阅消息的反馈

总结

以上主要分享了通过手机端发送订阅消息给用户～

如果你有好的实现方式/文章不足之处，欢迎评论纠正

扫码体验

image