步骤一:获取模板 ID

在微信公众平台手动配置获取模板 ID:

登录 https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用。

java实现小程序推送订阅消息 小程序订阅消息开发_前端

步骤二:请求用户授权

一次性订阅消息、长期订阅消息,详见接口 wx.requestSubscribeMessage

接口使用示例:

用户点击后弹出授权窗口

<button bindtap="authorize" type='primary'>获取订阅消息授权</button>
//获取授权的点击事件
   authorize: function() {
    wx.requestSubscribeMessage({
      tmplIds: ['uIfV2rNcN4zurV6A0PfU1nPIR2IIdx-3thfhM1E'], //这里填入我们生成的模板id
      success(res) {
        console.log('授权成功', res)
      },
      fail(res) {
        console.log('授权失败', res)
      }
    })
  },

在开发者工具模拟器上点击授权弹窗是这样的:

java实现小程序推送订阅消息 小程序订阅消息开发_推送消息_02

在手机上的授权弹窗是这样的:

java实现小程序推送订阅消息 小程序订阅消息开发_javascript_03


这里用户允许后,我们就可以给用户推送消息了,接下来我们来借助云开发的云函数来实现消息推送功能。

步骤三:调用接口给用户发送消息

一次性订阅消息、长期订阅消息,详见服务端接口 subscribeMessage.send

接口使用示例:

获取用户的 openid 给用户推送消息

<button bindtap="getOpenid">获取用户的openid并推送消息</button>

首先调用名为 getopenid 云函数获取到需要推送的用户的 openid,获取成功后调用名为 sendMsg 的云函数实现消息推送

//获取用户的openid
  getOpenid() {
    wx.cloud.callFunction({
      name: "getopenid"
    }).then(res => {
      let openid = res.result.openid
      console.log("获取openid成功", openid)
        //发送消息到指定用户,推送之前要先获取用户的openid
	    wx.cloud.callFunction({
	      name: "sendMsg",
	      data: {
	        openid: openid
	      }
	    }).then(res => {
	      console.log("推送消息成功", res)
	    }).catch(res => {
	      console.log("推送消息失败", res)
	    })
    }).catch(res => {
      console.log("获取openid失败", res)
    })
  },

用于实现消息推送的云函数 sendMsg

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async(event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: event.openid, //要推送给那个用户
      page: 'pages/index/index', //要跳转到那个小程序页面
      data: {//推送的内容
        thing1: {
          value: '每日早起'
        },
        name4: {
          value: '小明'
        },
        time3: {
          value: '2019/12/9 14:00'
        },
        thing8: {
          value: '如果已经打卡,请忽略该消息,点击查看详情'
        }
      },
      templateId: 'uIfV2rNcN4zurV6A0PfU1n2IIdx-3thfhM1E' //模板id
    })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}

data 里面的的内容要和第一步中选用的模板保持一致,如下:

java实现小程序推送订阅消息 小程序订阅消息开发_推送消息_04