uniapp(微信小程序) - 最新详细实现微信支付+模板消息通知，详解小程序内微信支付功能及模板消息通知联动，用户线上微信支付后进行积分变动、余额变动等消息模板通知（详细示例代码，一键复制开箱即用）

已于 2024-09-12 15:28:42 修改
阅读量4.4k 收藏 8
点赞数 7
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app 微信小程序 微信支付 模板消息通知 微信付款后发送通知给用户 小程序内订单支付后发送模板消息 uniaApp小程序示例代码
于 2024-04-18 11:23:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/137912556
版权
本文详细介绍了如何在uni-app微信小程序中实现微信支付功能，并结合模板消息通知用户。用户支付后将收到消息模板，内容包括积分、余额变动等。提供了示例代码，适用于Vue2和Vue3，新手也能快速上手。
摘要由CSDN通过智能技术生成

效果图

在uniapp微信小程序端开发中，完成微信支付功能、模板消息通知用户功能，当用户支付后及时弹出模板消息到用户的微信中，微信支付与消息通知进行结合，自定义模板消息通知文案及点击查看。

uniapp Vue3和Vue2都能用，提供详细示例代码及申请配置支付和模板消息，跟着教程一键复制改个通知模板ID即可，新手小白快速上手！

在这里插入图片描述

申请配置消息模板

首先，进入微信公众平台，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
微信小程序 - 最新详细实现 “餐厅食堂外卖点餐“ 全屏左右联动菜单列表功能界面，附带搜索框、购物车功能、商品加减计算金额、折扣等，左侧商品分类，右侧列表数据，仿美团饿了么外卖点餐页面，饭店扫码点餐！
王佳斌
07-23 4069
微信小程序，vue2，vue3，左右联动菜单，商品分类页面，点餐界面，美团外卖点餐，左右布局界面，饿了么点餐页面，左分类右列表，小程序实现左侧菜单，外卖点餐联动，锚点，点击左侧大类后侧列表跟着变跟着刷新，菜单左右联动效果，左菜单右边列表数据，uniapp，左侧菜单,右侧列表双向联动效果，右侧商品滑动时，右侧列表双向联动效果，侧边菜单和右边滚动条，电商项目，购物车，商品加减计算，外卖选餐页面带购物车计算，自动计算金额，微信小程序外卖点餐界面源码，店铺页面滑动左右联动，点餐类小程序界面，堂食，扫码点餐，餐饮行业
微信小程序 - 最新详细实现 “左侧菜单，右侧内容“ 左右联动商品分类页面，左边是导航分类右侧是自定义内容，左侧分类菜单，右侧列表双向联动效果，左右二级联动，仿京东淘宝商城分类页面、美团外卖点餐界面！
王佳斌
07-23 3317
微信小程序，vue2，vue3，左右联动菜单，商品分类页面，左分类右列表，小程序实现左侧菜单，右侧列表双向联动效果，侧边菜单和右边滚动条，电商项目，点击菜单子分类联动对应商品，分类左右联动，上拉加载以及下拉刷新，右侧列表双向联动，商品分类左右联动，scroll-view，锚点，点击左侧大类后侧列表跟着变跟着刷新，微信小程序实现菜单左右联动效果，左菜单 右边列表数据，左侧菜单,右侧列表双向联动效果，右侧商品滑动时，左侧分类导航栏的相应分类被选中，商城分类滚动列表锚点(左菜单右列表)，美团外卖，京东商城，淘宝商
uniapp开发微信小程序订阅消息推送
qq_14811757的博客
09-03 1014
这里要注意的是，消息只能推送一次，要想推送多次，必须申请长期模版，不然每次推送完后就无法再推送，要想再次推送必须小程序那边再次订阅一次消息，很恶心，现在的长期模版貌似不好申请。由于我公司的一直使用的unionId,这个parseObject对象里面包含openId,也可以取到。把这个方法里面的API_KEY和SECRET_KEY换成你自己的小程序的。用户的openId获取是在小程序登录那步拿到的，后端会存起来。前端的部分基本就完成了，消息推送还是主要在后端。测试方法，传入用户的openId。
uniapp 微信小程序 微信支付
最新发布
不想成为可以改变世界的程序员，不是一个好程序员
10-01 2238
微信支付大致分为4步，具体看后端设计 1.获取code 2.根据code获取openid 3.根据openid，以及部分订单相关数据，生成prepayId (预支付交易会话ID) 4. 通过prepayId调用支付api，并让后端在支付api中返回支付相关配置参数，然后前端将支付配置参数设置到微信支付api上，进行支付拉起 （第3步和第4步 后端可以合成1步，生成prepayId的同时，并执行支付然后将支付配置返回给前端）
uniapp 微信支付功能
qq_42061817的博客
07-15 1900
由于最近面试时，被问到了这种问题，但是我回答的含糊不清。虽然以前做过这些功能，但是一直都没有去总结和记录，所以我决定回顾一下并记录下来。此支付为v2。
微信小程序uniapp+springboot实现小程序服务通知
qq_31745863的博客
06-20 3972
微信小程序uniapp+springboot实现小程序服务通知
uniapp微信小程序订阅消息发送服务通知
ITshayebuhui的博客
07-02 1150
这里我用uniapp的举例。在文档中，发起弹窗的请求方法为 wx.requestsubscribeessage(object object)，在uni中搜索此方法为: uni.requestsubscribeMessage(object object)，完全是一样的，只是调用的顶级对象不一样。注意，使用uni.requestsubscribeessage(object object)只能调用最多三个模板ID，想要查看自己是否订阅成功，可以调用uni.openSetting查看，开发者工具调用只会这样显示。
【uni-app微信小程序】实现支付功能
热门推荐
weixin_55846296的博客
05-24 1万+
实现微信支付功能需要在小程序后台配置支付相关信息，并且在前端代码中调用微信支付API进行支付操作。uni-app微信小程序实现支付功能整体流程大致如下：
微信小程序 picker 组件详解及简单实例
11-29
微信小程序picker 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input...
微信小程序自定义多列选择器使用详解
12-11
微信小程序在自带的表单组件中加入了选择器picker，并给出了常用的时间和省市区三级联动选择器，但日常开发中不可能仅仅使用这些选择器，所以我们在学习时先写一个常见的自定义选择器，用于满足项目中的日常需要。...
uni-app之微信支付.zip
07-28
本案例使用了uni-app技术完成了微信支付的基本功能，包括APP支付，小程序支付，PC端扫码支付，H5支付，公众号支付。
uni-app微信公众号支付.vue
08-01
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填，公众号的唯一标识 timestamp: res.data.timestamp, // 必填，生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 signature: res.data.signature, // 必填，签名 jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log("验证失败！") }); } }) }
uniapp小程序订阅通知
努力、拼搏、奋进
04-27 734
uniapp小程序订阅通知
uniapp微信小程序消息订阅
youhebuke225的博客
08-21 979
uni-app中实现微信小程序的消息订阅主要依赖于微信小程序自身的API和后台管理功能。你需要先在微信公众平台注册消息模板，然后在uni-app中调用API请求用户订阅，最后在服务器端发送消息。整个流程涉及前端、后端和微信平台的配置，需要综合考虑。
uniapp实现微信小程序支付（前端）
2301_77513512的博客
01-08 3253
url:"请求路径",method:"方法",data:{后端需要的数据}，//payRes这里主要有几个参数后面会调取uni的支付接口需要使用，下面会介绍每个数据//这个请求结束后就是前端最重要的步骤了，需要拉起支付密码框来完成支付"provider": "wxpay",//支付方式"timeStamp":payRes.data.timeStamp,//时间戳"nonceStr":payRes.data.nonceStr,//随机字符串。
uniapp 微信小程序支付流程
weixin_50012993的博客
07-09 1225
在整个支付流程中，安全性是非常重要的。务必注意保护用户的敏感信息，如用户密码、支付密钥等，不要明文传输，防止数据泄露1。
uniapp微信支付流程
每天都想吃好吃的
03-06 1311
以上是使用uniapp结合微信支付的大致流程和代码示例，具体的实现方式可能会根据项目需求和插件的不同而有所差异。在微信公众平台申请开通微信支付，并获取到支付相关的配置信息，如appid、mch_id、key等。在需要支付的页面中，调用支付插件的方法，生成支付订单。文件中配置插件的权限，以及支付的回调页面路径。插件，该插件封装了微信支付的相关功能。在uniapp的项目中安装。
uni-app中实现微信小程序/公众号订阅消息推送功能
编程洪同学
04-04 1万+
在开发业务时时常遇到需要向用户发送一些通知，如欠费通知、会员到期通知等等。 这里使用官方提供的 uni-subscribemsg 公共模块实现推送功能。uni-subscribemsg 公共模块可以方便开发者快速接入小程序订阅消息和微信公众号模板消息。目前 uni-subscribemsg 支持：微信公众号模板消息、微信小程序订阅消息。
微信小程序三级地址联动实现详解
在微信小程序中，为了实现类似ECShop这样的电商应用的地址选择功能，通常需要用户选择省份、城市和区县，这被称为三级联动。`picker`组件是微信小程序中用于选择器的一种组件，它可以用来让用户在预设的范围内进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值