微信小程序订阅消息-12306思路

Question

博主你好，通过搜索，看到了你的文章，感觉您对微信小程序消息很有见解，想请教一个问题：

12306APP可以通过绑定微信，实现订阅消息的发送（无需拉起微信订阅消息弹窗，交互丝滑），想请教大家是否了解，或者能否猜测下是如何实现的呢？
交互流程如下：

Answer 1

引自免费微信小程序：皆我百晓生

要实现类似12306在微信小程序中接收服务通知的功能，你需要遵循微信官方提供的接口和步骤。微信提供了模板消息推送功能，允许已获得用户授权的小程序在特定情况下向用户发送消息。以下是实现这个功能的一般步骤：

1. 开通模板消息：首先，你需要登录微信公众平台（https://mp.weixin.qq.com/）并绑定你的小程序，然后在“功能设置” -> “模板消息”中开启模板消息功能，并根据需求创建模板。

2. 获取用户授权：在用户首次进入你的小程序时，请求用户的微信服务通知权限。可以使用wx.openSetting方法打开设置页面，引导用户授权。这里是一个示例代码片段：

wx.showModal({
  title: '提示',
  content: '为了提供更好的服务，我们希望获得您的微信服务通知权限。点击"确定"按钮授权。",
  showCancel: false, // 不显示取消按钮
  success: function(res) {
    if (res.confirm) {
      wx.openSetting({
        success: function(res) {
          if (res.authSetting['scope.userInfo']) {
            // 用户已经授权，可以在这里进行后续操作
          } else {
            wx.showToast({
              title: '您未授权',
              icon: 'none',
              duration: 2000,
            });
          }
        },
      });
    }
  },
});

1. 发送模板消息：当需要向用户发送提醒时，调用微信API的wx.sendTemplateMessage方法。确保你有一个合法的模板ID，并且用户已经授权了服务通知。下面是一个简单的发送模板消息的例子：

const templateId = 'your_template_id'; // 替换为实际模板ID
const data = {
  'first': {
    value: '尊敬的旅客，您有一条新的出行提醒：',
    color: '#173177',
  },
  'keyword1': {
    value: '车次：G12345',
    color: '#173177',
  },
  'keyword2': {
    value: '时间：2023年1月1日 15:00',
    color: '#173177',
  },
  'keyword3': {
    value: '目的地：北京南站',
    color: '#173177',
  },
  'remark': {
    value: '请注意查收并及时处理相关信息。',
    color: '#173177',
  },
};

let openid = '';
// 获取openid的方法取决于你的实现，通常从微信小程序的全局数据中获取
if (!openid) {
  wx.login({
    success: res => {
      if (res.code) {
        wx.request({
          url: 'https://your-server.com/get-openid', // 你的服务器接口
          method: 'POST',
          data: { code: res.code },
          header: { 'content-type': 'application/json' }, // 默认值
          success: res => {
            openid = res.data.openid;
            sendTemplateMessage(openid, templateId, data);
          },
        });
      }
    },
  });
} else {
  sendTemplateMessage(openid, templateId, data);
}

function sendTemplateMessage(openid, templateId, data) {
  const messageObj = {
    touser: openid,
    template_id: templateId,
    data: data,
  };
  wx.sendTemplateMessage(messageObj, err => {
    if (err) {
      console.error('发送模板消息失败:', err);
    } else {
      console.log('发送模板消息成功');
    }
  });
}

1. 服务器端集成：上述代码中的get-openid接口需要在你的服务器上实现，用于从微信服务器获取用户的openid。这通常涉及与微信服务器进行OAuth2.0验证。

注意：微信对于模板消息的发送有一定的限制，包括每日发送次数、发送时间等，务必遵守相关规定。此外，发送模板消息需提前在微信公众平台上审核通过。

完成以上步骤后，当有需要时，你的小程序就可以发送定制的消息给用户，而用户不需要手动打开小程序，体验会比较流畅。