微信小程序实例:创建下发模板消息实例

article/2025/9/11 4:53:44

      鉴于目前网络上都还找不到小程序下发模板消息的相关资源,在多次阅读了官方文档今天终于把小程序的模版消息给测通了,接下来介绍在不使用服务器的情况下,前端开发人员在本地怎么测试模板消息的发送。


1、在微信公众平台-小程序的模板中心先申请一个下发消息模板



2、根据文档提及的下发模板消息做法分两个步骤

2-1、获取token,这里我直接使用微信公众平台接口调试工具【http://mp.weixin.qq.com/debug/】上得到token串,在有效期内测试。假如多处请求需要token的话,最好设置一个公共变量存储,这里我提前把appid、secret、token存储在app.js的globalData里头了。



2-2、发起模版消息请求,根据接口post参数说明,还需要提前获取openid,也就是接收者(登录小程序用户)的openid。

2-2-1、获取openid,这里我是在app.js发起请求得到openid在存储到本地上,具体代码如下:【将这段代码放入onLoad生命周期内】

//获取openidvar user=wx.getStorageSync('user') || {};if(!user.openid || (user.expires_in || Date.now()) < (Date.now() + 600)){//不要在30天后才更换openid-尽量提前10分钟更新wx.login({success: function(res){// successvar d=that.globalData.wxData;//这里存储了appid、secret、token串var l='https://api.weixin.qq.com/sns/jscode2session?appid='+d.appId+'&secret='+d.appSecret+'&js_code='+res.code+'&grant_type=authorization_code';wx.request({url: l,data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: function(res){var obj={};obj.openid=res.data.openid;obj.expires_in=Date.now()+res.data.expires_in;wx.setStorageSync('user', obj);//存储openid}});}});}else{console.log(user);}


      获得openid后,接下来就是组装发起下发模版消息请求啦~代码如下:

      test.wxml::

<form name='pushMsgFm' report-submit bindsubmit='orderSign'>enter product:<input type="text" name="product" value='' placeholder="enter your name" />detail: <input type="text" name='detail' placeholder="enter desc" />select sex:<switch type="switch" name='sex' /><button form-type="submit">submit</button>
</form>
      注意form组件一定要加report-submit属性,否则获取不到formId。


      test.js::

orderSign: function (e) {var fId = e.detail.formId;var fObj = e.detail.value;var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + App.globalData.wxData.token;var d = {touser: wx.getStorageSync('user').openid,template_id: 'dKyw9dIDjncWW3VuFIRK9o',//这个是1、申请的模板消息id,page: '/pages/index/index',form_id: fId,value: {//测试完发现竟然value或者data都能成功收到模板消息发送成功通知,是bug还是故意??【鄙视、鄙视、鄙视...】 下面的keyword*是你1、设置的模板消息的关键词变量"keyword1": {"value": fObj.product,"color": "#4a4a4a"},"keyword2": {"value": fObj.detail,"color": "#9b9b9b"},"keyword3": {"value": new Date().getDate(),"color": "#9b9b9b"},"keyword4": {"value": "201612130909","color": "#9b9b9b"},"keyword5": {"value": "$300","color": "red"}},color: '#ccc',emphasis_keyword: 'keyword1.DATA'}wx.request({url: l,data: d,method: 'POST',success: function(res){console.log("push msg");console.log(res);},fail: function(err) {// failconsole.log("push err")console.log(err);}});}

      最后编译,输入文本点击提交发起请求,这里只能手机调试,我用开发工具打印出来的formId: "the formId is a mock one"并不是数字串。最终微信助手下发如下信息,表示成功发送模板消息了



 

        这里需要注意一点,如果提示合法域名问题,那是你没有在公众平台把微信的域名也添加进去。具体进入微信公众平台 | 小程序中心--设置--开发设置--服务器域名配置,点击修改,将请求的域名添加进去。如下:



http://chatgpt.dhexx.cn/article/id1XIgKF.shtml

相关文章

小程序配置模板消息

1.登录微信公众号平台&#xff0c;需要有权限的工作人员进行扫码登录。 2.登录进去点击订阅消息。 3.点击添加按钮&#xff0c;可以在搜索框进行搜索想要的模板类型&#xff0c;然后点击选用即可。 4.选择提醒模板消息的参数&#xff0c;需要跟客户沟通需要什么参数就配什么参…

小程序 发送模板消息的功能实现

☹. 背景 - 小程序开发的过程中&#xff0c;绝大多数会满足微信支付 - 那么&#xff0c;作为友好交互的体现&#xff0c;自然就会考虑到支付后的消息通知咯 - 所以&#xff0c;我的小程序项目也要求完成这个效果&#xff0c;so.分享一下自己的实现步骤&#xff0c;以方便道友们…

微信小程序-----消息模版(最全解释)

最近小程序在码界里嫌弃腥风血雨&#xff0c;每一个码奴都感觉世界给自己又多开一个扇窗&#xff0c;本菜鸟也眼红不已&#xff0c;就尝试着写了一个小程序&#xff0c;今天跟大家分享一下自己在写消息模版时候遇到的坑&#xff0c;希望能帮助每一位路过踩坑的道友&#xff1b;…

微信小程序模板消息推送

时序图 ​​​​​​​ 首先&#xff0c;我们需要知道一件事情&#xff0c;小程序的模板推送分为“一次性订阅”和“长期订阅” 一次性订阅&#xff1a;用户订阅小程序后&#xff0c;程序只能对指定OpenId进行一次推送模板消息&#xff0c;无法多次推送 长期订阅&#xff1a…

小程序发送模板消息给用户 —— 一次性模板实现“长期订阅”

大家好&#xff01;我是我玩亚索我会C&#xff0c;在写小程序时&#xff0c;我们会有向用户发送消息的需求&#xff0c;比如发送提醒通知&#xff0c;或者是一些重要通知来形成一个服务的闭环。这就要用到微信的发送消息功能了&#xff0c;下面我使用Java语言来详细演示下如何使…

小程序发送模板消息详细步骤

小程序发送通模板消息详细步骤 步骤一&#xff1a;获取模板id步骤二&#xff1a;页面的form组件&#xff0c;属性report-submit为true时&#xff0c;可以声明为需发模板消息&#xff0c;此时点击按钮提交表单可以获取formId&#xff0c;用于发送模板消息。或者当用户完成支付行…

小程序模板消息

一,制定小程序订阅消息模板 示例图片 (图1) 首先我们来讲一下如何获取制定微信小程序的订阅消息模板, 如图1所示我们首先要登录到微信公众平台,如图 而后进入到图1所示的订阅消息这个页面, 如果你是首次进入的话那么需要开通, 这里比较简单就不用讲解了, 如果说进入之后…

微信小程序能实现盈利的7大流量主广告组件及其分成模式概览

前段时间涉足了微信小程序流量主广告的接入&#xff0c;所以就学习和了解了一下相关的介绍与接入场景。因此做一下笔记记录。 概览 微信小程序流量主广告组件有Banner 广告、激励视频广告、插屏广告、小程序视频广告、视频前贴广告、Grid 广告、原生模板广告等。 基础介绍 什…

小程序无限插屏广告实现方法

大家好啊&#xff0c;最近突然想到一个问题&#xff0c;自己做为一个程序员&#xff0c;每天发的公众号文章和程序根本没半毛钱关系&#xff0c;靠分享一些破解软件浑浑度日&#xff0c;再这样下去恐怕要废。所以今天给自己技术群的狗子们分享一个小知识点&#xff0c;如何让你…

我做的小程序,昨天赚了 2.06 元广告费

我做的小程序&#xff0c;昨天赚了 2.06 元广告费 先看一下广告上线三天的收益&#xff0c;虽然不多&#xff0c;但很快乐hhh。 2020 年 6月接触了小程序云开发&#xff0c; 那时候还不太会写太复杂的小程序界面&#xff0c;于是就找了几个开源的框架改了改。 因为当时所处的行…

小程序流量主运营

个人和小微企业可通过小程序流量主进行变现&#xff0c;如果你擅长推广&#xff0c;有较多的粉丝那么小程序变现无疑是一种很好的收入渠道。小程序流量主的开通渠道门槛并不高——满1000人即可开通流量主。 那么我们运营什么样的小程序开通流量主进行流量变现呢&#xff1f;以…

Uni-app 小程序 APP 的广告变现之路:插屏广告

插屏广告 插屏广告组件是由客户端原生的图片、文本、视频控件组成的&#xff1b;一般来说&#xff0c;插屏广告可以实现比传统信息流广告和banner广告展现更大的广告尺寸&#xff0c;同样能够满足您对大量曝光和用户转化的需求。 平台差异说明 AppH5微信小程序支付宝小程序百…

小程序进入首页时弹出广告

项目需求&#xff0c;判断用户是否开通会员&#xff0c;没开通会员的话每次进入小程序弹出一个引导开通会员的弹窗&#xff0c;已经开通会员的不在弹 先看下效果图 wxml代码 <!-- 广告展示 --><view class"mask" hidden"{{showAd}}"><view…

uniapp 小程序 加载显示激励视频广告

uniapp激励广告文档&#xff1a;uni-app官网https://uniapp.dcloud.io/api/a-d/rewarded-video微信官网激励广告文档&#xff1a;激励视频广告 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/rewarded-video-a…

微信 小游戏/小程序 广告组件被驳回 审核不通过

最近做微信小游戏开发&#xff0c;接入广告时遇到一些问题&#xff0c;被驳回了好几次。 相信大家接过微信小游戏或者小程序广告都晓得&#xff0c;接入很简单&#xff0c;不论是banner广告还是激励视频广告只要在合适的位置合适的时机去展示广告&#xff0c;都会顺利审核通过…

微信小程序添加激励式广告

目录 微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告 最终效果可扫码查看 遇…

微信小程序添加插屏广告

目录 微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告 最终效果可扫码查看 遇…

小程序banner广告和激励广告

小程序banner广告和激励广告 1、小程序banner广告 1.1、先要在小程序公众后台获取广告位ID 代码片 <view class"empty"><ad unit-id"广告id"></ad></view>注意事项&#xff1a; Banner 广告不允许直接设置样式属性&#xff0c;…

小程序也能接广告了,微信小程序广告位投放指南!

小程序也能接广告了&#xff0c;微信小程序广告位投放指南! 3月15日消息&#xff0c;据爆料&#xff0c;微信已经开始秘密测试在小程序中投放广告&#xff0c;并且流传出了一份《微信小程序广告位投放指引》&#xff0c;意味着微信小程序已经准备开启广告投放权限。面向10亿用户…

做了个小程序,广告收益2.60元广告费

呜呜呜&#xff0c;做了个小程序&#xff0c;广告收益好少啊&#xff01; 第一天投放&#xff0c;曝光了一千多&#xff0c;只有两块的收益ecmp好低&#xff01;&#xff01;&#xff01; 这收入实在太低了&#xff0c;一千多的曝光量才两块哎 用的banner和视频广告两个 视频…