vue实现微信小程序服务通知推送功能

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

优质项目，及时送达

-----

案例功能效果图

六、最终效果

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

步骤以下

一、开通消息推送

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

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

二、添加消息模板

在公共模板库配置本身想用的模板

     

三、配置好服务器域名后，在开发工具中把 不校验合法域名、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项目开发
 
           
 
          
 
          
 
            
          
 
         
 
        
 
       
 
       
 
         
       
 
      
 
     
 
    
 
 
    
若是你以为这个案例以及咱们的分享思路不错，对你有帮助，请分享给身边更多须要学习的朋友。别忘了《留言+点在看》给做者一个鼓励哦！
 

   

本文分享自微信公众号 - web项目开发（javawebkaifa）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。