vue 微信公众号支付 jssdk jsapi实现微信支付(完整版)
是自己项目里支付功能测试成功后的代码参考,希望能帮助到曾和我一样想找到有效参考借鉴的朋友们,
废话不多说,直接讲具体的操作规程及完整代码
代码部份:
一、vue的环境配置:
1. 先在当前项目的命令行工具里安装npm install weixin-jsapi
2. 在当前支付页面引用该weixin-jsapi
import wx from 'weixin-jsapi'
二、调用后台接口,正式使用jssdk:
created(){this.userId = JSON.parse(Cookie.get("user")).id;//这是在我页面需要获取的userid,不需要的可自行删悼,不在支付代码范围this.getConfig();,
},
methods: {getConfig(){console.log(window.location.href);var url = window.location.href;this.$http.post('**此处写后台提供获取jsapi相关配置的接口**',{encodeUrl:Encrypt(url.split("#")[0]) //直接丢弃#及后面的字符串 注意这里Encrypt因为我的项目里使用了ase加密解密,所以这么写的}).then(function(response) {if(response.data.flag == true){var data = JSON.parse(Decrypt(response.data.data));//将解密后的字符串转为对象 Decrypt这里是解密,不需要的就直接过滤悼console.log(data);//下列的data.均为后台接口返回的字段,比如我的项里里返回的是 appid,timestamp,nonceStr,signaturewx.config({debug: ture,//这里一般在测试阶段先用ture,等打包给后台的时候就改回false,appId: data.appid,timestamp: data.timestamp, nonceStr: data.noncestr, signature: data.signature,jsApiList: ['chooseWXPay']})wx.ready(function(){wx.checkJsApi({jsApiList: ['chooseWXPay'],success:function(res){console.log("seccess")console.log(res)},fail:function(res){console.log("fail");console.log(res)}})})}else{Toast({message: response.data.detailMsg});}}).catch(function(error){Toast({//提示引用的是mint-UI里toastmessage: '获取config失败,请重试'});});},//报名缴费 ( 支付按钮绑定@click="toapply()"事件)toapply(id){ var $this = this;this.$http.post('**此处写后台提供的获取支付json数据接口**',{encodeStr:Encrypt(id)//项目里的加密}).then(function(response) {if(response.data.flag == true){var data = JSON.parse(Decrypt(response.data.data));//将解密后的字符串转为对象console.log(data);wx.ready(function(){wx.chooseWXPay({appId:data.appId,timestamp: data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'paySign: data.paySign, // 支付签名success: function (res) {//跳转到支付成功页面有这个页面$this.$router.push({path: "/success_page",name:"success_page"})console.log(res);},cancel: function (res) {//提示引用的是mint-UI里toastToast('已取消支付');},fail: function (res) {Toast('支付失败,请重试');}})})}else{Toast({message: '获取支付信息失败,请重试',});}}).catch(function(error){Toast({message: '获取订单信息失败,请重试',});console.log(error);});},
}
这里代码部份完成后,就支付测试看看提示,如若弹出以下提示说明签名是正确的
二、商户和公众号后台配置
1.先去商户号后台里配置url域名:商户平台–>产品中心–>开发配置
ps:这里的url域名通常是主域名,格式比如:www.wangzhi.com/
然后到微信公众号后台,公众号设置/功能设置里配置url域名
ps:这里要与商户后台里的配置域名同步
代码和配置都完成后,测试结果如下:
最后,讲讲我在支付过程中遇到的问题:
因为微信支付众所周知的测试麻烦,我是直接完成代码后打包给后台发布正式环境测试的,测试过程中一直出现以下的弹窗提示信息:
排除法,代码里的签名没有bug的情况下,还一直出现这个提示,那就只有一个问题,url路径配置,网上查了很多说url路径中不能带# ,说是需要把把路由的hash模式改为hostry模式,如下:
还说让后台也需要做去悼#相应的改动,按这个方法打包给后台测试 ,结果页面就出现404了,行不通,所以我是利用处理如下:
url.split("#")[0]直接丢弃#及后面的字符串
后台没有作#处理,后面就发现我们是商户后台没有配置url域名这个问题,是这里面的域名配置不能带有#, 配置好后台之后,测试就成功了,还别说,测试成功的那一刻,倍儿有成功感了
vue 微信公众号支付 jssdk jsapi实现微信支付(完整版)相关推荐
- (第三方平台)开发相关,解除80端口占用,微信公众号分享jssdk实现,微信开放平台登录接口接入,2022微信分享接入本地调试,微信分享定制
一.开发相关 1.平台地址 微信开放平台 QQ互联平台SDK 2.文章收集 来自CSDN兄台的QQ登录使用的教程 微信网站应用开发的详细流程和引导 VueJs单页应用实现微信网页授权及微信分享功能 [ ...
- Js微信公众号引JS-SDK调起微信支付
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> //后台返回的 ...
- 利用微信公众号实现商品的展示和支付(2)
在前面随笔<利用微信公众号实现商品的展示和支付(1)>介绍了商品的列表和明细信息的处理,本篇随笔接着上一篇,继续介绍关于商品的微信支付和购物车处理方面,其中微信支付里面,也涉及到了获取微信 ...
- 微信企业号和微信公众号使用js-sdk说明和注意事项
一.1.微信公众号使用JS-SDK说明文档 (官方):https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 2.企 ...
- 【微信公众号开发】八、微信JS发起支付
重要声明:本文章仅仅代表了作者个人对此观点的理解和表述.读者请查阅时持自己的意见进行讨论. 目录 本系列博文还包含了下面的博客: [微信公众号开发]一.运作及配置流程简介 [微信公众号开发]二.解析微 ...
- url 微信公众号开发 配置失效_微信公众号开发之授权登录
一.UnionId和openId 微信登录最重要的两个返回信息,一个是UnionId,一个是OpenId.两者之间有着必然的联系. UnionID机制的作用说明:如果开发者拥有多个移动应用.网站应用和 ...
- 微信公众号开发系列-玩转微信开发-目录汇总
引言 最遗憾的不是把理想丢在路上,而是理想从未上路. 每一个将想法变成现实的人,都值得称赞和学习.致正在奔跑的您! 在现在这个无处不在的互联网背景下,各种应用已不再仅仅局限于网页或桌面应用了,IOS. ...
- 微信公众号官网平台与微信公众号第三方平台的区别
微信公众号官网平台 普通的微信公众账号只能开启编辑模式,编辑模式缺点: 1)功能有限,无法开发API丶地理位置回复等信息: 2) 文字回复有300字限制,关键字回复上限为200条; 3)关键字回复较多 ...
- 关于微信公众号页面获取code进行微信授权登录
关于微信公众号页面获取code进行微信授权登录 前言 提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...
- 微信公众号迁移丨如何迁移微信公众号 最详细公众号迁移流程和方法
微信公众号迁移丨如何迁移微信公众号 最详细微信公众号迁移流程和方法 微信公众号如何迁移?微信公众号迁移公证书需要准备哪些资料? 怎么迁移微信公众号! 教你迁移微信公众号_迁移完成后,原账号就注销了,无 ...
最新文章
- Angular学习心得之directive——require选项的细节
- iOS经典面试题之深入分析block相关高频面试题
- Cannot resolve xxx.5.5
- c# 自定义应用程序配置文件(app.config)
- DataWhale组队-Pandas(下)缺失数据(打卡)
- java动态加载类 框架_java运用RMI框架类的动态加载不成功
- Jmeter接口测试三种类型
- 一条SQL语句查询出成绩名次 排名 (转)
- STM32 FOC5.2电机库中中的电流采样改为反向放大
- java调用接报400_java调用webservice报400错误,请大神赐教
- 思维导图软件哪个好?不要错过这份思维导图软件合集
- 数据结构之图(九)——拓补排序
- 小知识:移动硬盘打不开是什么原因造成的?
- Ubuntu 16.04 创建无线热点
- twosum 两数之和 C++实现 java实现
- html设置文字超过字数_CSS限制字数,超出部份显示点点点...
- 基于Web的电子商务解决方案(1)(转)
- 多核异构核间通信-mailbox/RPMsg 介绍及实验
- Android物联网应用程序开发(智慧园区)—— 图片预览界面
- oracle高水位线以及pctfree、pctused
热门文章
- 【K8S】K8S 1.18.2安装dashboard(基于kubernetes-dashboard 2.0.0版本)
- 使用IMS系统开发研发周工作任务跟踪系统+项目工时汇报系统
- 读《商业分析实践指南》
- vsphere 导入虚拟机_Vmware虚拟机教程之vmware vsphere 打开本地的虚拟机资源,workstation中的虚拟机导入到vsphere...
- hello.world程序的编写和运行
- 免费亚马逊服务器过期收费,申诉并得到解决
- 用Java实现一个游戏角色绘制的动画类
- DevOps 面试题集锦
- win7系统数据库服务器,win7可以做数据库服务器吗
- win7计算机信息服务,WIN7系统服务详解.pdf