当前位置:   article > 正文

关于微信小程序uniapp版的推送消息_uniapp微信小程序消息推送

uniapp微信小程序消息推送

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. // 获取access_token用于发送消息
  69. getAccessToken() {
  70. return new Promise((resolve, reject) => {
  71. uni.request({
  72. url: 'https://api.weixin.qq.com/cgi-bin/token',
  73. data: {
  74. appid: '小程序的appid',
  75. secret: '小程序的密钥',
  76. grant_type: 'client_credential'
  77. },
  78. success: (res) => {
  79. console.log("getAccessToken", res.data)
  80. resolve(res.data.access_token)
  81. },
  82. fail: (err) => {
  83. reject(err)
  84. }
  85. })
  86. })
  87. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/963495?site
推荐阅读
相关标签
  

闽ICP备14008679号