微信小程序uni-app版的推送消息

1.按钮触发推送消息

<button type="primary" size="mini" @tap="pushMesage">推送消息</button>

2.pushMesage方法调用uniapp自带的消息推送授权窗口

值得注意的是：①tmplIds是一个数组，这个数组里可以储存多个模板ID，当你需要切换模板进行推送时切换数组下标即可。

②弹窗授权需要点击允许接收来自小程序的消息提醒，目前微信小程序里面有两种模板，第一种是一次性模板：也就是每次授权接收消息在一段时间内只能接收一次消息，接收完之后就需要重新授权。第二种是长期模板：长期授权模板一般用于政务民生之类类目的小程序，一般开发者不太好申请。这种模板只需要授权一次即可长期接收来自小程序的推送（因为这个特性，在前端代码编写的时候需要考虑一点，需要判断用户是否点击授权来决定用户登录时是否弹出授权框，这个问题也好解决：用户授权调用接口将授权状态储存在数据库就行，在用户登陆成功时多返回一个授权状态的字段，前端判断是否弹窗授权即可。）

1.  
   pushMesage() {
2.  
   console.log("消息推送开始弹窗确认")
3.  
   uni.requestSubscribeMessage({
4.  
   tmplIds: ['你的模板ID'],
5.  
   success: (res) => {
6.  
   console.log("弹窗",res)
7.  
   if (res['你的模板ID'] === 'accept') {
8.  
   this.sendMsg()
9.  
   }
10.  
    }
11.  
    })
12.  
    }

3.sendMsg方法调用相关接口获得相关参数并且发送消息推送

值得注意的是：①这个案例只是前端发送通知，用于了解推送消息的基本流程。实际开发中前端只需要弹窗授权获取jscode传递给后端，由后端请求微信api推送消息

②openId不会过期可以储存在数据库，后续需要推送消息直接取用就行。

1.  
   async sendMsg() {
2.  
   const js_code = await this.getJsCode();
3.  
   const openid = await this.getOpenId(js_code);
4.  
   const access_token = await this.getAccessToken();
5.  
   console.log("js_code: ", js_code);
6.  
   console.log("openid: ", openid);
7.  
   console.log("access_token", access_token)
8.  
   uni.request({
9.  
   url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token='
10.  
    access_token,
11.  
    method: 'POST',
12.  
    data: {
13.  
    touser: openid,
14.  
    template_id: 'xxxx', // 模板id
15.  
    page: "pagesV2/info/userinfo/usercommit?dailytype=1&menuType=0", // 点击消息卡片跳转地址
16.  
    data: { // data是模板内容，属性名为模板中所给，value值是需要传递的。
17.  
    date3: {
18.  
    value: '2022-06-04 20:33:44'
19.  
    },
20.  
    thing5:{
21.  
    value:'有新注册申请通知，请尽快审核'
22.  
    },
23.  
    thing1: {
24.  
    value: '注册申请'
25.  
    }
26.  
    }
27.  
    },
28.  
    success: (res) => {
29.  
    console.log(res);
30.  
    }
31.  
    })
32.  
    },
33.  
    //获取jsCode用于获取OpenId
34.  
    getJsCode() {
35.  
    return new Promise((resolve, reject) => {
36.  
    uni.login({
37.  
    success(res) {
38.  
    console.log("unilogin",res)
39.  
    resolve(res.code)
40.  
    },
41.  
    fail: (err) => {
42.  
    reject(err)
43.  
    }
44.  
    })
45.  
    })
46.  
    },
47.  
    //获取OpenId用于发送消息
48.  
    getOpenId(js_code) {
49.  
    return new Promise((resolve, reject) => {
50.  
    uni.request({
51.  
    url: `https://api.weixin.qq.com/sns/jscode2session`,
52.  
    data: {
53.  
    appid: '小程序的appid(在微信开放平台获取)',
54.  
    secret: '小程序的密钥（同上获取）',
55.  
    js_code: js_code,
56.  
    grant_type: 'authorization_code'
57.  
    },
58.  
    success: (res) => {
59.  
    console.log("getOpenId", res.data)
60.  
    resolve(res.data.openid)
61.  
    },
62.  
    fail(err) {
63.  
    reject(err)
64.  
    }
65.  
    })
66.  
    })
67.  
    },
68.  
     
69.  
    // 获取access_token用于发送消息
70.  
    getAccessToken() {
71.  
    return new Promise((resolve, reject) => {
72.  
    uni.request({
73.  
    url: 'https://api.weixin.qq.com/cgi-bin/token',
74.  
    data: {
75.  
    appid: '小程序的appid',
76.  
    secret: '小程序的密钥',
77.  
    grant_type: 'client_credential'
78.  
    },
79.  
    success: (res) => {
80.  
    console.log("getAccessToken", res.data)
81.  
    resolve(res.data.access_token)
82.  
    },
83.  
    fail: (err) => {
84.  
    reject(err)
85.  
    }
86.  
    })
87.  
    })
88.  
    },

这篇好文章是转载于：学新通技术网