Web前端之路前端开发网页前端后台技巧(CSS+HTML)

微信小程序开发之订阅消息

2021-03-18  本文已影响0人  前端王睿

微信小程序开发中我们常常可能会遇到这样的需求,用户执行某一操作后,需要在未来某一时刻给予用户反馈通知,比如在一些餐厅点餐后发送的取餐提醒,某些打卡应用的打卡提醒,等等。这些都必须在小程序外部给到用户有效的通知,所以实现此功能的方式只有一种——订阅消息

订阅消息 主要分为两步:订阅发布

一、订阅

小程序要发送消息,首先它得知道发送给谁,然后就是该什么时候发送。因此,订阅 是必须要有的操作,就好比公众号,你若想要某个公众号能在每次发布文章时你能收到推送,就必须关注该公众号才行。

但是,和公众号不同的是,小程序只能实现 一次性消息订阅 而非永久,也就是说你订阅后消息只要发送后该订阅就失效了,以后若想要再次收到消息通知就必须再次订阅。

订阅消息代码大致如下:

wx.requestSubscribeMessage({
  tmplIds: [''],   //  需要订阅的消息模板的id的集合
  success (res) { }   //  接口调用成功的回调函数
})

那么tmplIds数组中的消息模板id在哪获取呢?

首先我们得先自己去添加配置消息模板,可以在 [微信公众平台(http://mp.weixin.qq.com)-功能-订阅消息] 中配置,配置好消息模板后即可获取其模板ID。

更多订阅消息的相关细节可以直接前往 微信官方文档·小程序(https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html 查看。

二、发布

订阅消息之后,小程序还需要根据订阅时提供的相关信息(用户ID等)来发布消息。

上面提到的订阅操作是用户操作,体现在前端,也就是小程序端,而发布操作则体现在后端,也就是服务端,这时我们可以直接使用云开发来实现。

1. 定义云函数

我们可以定义个发布消息的云函数,代码大致如下:

const cloud = require('wx-server-sdk')  //  必须先安装wx-server-sdk
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV    //  云环境ID
})
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
        touser: 'OPENID',   // 接收者(用户)的 openid
        page: 'pages/index/index',  // 点击模板卡片后的小程序跳转页面
        lang: 'zh_CN',  //  语言类型
        data: {},  // 模板内容
        templateId: 'TEMPLATE_ID',  // 所需下发的订阅模板id
        miniprogramState: 'developer'  // 跳转小程序类型,默认是正式版
      })
    return result
  } catch (err) {
    return err
  }
}

具体参数配置可以直接前往微信官方文档·小程序(https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.send.html 查看。

有几个地方可能需要注意:

① 上述代码是云函数中的云调用,需要用到wx-server-sdk

可以通过npm install --save wx-server-sdk@latest进行安装,注意必须安装在当前云函数所在文件目录下。例如:

wx-server-sdk安装在其中

更多云调用相关内容详见→微信官方文档·小程序(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/openapi/openapi.html#%E4%BA%91%E8%B0%83%E7%94%A8

② 需在 config.json 中配置 subscribeMessage.send API 的权限
{
  "permissions": {
    "openapi": [
      "templateMessage.send"
    ]
  }
}

当然,config.json文件也必须放在当前云函数所在文件目录下。

③ 有关subscribeMessage.send API参数data的具体配置
这是我最近开发的一款小程序用到的消息模板

就以我开发的 目标管理助手 小程序为例,消息模板我用了4个字段,分别为上图的thing1、thing2、date3、thing4,所以对应的参数data如下:

cloud.openapi.subscribeMessage.send({
  data: {
    thing1: {
      value: '坚持一个月上班不迟到'
    },
    thing2: {
      value: '你的好友已确认见证'
    },
    date3: {
      value: '2020-01-17 12:30:00'
    },
    thing4: {
      value: '请尽快处理哦'
    }
  },
  //  其他参数...
});

当然,上面的字段值文字只是示例,可以根据需要自由填写。

2. 调用云函数

定义好云函数之后当然还得调用云函数才行,就像我们声明一个函数后得去执行它才能生效一样。

调用云函数的方式有两种:手动调用自动调用

① 手动调用

手动调用 顾名思义就是需要用户手动触发云函数执行,如果把上面发送消息的云函数命名为sendMessage,那么部署好后我们就可以直接在用户订阅消息成功后调用它了:

wx.requestSubscribeMessage({
  tmplIds: [''],   //  需要订阅的消息模板的id的集合
  success (res) {    //  接口调用成功的回调函数

    wx.cloud.callFunction({   // 调用云函数
      // 云函数名称
      name: 'sendMessage',
      // 传给云函数的参数
      data: {
        openid: ''  // 用户openid
      },
      success: function(res) {
        console.log(res)
      }
    })

  }
})

然后云函数就可以获取到传过来的参数openid

// ...
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
        touser: event.openid,   // 接收者(用户)的 openid
        // 其他参数...
      })
    return result
  } catch (err) {
    return err
  }
}

云函数接收两个参数:eventcontext,而调用云函数时所传递的参数都保存在event对象中。

另外,event对象还自带一个userInfo属性,而userInfo属性下保存有小程序的appId和用户的openId,因此你也可以直接通过event.userInfo.openId的方式获取用户的openId

const result = await cloud.openapi.subscribeMessage.send({
  touser: event.userInfo.openId,   // 接收者(用户)的 openid
  // 其他参数...
})
② 自动调用

自动调用 顾名思义就是可以由程序自动调用而无需用户手动触发,这就需要用到云函数中的 定时触发器 了,通过它可以让云函数按照某个特定的周期不断自动执行。

a) 在config.json中添加triggers字段

{
  // triggers 字段是触发器数组,目前仅支持一个触发器,即数组只能填写一个,不可添加多个
  "triggers": [
    {
      // name: 触发器的名字
      "name": "myTrigger",
      // type: 触发器类型,目前仅支持 timer (即 定时触发器)
      "type": "timer",
      // config: 触发器配置,在定时触发器下,config 格式为 cron 表达式
      "config": "0 0 2 1 * * *"
    }
  ]
}

此处代表在每月的1日的凌晨2点自动触发云函数,也就是发布订阅消息。

b) 右击config.json选择“上传触发器”

右键选择上传触发器

更多定时触发器相关内容详见→微信官方文档·小程序(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/triggers.html


重点总结

① 微信小程序中的订阅消息只能实现一次性订阅,而且必须通过用户手动触发订阅;
② 消息发布是通过调用云函数实现的,有手动调用和自动调用两种方式;
③ 云函数和定时触发器都必须上传之后才能使用。

上一篇下一篇

猜你喜欢

热点阅读