uni-app 小程序订阅消息发送

深藏阁楼爱情的钟 2022-09-04 02:48 571阅读 0赞

# 微信小程序的订阅消息实现流程 #

### 文章目录 ###

*  微信小程序的订阅消息实现流程
 *  前言
 *  注意
 *  一、微信小程序订阅消息是什么？
 *  二、使用步骤
 *   *  1.小程序申请订阅消息功能
     *  2.小程序弹出订阅权限
     *   *  实现效果
 *  总结

--------------------

# 前言 #

本文主要讲述使用uni-app发送模板信息的整个实现流程及示例代码

--------------------

# 注意 #

前端发送订阅消息只能实时发送 因为就算使用定时器推出小程序一样会清除定时器

# 一、微信小程序订阅消息是什么？ #

引用微信小程序官网的一句话：小程序订阅消息。消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。因为本人使用为文本类型通知 接下来示例均围绕秒杀通知为例童鞋们使用换汤不换药就好

# 二、使用步骤 #

## 1.小程序申请订阅消息功能 ##

微信公众平台选取模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 2]

## 2.小程序弹出订阅权限 ##

弹出弹窗 确定授权发送订阅消息 tmplId为微信公众平台复制的模板ID

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 3]  
下文请求中 data中的参数对应详情内容  
access\_token生成参考官方文档

<template>
    	<view @click="subscribe">预约抢购</view>
    </template>
    <script>
    import { tmplId} from '@/common/config.js';//微信公众平台复制的模板id
    	export default { 
    		methods: { 
    			subscribe() { 
    				uni.requestSubscribeMessage({ 
    					tmplIds: [tmplId],
    					success: (res) => { 
    						if (res[tmplId] === 'accept') { 
    uni.request({ 
    //仅为示例
       url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=access_token', 
       method:"POST",
    	data:{ 
    		access_token:'access_token',//access_token
    		touser:"openid",//用户openid
    		template_id:"tmplId",//模板ID
    		page:"pages/index/index",//进入哪个页面 非必传
    		data:{ 
    			time3:{ 'value':"2020年3月27日 08:00"},
    			thing1:{ 'value':"小米音箱"},
    		},
    		miniprogram_state:"formal",//developer为开发版；trial为体验版；formal为正式版；非必传
    	},
        success: (res) => { 
           uni.showToast({ 
    			title: '成功预约活动商品，请留意微信通知',
    			duration: 2000,
    			icon:"none"
    		});
        },
    	fail(err) { 
    		console.log(err)
    	}
    });
    
    							
    						} else if (res[tmplId] == "reject") { 
    							//引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
    							uni.showModal({ 
    								title: '订阅消息',
    								content: '您当前拒绝接受消息通知，是否去开启',
    								confirmText: '开启授权',
    								confirmColor: '#345391',
    								cancelText: '仍然拒绝',
    								cancelColor: '#999999',
    								success: res => { 
    									if(res.confirm){ 
    										uni.openSetting({ 
    											success(res) { 
    												console.log(res)
    											},
    										})
    									}
    									
    								}
    							})
    						}
    					},
    					fail(err) { }
    				})
    			}
    		},
    	}
    </script>

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 5]

--------------------

# 总结 #

所有示例代码均为参考 更换为自己实际需求中参数 有问题可以随时留言联系我

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]: /images/20220829/dd54a40ed9034454a1ec7ce3439c1631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 1]: /images/20220829/14899ea0849146f9b0df1dab52959f01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 2]: /images/20220829/51ae14f0918a4a958ae40d6e4fcc02e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 3]: /images/20220829/b2b486c8ac4448d28d11fe9d9923367f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 4]: /images/20220829/4d6605f92ee04fc79b35d92a2317f83d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70 5]: /images/20220829/e29ab3f46ad04717a99fc2990731aa91.png