WeChat applet cloud development realizes subscription message push

The code is for self-use, copy and paste, and use it directly. If you like, you can check other bloggers' articles and contribute a lot of page views. Thank you very much.

When we are developing WeChat applet projects, especially mall-type applets, we need the assistance of subscription messages . Subscription messages are to instantiate the template content and send them directly to the designated mobile phone WeChat .
Insert picture description here

For example, when we are developing a small program like a mall, a user purchases a product, and the merchant needs to receive information such as who bought the product, what mall purchased, when it bought it, and where is the delivery address.
Although these can be viewed in the database, it is very inconvenient and cannot be received in real time. The WeChat applet currently does not support the push function of APP, this subscription message is the closest to push function.
First, the first step is to go to the WeChat public platform (https://mp.weixin.qq.com/) , log in to your account, and find the subscription message module in the function bar on the left.
Insert picture description here
Insert picture description here
Click Add and select the template that suits your needs.
Then go back to the editor.
First, we first write cloud functions :

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
    
    
  try {
    
    
    const result = await cloud.openapi.subscribeMessage.send({
    
    
        touser: event.openid,           //要发送用户的openid
        page: 'pages/demo/demo',        //用户通过消息通知点击进入小程序的页面
        lang: 'zh_CN',      //进入小程序查看”的语言类型,支持zh_CN(简体中文)、en_US(英文)、zh_HK(繁体中文)、zh_TW(繁体中文),默认为zh_CN
        data: {
    
               //要发送的数据,这里需要注意的事项,我在下面说
          thing1:{
    
    
            value:event.title
          },
          time3:{
    
    
            value:event.time
          }
        },
        templateId: '模板ID',   //订阅消息模板ID
        miniprogramState: 'formal'   //跳转小程序类型:developer为开发版;trial为体验版;formal为正式版;默认为正式版

      })
    return result
  } catch (err) {
    
    
    return err
  }
}

Students can directly apply the above template.
Then change the content of package.json:
Insert picture description here

Add the selected content, then upload and deploy.
After that we write the page file.
In WXML, we use buttons as a medium.

<button bindtap="sendNew" type="primary">点我</button>

The JS function is written as follows:

  sendNew(res){
    
    
    var that = this
    var time = util.formatTime(new Date());
    wx.requestSubscribeMessage({
    
    
      tmplIds: ['模板ID'],
      success(res){
    
    
        wx.cloud.callFunction({
    
    
          name:'subscribe',
          data:{
    
    
            openid:'需要接收的微信的openid',
            title:'二手物品',
            time:time
          },
          success(res){
    
    
            console.log('成功',res);
          },
          fail(res){
    
    
            console.log('失败',res);
          }
        })
      }
    })
  },

First, we need to give the user a prompt box and let him authorize before we can use the function of subscribing to news. This wx.requestSubscribeMessage is the function of popping up the authorization prompt box. The template ID is there when the subscription message template is added at the time.
Insert picture description here
The key detail here is the value of data. Let’s first click on the details in my template.
Insert picture description here
Here the key-value pairs should correspond. The keys of my template are thing1 and time3 , so the data in my cloud function is written as thing1. And time3 , the key value is passed from the JS function of the page page , the name can be anything, but don't make a mistake, it is event.xxx. Another point is that most people should know how to get the user's openid. If you don’t know, you can go to my previous blog to read it. I have talked about it (https://blog.csdn.net/m0_46171043/article/details/107452518) .
The results received are as follows:
Insert picture description here

If you have any questions, please contact QQ: 505417246. Follow the WeChat official account
below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials
Insert picture description here

Guess you like

Origin blog.csdn.net/m0_46171043/article/details/108184486