vue 前端显示图片加token_vue实现微信小程序服务通知推送功能

点击上方 java项目开发，选择 设为星标

优质项目，及时送达

-----

案例功能效果图

6、最终效果

提示： 开发者工具中点击无效、必须要真机上点击测试

步骤如下

1、开通消息推送

开发—)开发设置—)消息推送

找到消息推送并配置URL、Token等相关选项

2、添加消息模板

在公共模板库配置自己想用的模板

     

3、配置好服务器域名后，在开发工具中把 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书选项勾上

代码介绍

// 以下代码框架是uniapp，如果是原生语法就要对应的改下语法<template>  <view>    <view @click="templateMsg">点击发送模板消息view>  view>template><script>export default {  data() {    return {      // access_token      token: '',      // 模板数据      // 需要对应模板详情里面的key      templateData: {        // 商品        thing1: {          value: '通用正面pe6c＋背面压纹8c自封包装袋'        },        // 支付金额        amount3: {          value: '100'        },        // 下单时间        date5: {          value: '2019-10-14 27:34:21'        },        // 订单编号        character_string6: {          value: 'ADWMP2933887762'        }      }    };  },  onLoad(e) {    this.getToken();  },  methods: {    //获取access_token    getToken() {      const that = this;      wx.request({        url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${小程序appID}&secret=${小程序密钥}`,        success: res => {          that.token = res.data.access_token;        }      });    },    // 调起小程序订阅消息界面    templateMsg(e) {      const that = this;      const data = {        touser: '推送用户的openid',        template_id: '模板id',        page: '小程序页面路径',        data: this.templateData // 模板数据      };      // 调起客户端小程序订阅消息界面      wx.requestSubscribeMessage({        tmplIds: ['模板id'],        success: res =>  {          console.log(res);          if (res.errMsg === 'requestSubscribeMessage:ok') {            that.submit(data);          }        }      });    },    // 发送订阅消息    submit(data) {      wx.request({        url: `https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${this.token}`,        data,        method: 'POST',        success: res => {          console.log('发送成功');          console.log(res);        },        fail: err => {          console.log('push err');          console.log(err);        }      });    }  }};script><style lang="less" scoped>style>

文档介绍

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html

请求接口文档: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.send.html

requestSubscribeMessage API文档: 

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html

- END -

推荐案例

Springboot+Vue实现滑动验证成功后登录功能

Springboot+Vue实现从数据库中获取数据生成折线图并在前端页面展示功能

Springboot＋Vue实现网页内容生成图片功能

Springboot＋Vue实现信息批量修改功能

Springboot＋Vue前后端分离实现邮件带附件功能

SpringBoot+ ElasticSearch实现全文搜索功能

springboot+vue+shiro实现用户权限管理功能

SpringBoot+react/umi实现手机短信验证登录功能

查看全部案例...

温暖提示

为了方便大家更好的学习，本公众号经常分享一些完整的单个功能案例代码给大家去练习，如果本公众号没有你要学习的功能案例，你可以联系小编(微信：xxf960513)提供你的小需求给我，我安排我们这边的开发团队免费帮你完成你的案例。注意：只能提单个功能的需求不能要求功能太多，比如要求用什么技术，有几个页面，页面要求怎么样？

请长按识别二维码

想学习更多的java功能案例请关注

Java项目开发

如果你觉得这个案例以及我们的分享思路不错，对你有帮助，请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦！