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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。