您的当前位置:首页正文

微信小程序开发中的消息订阅与模板消息发送

2024-11-30 来源:个人技术集锦

微信小程序开发中的消息订阅与模板消息发送是非常重要的功能,可以实现向用户发送订阅消息和模板消息的功能。下面的代码案例将详细介绍如何实现消息订阅和模板消息发送的功能。

首先,我们需要在微信公众平台申请模板消息和消息订阅的权限。获得权限后,我们可以使用微信提供的 API 实现消息订阅功能。

1.1 准备工作

首先,在小程序的 app.json 文件中添加以下代码,启用订阅消息的权限:

"setting": {
  "scopes": [
    "userInfo",
    "userLocation",
    "address",
    "invoiceTitle",
    "werun",
    "record",
    "writePhotosAlbum",
    "camera",
    "uniID"
  ],
  "subpackages": []
}

然后,在小程序的 app.js 文件中添加以下代码,处理用户订阅消息的回调:

App({
  onLaunch: function (options) {
    if (options && options.scene === 1047) {
      // 处理用户订阅消息回调
      // 获取订阅消息的模板 id 和用户 openid
      const { tmplIds, openid } = options.query;
      
      // 调用接口,发送订阅消息
      wx.requestSubscribeMessage({
        tmplIds: [tmplIds],
        success: function (res) {
          if (res[tmplIds] === 'accept') {
            // 用户点击了订阅按钮
            console.log('用户同意订阅消息');
          } else {
            // 用户点击了取消按钮
            console.log('用户拒绝订阅消息');
          }
        }
      });
    }
  }
})

1.2 页面中订阅消息的按钮

在需要订阅消息的页面中,添加一个按钮,点击按钮后触发订阅消息的逻辑。

<view>
  <button type="primary" bindtap="handleSubscribe">订阅消息</button>
</view>

然后在页面的 js 文件中,添加以下代码,处理按钮的点击事件:

Page({
  handleSubscribe: function () {
    // 获取订阅消息的模板 id
    const tmplIds = '订阅消息的模板 id';
    
    // 调用接口,订阅消息
    wx.requestSubscribeMessage({
      tmplIds: [tmplIds],
      success: function (res) {
        if (res[tmplIds] === 'accept') {
          // 用户点击了订阅按钮
          console.log('用户同意订阅消息');
        } else {
          // 用户点击了取消按钮
          console.log('用户拒绝订阅消息');
        }
      }
    });
  }
})

以上代码实现了订阅消息的功能。当用户点击订阅消息按钮时,会调用接口请求用户授权,用户同意后,会收到订阅消息。

  1. 模板消息发送的实现

2.1 准备工作

在小程序的后台管理中,需要先创建一个模板消息,在创建模板消息时,可以定义消息的标题、内容和点击跳转的页面。

然后,在小程序的 app.json 文件中添加以下代码,启用模板消息的权限:

"templates": {
  "<模板消息的名称>": {
    "templateId": "<模板消息的 ID>",
    "formId": "<模板消息的 formId>"
  }
}

2.2 发送模板消息

模板消息发送有两种方式:一是通过客服消息接口发送,二是通过订阅消息接口发送。下面是两种方式的代码案例:

2.2.1 通过客服消息接口发送模板消息

wx.request({
  url: 'https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=ACCESS_TOKEN',
  method: 'POST',
  data: {
    touser: '<用户的 openid>',
    msgtype: 'template',
    template: {
      template_id: '<模板消息的 ID>',
      url: '<点击跳转的页面>',
      data: {
        keyword1: {
          value: '参数1',
          color: '#173177'
        },
        keyword2: {
          value: '参数2',
          color: '#173177'
        }
      }
    }
  },
  success: function(res) {
    console.log('发送模板消息成功', res);
  },
  fail: function(res) {
    console.log('发送模板消息失败', res);
  }
});

2.2.2 通过订阅消息接口发送模板消息

wx.requestSubscribeMessage({
  tmplIds: ['<模板消息的 ID>'],
  success: function (res) {
    if (res['<模板消息的 ID>'] === 'accept') {
      // 用户点击了订阅按钮
      wx.cloud.callFunction({
        name: 'sendMessage',
        data: {
          openid: '<用户的 openid>',
          templateId: '<模板消息的 ID>',
          page: '<点击跳转的页面>',
          data: {
            keyword1: {
              value: '参数1',
              color: '#173177'
            },
            keyword2: {
              value: '参数2',
              color: '#173177'
            }
          }
        },
        success: function (res) {
          console.log('发送模板消息成功', res);
        },
        fail: function (res) {
          console.log('发送模板消息失败', res);
        }
      });
    } else {
      // 用户点击了取消按钮
      console.log('用户拒绝订阅消息');
    }
  }
});

以上代码实现了通过客服消息接口和订阅消息接口发送模板消息的功能。当发送成功后,用户将收到一条模板消息。

以上是关于微信小程序开发中消息订阅与模板消息发送的代码案例,希望对你有所帮助。接下来,你可以根据自己的实际需求,调整代码逻辑并完善功能。

显示全文