vue 微信公众号支付接口_vue实现微信公众号支付DEMO

预备工作

连接电源

打开你的电脑

打开你的vscode

获取appid

npm install weixin-js-sdk

开撸

在你的支付按钮上添加一个事件、代码为:

var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=输入你的appid&redirect_uri=http://tdjl.kurongdashi.com?pay='+msg+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'

location.href = url;

1.1 url这串链接是微信给你提供的,里面的具体参数看下图,就不再详解了,我这么菜都能看懂的,你也行,这部分最主要的是为了获取code然后再获取openid。

1.2 在redirect_uri=这里填写你们的域名,前提是在微信白名单中内设置了,这部分一般都不归我们管,然后?后面我自己添加了一个金额参数,用于提交所充值的金额,因为这部分页面只是做一个跳转,所以要保存金额,当然也可以用vuex来处理金额部分,我就懒得用了。

2. 在跳转链接后,没出任何问题,会重定向到你redirect_uri中设置的地方,这时,url栏里有了一些非常重要的参数,首先就是code,然后则是自己设置的金额参数,把它们拆接下来继续下一步操作,代码为:

let str = location.href,

num = str.indexOf("?");

str = str.substr(num + 1);

let arr = str.split("&");

var code = arr[1].split('=')[1]

var moneys = arr[0].split('=')[1]

this.axios.defaults.headers.common["X-Api-Token"] =localStorage.access_token;

this.axios.get('/pay/openid', {

params: {

'code': code //这部分做过小程序的人就会很熟悉

}

}).then((response)=>{

var openid = response.data.data.openid

this.axios.post('/user/recharge', {

'price': moneys,

'pay_type': 1,

'openid': openid

}).then((response)=>{

//关键代码,里面所填写的资料都是后台给你的,所以粘贴复制就行了

WeixinJSBridge.invoke(

'getBrandWCPayRequest', {

"appId": response.data.data.appId, //公众号名称,由商户传入

"timeStamp":response.data.data.timeStamp, //时间戳,自1970年以来的秒数

"nonceStr":response.data.data.nonceStr, //随机串

"package": response.data.data.package,

"signType": response.data.data.signType, //微信签名方式

"paySign": response.data.data.paySign //微信签名

},

function(res){

//我这里无论成功与否,都会跳转到我设置的页面中,且带了一个参数,用于跳转到原来的页面时给用户提示充值是否成功

if(res.err_msg == "get_brand_wcpay_request:ok" ) {

console.log('支付成功')

window.location.href="http://tdjl.kurongdashi.com/#/paycenter?cg=cg";

}else if(res.err_msg == 'get_brand_wcpay_request:cancel'){

window.location.href="http://tdjl.kurongdashi.com/#/paycenter?qx=qx";

}else{

window.location.href="http://tdjl.kurongdashi.com/#/paycenter?sb=sb";

}

}

);

}).catch((response)=>{

console.log(response)

})

}).catch((response)=>{

console.log(response);

})

结尾补充

当时弄这个东西弄了一个通宵,第一次做,没头绪加上开发公众号测试代码真的好坑,每次都是线下代码修改完毕得上传到线上打开微信开发者工具测试反复如此,好蛋疼,还有一种就是直接在线上开发,保存即可看,不知道还有没有其他方式。

这是属于微信内H5支付,想开发微信外调起微信支付的,在公众号中设置一下权限整体流程也差不多,代码写的比较low,能实现功能不出BUG一分钱一分货是我的座右铭,大神勿喷。

结语:本人目前所会的都来自Dell老师的一门实战课程,https://coding.imooc.com/class/203.html 感谢Dell老师的专业与付出的汗水,学完该课程差不多也会了微信小程序开发,反正我是这样的,嘿嘿。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/551210.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何将文件二进制传输至aix服务器,有什么办法把文件从WINDOWS系统中传到AIX中?...

有什么办法把文件从WINDOWS系统中传到AIX中?(2011-12-21 04:19:38)标签:杂谈有什么办法把文件从WINDOWS系统中传到AIX中?我有一台笔记本可以远程登陆170和F85,两台都是AIXV5.2,原来ML是04,想升级&#xff0…

小米手机硬改技术_小米11手机爆料:首发骁龙875 或采用屏下摄像头技术

12月1日高通应该就要公布骁龙875处理器,而对于这颗2021年的旗舰芯片,小米手机必然要抢首发,这也是他们一贯的传统。据最新消息称,小米11手机有望首发骁龙875处理器,不过这款手机预计要在明年3月份左右推出,…

小企业文件打印服务器,小企业云服务器方案

小企业云服务器方案 内容精选换一换在“确认配置”页面,查看云服务器配置详情。如果您对价格有疑问,可以单击“了解计费详情”来了解产品价格。如果您对价格有疑问,可以单击“了解计费详情”来了解产品价格。企业项目该参数针对企业用户使用。…

linux安装python27_linux下安装python27 nginx 和uwsgi

注意:python27 默认没有安装 pip 和setuptools所以要提前安装。(务必先提前安装python27 哈 )wget --no-check-certificate https://bootstrap.pypa.io/ez_setup.pypython ez_setup.py--insecurewget https://pypi.python.org/packages/11/b6/abcb525026a4be042b486…

太太丘舍去_过中不至,太丘舍去,去后乃至的意思

展开全部过了正午朋友还没有到,陈太丘不再等候他而离开了,陈太丘离开后朋友才到。原文出自e69da5e6ba903231313335323631343130323136353331333433643131《陈太丘与友期行》南北朝刘义庆陈太丘与友期行,期日中。过中不至,太丘舍去…

5怎么选国外节点_外卖包装怎么选?这5个技巧要掌握

(↑点上图“知识卡片”,按右上角箭头,可分享至朋友圈保存↑)在这个重颜值的时代,消费者对于外卖包装的诉求在逐渐提高,在餐品质量差异不大的前提下,那些包装好的商品,更具市场竞争力,能加深消费…

基于jmx监控kafka_0542-6.1.0-非安全环境下Kafka管理工具Kafka Eagle安装使用

1.文档编写目的Fayson在前面的文章介绍了《0374-如何在CDH集群中部署Kafka Manager》,本篇文章Fayson介绍另外一款的监控工具Kafka-eagle,它可以同时监控多个集群,监控集群中Topic的被消费情况(包含Lag产生、Offset的改变及Partition分布)&am…

android 怎么调用js项目_APP逆向神器之Frida【Android初级篇】

说到逆向APP,很多人首先想到的都是反编译,但是单看反编译出来的代码很难得知某个函数在被调用时所传入的参数和它返回的值,极大地增加了逆向时的复杂度,有没有什么办法可以方便地知道被传入的参数和返回值呢?答案是有的…

jdbc和mysql做游戏排行榜_MySQL数据库与JDBC编程

欢迎关注公众号:xfxuezhangMySQL数据库与JDBC编程JDBC (Java Database Connectivity)DDL(Data Definition Language,数据定义语言)语句创建表修改表结构增加列定义修改列定义删除列删除数据表清空表MySQL重命名数据表MySQL修改列名数据库约束索引(一个数…

mysql goldengate_goldengate同步mysql

一、source端add extract extl,vam,begin nowADD EXTTRAIL F:\ogg\mysql\dirdat\rl, EXTRACT EXTLedit params extlextract extlsourcedb testlocalhost:3306,userid root,password xifenfeiexttrail F:\ogg\mysql\dirdat\rldynamicresolutiongettruncatestable test.t_1;add E…

mysql 将时间戳_mysql 将时间戳直接转换成日期时间

date为需要处理的参数(该参数是Unix 时间戳),可以是字段名,也可以直接是Unix 时间戳字符串后面的 %Y%m%d 主要是将返回值格式化例如:mysql>SELECT FROM_UNIXTIME( 1249488000, %Y%m%d )->20071120mysql>SELECT FROM_UNIXTIME( 1249488000, %Y年%m月%d )->2007年11月…

mysql数据库时间字段看不懂_mysql数据库时间字段看不懂

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航,为用户…

简单mysql优化_mysql常见语句的简单优化策略

常见sql优化方法(1)优化insert语句大批量插入数据:对于Myisam类型的表,可以通过以下方式快速的导入大量的数据。ALTER TABLE tblname DISABLE KEYS; loading the dataALTER TABLE tblname ENABLE KEYS;这两个命令用来打开或者关闭Myisam表非唯一索引的更…

mysql 字符串函数大全_mysql 字符串函数大全

返回字符串str的最左面字符的ASCII代码值。如果str是空字符串,返回0。如果str是NULL,返回NULL。mysql> select ASCII(2); -> 50mysql> select ASCII(2); -> 50mysql> select ASCII(dx); -> 100也可参见ORD()函数。ORD(str)如果字符串s…

ef mysql modelfirst_MySQL –EF edmx(Model First)– Sql Server table

一、mysql environmentWhen we create an new database,first We need draw er diagram for somebody to show your idea,but our company have no goodauthorised tool to design sqlserver ER diagram,so I use mysql graphical tool to design it, after that,you can use m…

db2 联邦 mysql_DB2联邦数据库及配置方法(及联邦密码修改)

如果您需要使用所有不同的数据库,包括选择、插入、更新和删除,就象所有的表都位于单个数据库中那样,那么将获得非常高的工作效率。数据库联邦就是要做到这一点:使所有表看起来象是在同一个数据库中那么,数据库联邦是怎…

apache支持mysql ubuntu_Ubuntu+Apache+PHP+Mysql环境搭建(完整版)

UbuntuApachePHPMysql环境搭建(完整版)一、操作系统Ubuntu 14.04 64位,阿里云服务器二、Apache1、安装Apache,安装命令:sudo apt-get install apache22、环境配置:1)配置文件:路径为/etc/apache2,配置文件是…

mysql t 保存_检查 (调试) - 离线消息保存到 MySQL - 《EMQ X Enterprise v4.1 中文文档》 - 书栈网 · BookStack...

离线消息保存到 MySQL搭建 MySQL 数据库,并设置用户名密码为 root/public,以 MacOS X 为例:$ brew install mysql$ brew services start mysql$ mysql-u root-h localhost-pALTER USERrootlocalhostIDENTIFIED BYpublic;初始化 MySQL 数据库:$ mysql-u r…

管家婆 mysql_管家婆数据库表.doc

管家婆数据库表.doc管家婆数据库表名称 代码 职员信息表 employee 库存商品信息表 Ptype 往来单位 btype 摘要表 Abstract 地区信息表 AreaType 会计科目表 atypecw 仓库信息表 Stock 部门信息表 Department 订单索引表 DlyndxOrder 订单明细表 BakDlyOrder 单据索引表 Dlyndx …

mysql5.7安装教程centos_MySQL5.7版CentOS系统简易安装教程

这一篇教程,我们一起来完成MySQL在CentOS系统中的安装。1、下载MySQL(Community版)RPM安装源。如果没有安装wget,需要先执行命令安装。执行命令:yum -y install wget然后,通过wget下载安装源。例如,下载到“/root/Down…