【微信小程序】模板消息推送（测试成功）。

note：
这几天想做微信小程序消息推送的功能，然后在网上找了好多教程，都没解决问题，官方文档写的教程由不够详细，所以走了好多弯路。
现在问题解决了，记录一下。
我在网上找的好多教程都不详细，虽然是贴代码出来了，但是好多都不说清楚是哪个文件的代码，真的很无语。

实现消息推送，需要先配置服务器域名、消息服务器推送配置。
请看我上一篇博客。
【微信小程序】消息推送服务器配置及服务器域名配置（记录坑）
https://blog.csdn.net/qq1445654576/article/details/89296942

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

今天上午参考了这篇文章，终于实现了模板消息推送的功能。开心。
https://www.cnblogs.com/Smiled/p/8204467.html

下面是我写的：
首先看效果吧

首先的要添加消息模板，这里我随便选一个为例

这样就选好消息模板了。

这里贴代码：

template-message.wxml

<form name='pushMsgFm' report-submit="true" bindsubmit='template_Msg'>  <button form-type="submit" type='primary'>发送模板消息</button>
</form>

template-message.js

Page({/*** 页面的初始数据*/data: {openid: "", //（这个不要改）这里为空值，待获取到openid时，会给它重新赋值.openid在app.js中获取token: "",//要推送的内容push_content_data: [//keyword1{value: "17软件工程A班",color: "#4a4a4a"},//keyword2{"value": "软件工程导论","color": "#9b9b9b"},//keyword3{"value": "P48 第5题","color": "#9b9b9b"},//keyword4{"value": "2019-04-17 10:00:00","color": "#9b9b9b"},//keyword5{"value": "今天你交作业了吗？ 别忘了，当初为何出发","color": "#9b9b9b"}]},//发送模板消息template_Msg: function(e) {wx.showLoading({ //期间为了显示效果可以添加一个过渡的弹出框提示“加载中”  title: '加载中',icon: 'loading',});//获取access_tokenwx.request({url: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + getApp().globalData.appId + "&secret=" + getApp().globalData.secret,success: (res) => {console.log(res);this.setData({token: res.data.access_token //将access_token存到data的token里});console.log("access_token:" + this.data.token);}});var fId = e.detail.formId; //获取formIdconsole.log("formId:" + fId);var access_token_url = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + this.data.token;var push_content = {"keyword1": this.data.push_content_data[0],"keyword2": this.data.push_content_data[1],"keyword3": this.data.push_content_data[2],"keyword4": this.data.push_content_data[3],"keyword5": this.data.push_content_data[4]};console.log(push_content)wx.request({url: access_token_url,//注意不要用value代替datadata: {touser: this.data.openid,template_id: 'w9btZxaxU6kt7PymBh5Z_SS86-TC-DmWyppNxlQTCxk', //换成你申请的模板消息id，  page: '/pages/template-message/template-message',form_id: fId,data: push_content,color: '#ccc',emphasis_keyword: 'keyword3.DATA'},method: 'POST',success: function(res) {wx.hideLoading();console.log("发送成功");console.log(res);},fail: function(err) {// fail  console.log("push err")console.log(err);}});},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var that = this;wx.login({success: (res) => {if (res.code) {wx.request({url: "https://api.weixin.qq.com/sns/jscode2session",data: {appid: getApp().globalData.appId, //从app.js中获得你的appidsecret: getApp().globalData.secret, //从app.js中获得你的secretjs_code: res.code,grant_type: "authorization_code"},success: (res) => {console.log(res);that.setData({openid: res.data.openid //存储openid})}})}}})} //onLoad
}) //Pages

app.js

//app.js
App({globalData: {userInfo: null,appId: "wxabcd1234", //这里换成你的appidsecret: "dsks4fdf2r63f5se2rerf23re"   //换成你的密钥},onLaunch: function () {// 展示本地存储能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},onLoad: function (options) {var that = this;wx.login({success: (res) => {if (res.code) {//获取openidwx.request({url: "https://api.weixin.qq.com/sns/jscode2session",data: {appid: getApp().globalData.appId,secret: getApp().globalData.secret,js_code: res.code,grant_type: "authorization_code"},success: (res) => {console.log(res);that.setData({openid: res.data.openid//将openid存起来}) }})}}})}
})

总结：
需要准备的东西
1.AppID(小程序ID)

在微信小程序后台获取

2.AppSecret(小程序密钥)

在微信小程序后台获取

3.formId

var fId = e.detail.formId; //获取formId

4.openid

只有用户登录时才能获取到。
这个在app.js中获取，而且只能在手机里才能获取到，编译器里获取不到
//获取openidwx.request({url: "https://api.weixin.qq.com/sns/jscode2session",data: {appid: getApp().globalData.appId,secret: getApp().globalData.secret,js_code: res.code,grant_type: "authorization_code"},success: (res) => {console.log(res);that.setData({openid: res.data.openid//将openid存起来}) }})

5.access_token

通过api获取
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

    //获取access_tokenwx.request({//APPID替换成你的appid, APPSECRET换成你的AppSecreturl: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET",success: (res) => {console.log(res);this.setData({token: res.data.access_token //将access_token存到data的token里});console.log("access_token:" + this.data.token);}});

6.template_id

【微信小程序】模板消息推送（测试成功）。相关推荐

java实现微信消息和小程序模板消息推送
002java实现微信模版消息推送本节知识点 1,注册微信公号测试账号 2,获取测试账号的用户openid 3,接入微信推送sdk 4,实现微信推送课程中用到的网址和文件 1,微信官方注册测试账号 ...
微信小程序开发—消息推送
微信小程序的消息推送简单的说就是发送一条微信通知给用户,用户点开消息可以查看消息内容,可以链接进入到小程序的指定页面. 微信小程序消息推送需要用户触发动作才能发送消息,比如用户提交订单.支付成功.一次 ...
微信小程序开发消息推送配置教程
微信小程序开发消息推送配置教程微信小程序开发消息推送配置这一块网上都是PHP居多,由于用egg.js写了一套验证方法. 第一步:填写服务器配置登录微信小程序官网后,在小程序官网的"设置- ...
java推送微信消息换行_5行代码实现微信小程序模版消息推送（含推送后台和小程序源码）...
我们在做小程序开发时,消息推送是不可避免的.今天就来教大家如何实现小程序消息推送的后台和前台开发.源码会在文章末尾贴出来. 其实我之前有写过一篇:<springboot实现微信消息推送,java ...
【Node.js】实现微信小程序订阅消息推送功能
实战项目名称:实现微信小程序订阅消息通知文章目录一.实战步骤 1. 登录微信小程序管理端,添加订阅消息模板 2. 定义好需要发送的消息 3.获取小程序的access_token 4. 发起请求,向 ...
微信小程序实现消息推送(调用小程序推送模板接口) 完整示例
wxml文件:<form bind:submit="testSubmit" report-submit="true" hidden="{{emp ...
【微信小程序】消息推送服务器配置及服务器域名配置（记录坑）
我最近想在微信小程序推送通知,于是开始学怎么弄模板消息. 首先要配置服务器域名和消息推送配置. 先配置服务器域名吧,这个简单. 配置服务器域名首先进入小程序后台>>开发>>开 ...
微信小程序订阅消息推送（附带后台java代码）
官方文档: 小程序前端:点击进入小程序服务端:点击进入一,代码实现(后端) ①定义实体类 package com.saic.fin.system.sendInfo;import lombok.Da ...
Java开发微信小程序订阅消息推送
使用到开源工具WxJava 这里环境使用到springboot 框架,废话不多说直接上干货. pom.xml引用 <!-- https://mvnrepository.com/artifact/ ...
微信小程序订阅消息推送-php
最近在给微信小程序写后端接口,有一个场景是每天给指定账号推送小程序消息,这期间踩了不少坑,希望记录下来能帮助导大家. 给小程序用户推送消息,首先需要获取用户的openid,这个是小程序的openi ...

【微信小程序】模板消息推送（测试成功）。

【微信小程序】模板消息推送（测试成功）。相关推荐

最新文章

热门文章