导语

作为一个先接触微信小程序再做微信公众号的前端萌新，第一次写微信网页的微信支付，感觉步骤有点繁琐，写篇博客帮助一下有困惑的小伙伴，也防止以后忘记
要实现公众号微信支付，最基础的是拥有一个微信服务号、一个微信商户平台账号、一个服务器和域名，且微信服务号绑定了微信商户平台，这些步骤就不细说了

一、微信后台配置接口

1.配置微信支付的合法地址

登录微信商户平台，进入产品中心——>开发配置，设置JSAPI支付授权目录，输入你的服务器域名和文件目录，然后输入密码和验证码就可以配置成功。
然后进入账户中心——>API安全——>API密钥
这里需要配置一个给后台的秘钥（这个应该主要是后台考虑的问题），32位数字字母的秘钥，要保存好，忘了只能重设。

2.配置JS接口安全域名

这次要登录微信公众平台，登录你的服务号，进入公众号设置——>功能设置，设置JS接口安全域名，JS接口安全域名是确保你可以在这个网页调用微信的SDK的
设置这个的时候要在服务器你填的目录下放一个微信提供的txt文件，要和后端一起合作完成

二、安装微信SDK依赖

1.安装

npm install weixin-jsapi

2.在需要的页面导入

import wx from "weixin-jsapi"

三、在页面中配置SDK

微信SDK在每个需要使用的页面都要进行配置，直接在页面创建的时候配置

created() {//获取当前页面urllet url = location.href//调用后端接口，给后台url，让后台返回appId、时间戳、随机串、签名，建议vue路由使用hash模式，可以根据#分隔路由getJsSDKInfo({ticketUrl: url.split("#")[0]}).then(res => {console.log(res)wx.config({debug: false,//用于调试，这里一般在测试阶段先用true，等打包给后台的时候就改回false,appId: res.data.result.appId,timestamp: res.data.result.timestamp,nonceStr: res.data.result.nonceStr,signature: res.data.result.signature,jsApiList: ['chooseWXPay']//需要使用的API，此处只使用了微信支付接口})//查看配置是否成功，成功时候才能使用微信SDKwx.ready(() => {wx.checkJsApi({jsApiList: ['chooseWXPay'],success: function (res) {console.log("success")console.log(res)},fail: function (res) {console.log("fail");console.log(res)}})})})},

在成功配置之后，我们就可以在需要的地方调用微信支付的接口了

四、使用微信支付接口

    pay() {//监听需要支付的按钮，调用该函数//调用后台接口，获取时间戳、字符串、签名方式、支付签名和packagegetPayInfo({reportId: this.resultId}).then(res=>{console.log(res)wx.chooseWXPay({timestamp: res.data.result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: res.data.result.nonceStr, // 支付签名随机串，不长于 32 位package: res.data.result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: res.data.result.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: res.data.result.paySign, // 支付签名success:  (res)=> {//成功回调函数console.log("success")getReportDetails()//支付成功之后需要做的事}})})}

Vue微信网页微信支付相关推荐

微信网页端支付功能(前端)详解
微信支付功能其实与登录授权功能是有相通之处的,都是调用微信的JSAPI,直接搜索JSAPI就可以看见微信支付的文档.接下来我说一下支付功能我的思路. 首先 : 用户登录进入页面,支付调取统一下单接口, ...
微信网页JSAPI支付
微信jspi支付只适用于微信内部浏览器使用 JSAPI支付官方文档主要流程分以下一个步骤 1.根据官方文档的(开发步骤)进行一些相应的配置(域名) 2.进入支付界面后立即执行以下代码 window. ...
微信网页开发(6)--图像接口
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. 背景 2. 代码编写 3. 调试 4. 小结 1. 背景本篇来实现下图像相关的接口,包括拍照.预览.上 ...
微信网页开发(8)--地理位置接口
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. 背景 2. 代码 3. 测试 1. 背景微信网页提供了获取当前地理位置经纬度,以及通过内置地图查看当前 ...
使用beecloud和easychat 做微信H5 微信公众号支付遇到的坑
首先我先来说明微信h5和微信公众号支付的区别微信H5指的是微信网页端支付.微信公众号支付指的是微信浏览器内发起微信支付,这种支付都是属于微信公众号支付.俩者本质的区别就是H5不需要微信网页授权,但是 ...
微信网页开发(4)--使用JSSDK基础接口
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. JSSDK接口 2. 基础接口 3. 开发流程 3.1 绑定域名 3.2 引入JS文件 3.3 通过co ...
微信网页开发(10)--扫一扫功能接口
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. 背景 2. 代码 3. 测试 1. 背景我们可以在微信网页调起扫一扫功能,可以识别一维码.二维码的内容 ...
利用fiddler和mock调试本地微信网页
利用fiddler和mock调试本地微信网页微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...
html发起微信或支付宝支付,vue实现-微信网页中唤起支付宝支付
微信浏览器内是无法唤起支付宝的,会提示在浏览器打开,类似下面 image.png 所以在微信公众号的支付宝支付最终是通过手机浏览器唤起的支付宝支付,按照手机网站的支付方式即可. 官方也有demo,官方 ...

Vue微信网页微信支付

基于Vue框架的微信网页进行微信支付

导语