微信小程序云函数发送订阅消息【亲验有效】

最近做项目时需要用到订阅消息这个功能,为了实现这一功能,可让我一顿好找啊。查看了众多博客和相关文章,还是没找到比较详细且适合小白的博客,所以在此我整理了一下我自己写的代码,这是对自己的一份总结,也希望可以帮助跟我一样还在路上的朋友。

首先,需要在微信官方文档查看一下实现订阅消息的步骤订阅消息
其次,因为发送订阅消息需要使用到云开发,所以在项目开始先需对项目进行云开发初始化。

注意:云函数运行前需要部署,如果你不熟悉云环境的话,还是先创建一个吧,不要创建两个,如果有两个环境更不要两个环境之间切来切去,不然这将是很痛的领悟啊!!!切记切记
 

具体流程

步骤一:获取模板 ID

在微信公众平台手动配置获取模板 ID:
登录 https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用。

步骤二:获取下发权限

详见小程序端消息订阅接口 wx.requestSubscribeMessage

步骤三:调用接口下发订阅消息

详见服务端消息发送接口 subscribeMessage.send

实现代码

wxml

和之前模板消息必须用到formid不同,订阅号消息现在已经不用再每次生成formid只需要表单提交后,提醒用户是否同意接收一条订阅消息,同意后才能发送。

下面就是页面表单结构,表单提交按钮绑定order_submit函数

<form bindsubmit="order_submit">
  <!-- <view class="title">{
   
   {title}}</view> -->
  <input class="title" type="text" value="{
   
   {title}}" name="title"></input>
  <view class="time">
    <text>预约时间</text>
    <input type="text" placeholder="请输入预约时间" name="time"></input>
  </view>
  <view class="number">
    <text>用餐人数</text>
    <input type="number" placeholder="请输入用餐人数" name='number'></input>
  </view>
  <view class="name">
    <text>联系人</text>
    <input type="text" placeholder="请输入您的名字" name='name'></input>
  </view>
  <view class="phone">
    <text>联系电话</text>
    <input type="number" placeholder="请输入手机号码" maxlength='11' name='phone'></input>
  </view>
  <view class="note">
    <text>备注</text>
    <input type="text" placeholder="请输入您的备注信息" name='note' maxlength='18'></input>
  </view>
  <button form-type="submit">确定</button>
</form>

js

点击按钮后wx.requestSubscribeMessage这个函数会弹出一个微信提示框,系统要给您发送一条订阅消息,必须是用户同意后能才发送订阅消息。

e.detail.value.xx就是接收到表单提交过来的数据,把数据放在message对像中进行传递

用户同意接收后再调用云函数subscribe 

const app = getApp()
const tmplId = 'EHnKQwB95VJUbehyLeq2dbnQpCM__Z7XbIU_rUfz5h4' //这是订阅消息模板id,需自行申请
order_submit: function (e) {
//这是模板信息
    var message = {
      name: e.detail.value.name,
      content: `餐厅:${e.detail.value.title}`,
      time: e.detail.value.time,
      state: '预约成功',
      phone: e.detail.value.phone
    }
      // 调用微信 API 申请发送订阅消息
      wx.requestSubscribeMessage({
        // 传入订阅消息的模板id,模板 id 可在小程序管理后台申请
        tmplIds: [tmplId],
        success:res => {
          // 申请订阅成功
          if (res.errMsg === 'requestSubscribeMessage:ok') {
            // 这里将订阅的课程信息调用云函数存入db
            wx.cloud.callFunction({
                name: 'subscribe',
                data: {
                  message: message
                },
              })
              .then(res => {
                wx.showToast({
                  title: '订阅成功',
                  icon: 'success',
                  duration: 2000,
                });
                console.log('发送成功', res)
              })
              .catch(res => {
                wx.showToast({
                  title: '订阅失败',
                  icon: 'success',
                  duration: 2000,
                });
                console.log('发送失败', res)
              });
          }
        },
        fail:err => {
          console.log(err)
        }
      });
      
    }
  },

云函数subscribe

建一个云函数

这里是云函数的具体代码,如果你只开通了一个云环境,那么env:''不用填写,默认空就行,有开发版和正式版多个环境的请写清楚云环境ID

模板ID在小程序后台,订阅消息里复制 ,还没有消息模板的先添加一个适合自己的模板

传过来的参数通过event.xx接收下,并传入模板消息里面,具体这里仔细看下,一一对应下

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env:""//这是云环境id
})

// 云函数入口函数
exports.main = async (event, context) => {
    try{
      const {OPENID} = cloud.getWXContext();
      const result = await cloud.openapi.subscribeMessage.send({
        touser:OPENID,
        page:'pages/index/index',
        data:{
        //这些参数都会在模板详情那有,这些参数不能弄错,一旦弄错就发送不了
          thing1:{
            value:event.message.name
          },
          thing3:{
            value:event.message.content
          },
          time2:{
            value:event.message.time
          },
          phrase4:{
            value:event.message.state
          },
          phone_number6:{
            value:event.message.phone
          }
        },
        templateId:'EHnKQwB95VJUbehyLeq2dbnQpCM__Z7XbIU_rUfz5h4'
      })
      console.log(result)
      return result
    }catch(err){
      console.log(err)
      return err
    }
}

猜你喜欢

转载自blog.csdn.net/qq_28471389/article/details/112949666