uniapp实现微信公众号支付的方法步骤

2024-10-20 08:41:08

1、申请企业服务号（必须企业认证）

https://mp.weixin.qq.com

2、获取appid 和秘钥

菜单开发-基本配置获取秘钥、设置ip白名单

3、安全域名设置

进入公众号设置-功能设置配置

4、代码实现

点击请求优先去请求后台订单支付接口数据

将获取到的数据放入以下请求数据里面

callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(function() {
								uni.hideLoading();
								uni.redirectTo({
									url: '../member/orderdetail?id=' + that.id
								});
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},

到此这篇关于uniapp实现微信公众号支付的方法步骤的文章就介绍到这了,更多相关uniapp 微信公众号支付内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "
uniapp微信小程序实现一个页面多个倒计时

本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下设计图(需求) 在这里插入图片描述结构 <view class="group-list" v-for="item in message" :key="item.productId"> <view class="group-img" @click="navTo"> <image :src
uniapp在微信小程序中使用ECharts的方法

今天使用uniapp集成Echarts,实现地图图表的展示可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv
uniapp 实现微信小程序全局分享的示例代码

目录创建全局分享内容文件引入并全局注册该文件自定义页面分享内容 uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的全局混入概念. 下面直接上实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文件.示例文件路径为:@/common/share.js ,在该文件中定义全局分享的内容: export default { data() { return { // 默认的全局分享内容 share: { title: '全局分享的标
使用 UniApp 实现小程序的微信登录功能

1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录在main.js 中分定义全局变量,用于存储接口地址如果没有登录.则跳转至登录页面进入登录页面通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息获取成功,则说明已经授权过了,直接登录成功获取失败,则说明没有授权过,需要授权之后才能进行登录用户点击页面
uniapp,微信小程序中使用 MQTT的问题

最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1)MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得一
uniapp模仿微信实现聊天界面的示例代码

目录项目演示前言主界面 chat.vue中引入的js文件 chat.vue中引入的组件 submit.vue中引入的组件最后项目演示前言我是看B站的视频一个一个敲的,讲的还不错.可以去看看vue+node.js即时通讯聊天室APP开发前端篇主界面 chat.vue <template>  <view class="
uniapp实现微信公众号支付的方法步骤

目录 1.申请企业服务号(必须企业认证) 2.获取appid 和秘钥 3.安全域名设置 4.代码实现 1.申请企业服务号(必须企业认证) https://mp.weixin.qq.com 2.获取appid 和秘钥菜单开发-基本配置获取秘钥 .设置ip白名单 3.安全域名设置进入公众号设置-功能设置配置 4.代码实现点击请求优先去请求后台订单支付接口数据将获取到的数据放入以下请求数据里面 callPay: function(response) { if (typeof Weixin
微信公众号支付之坑：调用支付jsapi缺少参数 timeStamp等错误解决方法

这段时间一直比较忙,一忙起来真感觉自己就只是一台挣钱的机器了(说的好像能挣到多少钱似的,呵呵):这会儿难得有点儿空闲时间,想把前段时间开发微信公众号支付遇到问题及解决方法跟大家分享下,这些"暗坑"能不掉就不掉吧,要不然关键时刻出问题,真是让人急的焦头烂额. 双12客户的商城活动正在蓄势进行中,却有用户频频反馈说:支付不了,有问题,并截图如下: 当时问题感觉很奇怪,自己测试多次都ok啊,问题来了都赶紧解决吧,最终找到解决办法: 原因是程序中一个字符串变量被错误的设置为数字类型,解决方法很
java开发微信公众号支付

最近做了微信公众号支付的开发,由于是第一次做也摸索了几天的时间,也只是达到了实现功能的水平,并没有太多考虑到性能问题,所以这篇文章比较适合初学者. 微信公众号支付的总体其实很简单,大致就分为三步.第一步需要获取用户授权:第二步调用统一下单接口获取预支付id:第三步H5调起微信支付的内置的js.下面介绍具体每一步的开发流程. 一首先要明确微信公众号支付属于网页版支付,所以相较于app的直接调取微信支付要多一步微信授权.也就是需要获取用户的openid.微信公众号使用的交易类型是JSAPI,
微信公众号支付H5调用支付解析

最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程借用微信公众号支付api(地址 http://pay.weixin.q
Java版微信公众号支付开发全过程

一.微信官方文档微信支付开发流程(公众号支付) 首先我们到微信支付的官方文档的开发步骤部分查看一下需要的设置. [图片上传失败...(image-5eb825-1531014079742)] 因为微信支付需要较高的权限,只有认证了得服务号才有使用微信支付接口的权限,我们个人很难申请到,所以需要向其他朋友借用账号. 来到文档的业务流程部分,查看微信支付的流程(我觉得这个还是需要十分仔细的了解和查看的,这有助于你理解微信开发的流程). 然后,访问微信支付接口是要传递的参数很多,见统一下单 [图片上传
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解

本文实例讲述了PHP实现微信公众号支付功能.分享给大家供大家参考,具体如下: 直言无讳,我就是一个初涉微信开发的小白,写这篇博客的原因:一是为了给自己做下备忘记录,以便以后能回忆这条程序猿的坎坷路:二是希望能帮助到同是自学开发的小白们:三是对那些不屑一顾于我等尘埃的大牛们的控诉,小白的道路坎坷,你们凭什么总要一副高高在上的样子?我等敬而不畏... 背景介绍: 随着智能手机的普及,移动支付下的微信.支付宝所提供的便利需求不言而喻,好吧,至少我周围连个小摊贩的早餐都可以微信支付,而且人家手机还比我高
java微信公众号支付示例详解

本文实例为大家分享了java微信公众号支付示例代码,供大家参考,具体内容如下开始之前,先准备好:appid.商家号.商户密匙. 工具类: MD5Util.java package com.yiexpress.core.utils.wechat; import java.security.MessageDigest; /** * MD5工具类 */ public class MD5Util { public final static String MD5(String s) { char hex
Thinkphp微信公众号支付接口

本文实例为大家分享了Thinkphp微信公众号支付接口,供大家参考,具体内容如下第一步先把文件夹的那两个图片配置成一样的路径除了域名要改其他保持一致. 第二步把 Weixinpay 这个文件夹放在 \ThinkPHP\Library\Vendor 将Weixinpay文件夹放置到这个Vendor文件夹中第三步把 WxJsAPIController.class.php 这个php文件 \Home\Controller 这里面第四步把 WxJsAPI这个文件夹
微信公众号支付（一）如何获取用户openId

一.获取apikey,appsecret与商户号注册公众号.商户号二.获取用户的OpenId 1.设置[授权回调页面域名] 官方解释:用户在网页授权页同意授权给公众号后,微信会将授权数据传给一个回调页面,回调页面需在此域名下,以确保安全可靠.回调页面域名不支持IP地址. 2.用户同意授权我是把这个url写在微信菜单下的,当进入这个页面的时候就让用户同意.注意:好像是静默授权的,用户不知道 1.url: https://open.weixin.qq.com/connect/oauth/aut
vue项目使用微信公众号支付总结及遇到的坑

微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

uniapp实现微信公众号支付的方法步骤

目录

1、申请企业服务号（必须企业认证）

2、获取appid 和秘钥

3、安全域名设置

4、代码实现

相关推荐

随机推荐