h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）

前端的写法

1.封装wxPay.js

import wx from 'weixin-js-sdk' //先下载后引入

export function wexinPay(data) {

return new Promise((resolve, reject) => {

// 后台传入数据

const {

appId,

timeStamp,

nonceStr,

signature,

package,

paySign,

signType

} = data

// 验证微信环境

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: appId, // 必填，公众号的唯一标识

timeStamp: timeStamp, // 必填，生成签名的时间戳

nonceStr: nonceStr, // 必填，生成签名的随机串

signature: signature, // 必填，签名，见附录1

jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

})

wx.ready(function() {

wx.chooseWXPay({

timeStamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符

nonceStr: nonceStr, // 支付签名随机串，不长于 32 位

package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***)

signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'

paySign: paySign, // 支付签名

success: function(res) {

// 支付成功后的回调函数

resolve(res)

fail: function(res) {

// 失败回调函数

reject({

payFail: res

})

}

})

wx.error(function(res) {

reject({

configFail: res

})

// config信息验证失败会执行error函数

})

}

2.使用方法

import wxPay from '文件路径'

wexinPay(res.data).then(res=>{

console.log("支付成功")

// do something

}).catch(err=>{

console.log('支付失败')

// do something

})

h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）相关推荐

h5微信本地调试 vue_Vue开发Html5微信公众号的步骤
一.调起微信支付在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效. (1)大致流程: (2)调用代码示例: mounted(){ if (typ ...
h5微信本地调试 vue_vue微信授权解决方案[如何本地实现授权]
之前是自己太年轻,写什么[最终解决方案].这一次的项目vue移动端电商项目,做了很多的优化.大家都知道授权需要每次都要发布到线上,本地的需要代理,这让我们很头疼.后面会介绍一个本地直接授权的方式,真的 ...
h5微信本地调试 vue_VUE开发微信H5页面总结
写在前面刚入门前端的时候写过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫.现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录.防止自己以后再去解决解决过的问题. ...
h5微信本地调试 vue_vueh5中使用微信sdk
微信官方sdk教程安装vue 微信sdk 使用NPM安装,不会的百度学npm install jweixin-module --save 创建一个wxsdk.js 文件// 引入微信sdk var ...
h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...
UniApp本地调试H5跨域(谷歌chrome浏览器,UniApp内置浏览器不存在此问题)的推荐方案:欺骗浏览器,让浏览器觉得你没有跨域(其实还是跨域了,用的是代理) 客户器端解决方案(亲测可用): ...
微信公众号开发-搭建微信本地调试环境借助蜻蜓映射实现内网穿透
微信公众号开发过程中,为了方便调试,经常需要将本地部署的接口让外网能直接调用到,这里我们使用内网穿透工具"蜻蜓映射"(还有其他同类型的工具如: frp,Ngrok)来将本地接口映射 ...
微信多开服务器,PC端微信多开
PC端微信多开还有,分身前让我再去找分身的切换公众号,如"微信公众号id":打开该公众号后,微信客服会给您发一条信息,请您关注"微信软件管理":为了有效果,将 ...
java实现微信的逆向分析_PC 端微信逆向分析
关键字: 微信.duilib库hook,duilib模拟点击. 最近有朋友问我libcef如何注入js,然后又谈到微信用了libcef云云. 捣腾了一下午,知道怎么注入js后,发现朋友是需要auto ...
朋友圈点赞，微信发红包，视频的播放，Pc端微信加群，app端微信加群的测试点
测试点经典例题*** 朋友圈点赞点用例的测试点: 1.是否可以点赞 2. 是否可以取消点赞 3. 多次点赞会出现什么情况 4. 多人点赞时显示是否按照时间进行排序 5. 点赞会不会提示发圈人 6. 取 ...

h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）

h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）相关推荐

最新文章

热门文章