uni-app微信支付和H5打开微信小程序
一、微信支付
1. this.payType==0就是微信支付 支付宝支付代码就不贴了
paysubmit(){
if(this.payType==0){
//便于维护 单独写
// #ifdef H5
if(this.is_weixn()){
this.inWxWebPay();
// this.wxMpPay();
}else{
this.wxWebPay();
}
// #endif
// #ifdef APP-PLUS
this.wxAppPay();
// #endif
// #ifdef MP-WEIXIN
this.wxMpPay();
// #endif
}else{
this.zfbPay();
}
},
/**
* @Description: H5微信支付
* @author: ZXL
* @createTime: 2022-6-10 8:51:18
* @Copyright by 蓝创科技有限公司
*/
async wxWebPay(){
uni.showLoading({
title:'请稍等...'
})
let _this=this;
let payInfo = {
token: _this.token,
duesWaterId: _this.duesWaterId,
money: _this.shouldPay,
type: 3,
count: 1,
}
let res = await _this.request.post("/dues/setOrderWx", payInfo)
uni.hideLoading()
if(res.code==1){
// #ifdef APP-PLUS
plus.runtime.openURL(res.map2.mweb_url);
// #endif
// #ifdef H5
window.location.href=res.map2.mweb_url
// #endif
}
},/**
* @Description: 微信小程序支付
* @author: ZXL
* @createTime: 2022-6-10 11:05:26
* @Copyright by 蓝创科技有限公司
*/
async wxMpPay(){
uni.showLoading({
title:'请稍等...'
})
let _this=this;
let payInfo = {
token: _this.token,
duesWaterId: _this.duesWaterId,
money: _this.shouldPay,
type: 4,
count: 1,
}
let res = await _this.request.post("/dues/setOrderWx", payInfo)
uni.hideLoading()
if(res.code==1){
let payInfoDetail = res.map
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.map2.xcxtimeStamp,
nonceStr: res.map2.xcxnonceStr,
package: res.map2.xcxpackage,
signType: res.map2.signType,
paySign: res.map2.xcxpaySign,
success: function (res) {
_this.$set(_this.dfPayList[_this.payIndex],'payFlag',1)
_this.$set(_this.dfPayList[_this.payIndex],'isNormal','已缴费')
uni.showToast({
title:'支付成功',
icon:'success'
})
},
fail: function (err) {
uni.showToast({
title:'支付失败',
icon:'error'
})
}
});
}else{
uni.showToast({
title:res.mag,
icon:'none'
})
}
},
/**
* @Description: APP微信支付
* @author: ZXL
* @createTime: 2022-4-16 1:56:56
* @Copyright by 蓝创科技有限公司
*/
async wxAppPay(){
uni.showLoading({
title:'请稍等...'
})
let _this=this;
let payInfo = {
token: _this.token,
duesWaterId: _this.duesWaterId,
money: _this.shouldPay,
type: 2,
count: 1,
}
let res = await _this.request.post("/dues/setOrderWx", payInfo)
uni.hideLoading()
if(res.code==1){
let payInfoDetail = res.map
let payorderInfo = {
appid: payInfoDetail.appid,
noncestr: payInfoDetail.noncestr,
package: 'Sign=WXPay',
partnerid: '1534302791',
prepayid: payInfoDetail.prepayid,
timestamp: payInfoDetail.timestamp,
sign: payInfoDetail.sign,
}
uni.requestPayment({
provider: "wxpay",
orderInfo: JSON.stringify( payorderInfo ),
async success( pays ) {
_this.$set(_this.dfPayList[_this.payIndex],'payFlag',1)
_this.$set(_this.dfPayList[_this.payIndex],'isNormal','已缴费')
uni.showToast({
title:'支付成功',
icon:'success'
})
},
fail( error ) {
uni.showToast({
title:'支付失败',
icon:'error'
})
}
})
}else{
uni.showToast({
title:res.mag,
icon:'none'
})
}
},
下面是微信内置浏览器支付
安装npm install jweixin-module --save
##判断是否是微信内置浏览器
is_weixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger') {
return true;
} else {
return false;
}
},
onLoad() {
this.code=this.getUrlCode().code
if(this.is_weixin()&&this.getUrlCode().code){ //判断是否是微信内置浏览器和code是否为空 然后取openid
this.getopenId(this.getUrlCode().code);
}
if (this.is_weixin()&&!this.wxAuthopenId&&!this.getUrlCode().code) {
window.location.href =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=”你自己appid“&redirect_uri='+
this.reqUrl+'/h5&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
}
},
getUrlCode() { // 截取url中的code方法
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
}
}
return theRequest
},
async getopenId(codes){
let res = await this.request.post("/pro/Wx/WxInformation",{code:codes})
if(res.code==1){
this.res=JSON.stringify(res)
uni.setStorageSync('wxAuthopenId', res.openId);
this.setWxAuthopenId(uni.getStorageSync('wxAuthopenId'))
}
},
然后就是
var jweixin = require('jweixin-module');
async gopay(){
let datas={
duesWaterId:1,
money:0.01,
token:this.token,
count:1,
type:4,
openId:this.wxAuthopenId
}
let res = await this.request.post("/pro/dues/setOrderWx",datas)
this.resmsg=JSON.stringify(res)
if(res.code==1){
this.paysign(res)
}
},
paysign(res){
jweixin.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.mapConfig.appId, // 必填，公众号的唯一标识
timestamp: res.mapConfig.timestamp, // 必填，生成签名的时间戳
nonceStr: res.mapConfig.noncestr, // 必填，生成签名的随机串
signature: res.mapConfig.signature, // 必填，签名
jsApiList: ['chooseWXPay'],
});
jweixin.ready(function() {
jweixin.checkJsApi({
jsApiList: ['chooseWXPay'], // 需要检测的JS接⼝列表，所有JS接⼝列表见附录2,
success: function(res) {
},
fail:function(res) {
}
});
jweixin.chooseWXPay({
appId: res.map2.xcxappId,
timestamp: res.map2.xcxtimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: res.map2.xcxnonceStr, // 支付签名随机串，不长于 32
package: res.map2.xcxpackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: res.map2.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: res.map2.xcxpaySign, // 支付签名
success: function(res) {
uni.showToast({
title: "付款成功！",
duration: 1000
})
},
cancel: function(res) {
uni.showToast({
title: "付款失败！",
duration: 1000
})
},
fail: function(res) {
uni.showToast({
title: "付款失败！",
duration: 1000
})
}
});
})
},二、H5打开微信小程序
1.微信js-sdk安装
npm install weixin-js-sdk
我用的uni-app
npm install wecomjsdk2.在使用的页面引入
import wx from 'weixin-js-sdk'
我使用的uni-app
var wx = require('wecomjsdk')3.代码
methods: {
// 监听error 函数
handleErrorFn(e) {
console.log('跳转失败', JSON.stringify(e))
},
// 监听launch 函数
handleLaunchFn(e) {
console.log('跳转成功', JSON.stringify(e))
},
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true,
appId: res.corpId, // 企业微信的corpID
timestamp: res.timeStampSec, // 生成签名的时间戳
nonceStr: res.nonceStr, // 生成签名的随机串
signature: res.sign,// 签名， --------------需要后台把生成签名的url改为当前页面url（pagesWork/skipWx/skipWx）,后台生成签名的请求接口参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
jsApiList: ['wx-open-launch-weapp','chooseImage', 'previewImage'],
openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
success(){
uni.showModal({
title:"成功提示",
content:"success"
})
},
fail(){
uni.showModal({
title:"失败提示",
content: JSON.stringify(res)
})
}
}