思路:
先判断是app/h5/微信小程序
如果是h5,判断是微信内打开还是微信外
app.vue
onLaunch: function() {
uni.setStorageSync('h5Type', 0)
// 微信小程序 需要openid
// #ifdef MP-WEIXIN
this.getOpenidFunc()
// #endif
//这边记录了设备类型
let port = uni.getSystemInfoSync().uniPlatform
switch (port) {
case 'app':
uni.setStorageSync('device_type', 4);
break;
case 'web':
uni.setStorageSync('device_type', 2);
break;
case 'mp-weixin':
uni.setStorageSync('device_type', 5);
break;
default:
uni.setStorageSync('device_type', 4);
break;
}
// 获取支付pro
uni.getProvider({
service: 'payment',
success: function (res) {
uni.setStorageSync('provider', res.provider[0])
}
});
// #ifdef H5
// h5 判断微信内还是微信外
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger'){
// 微信内
uni.setStorageSync('h5Type', 1)
let code = this.getUrlName('code')
//如果有code,直接换openid
if (code){
getOpenIDByCode({code: code,type:3}).then(res => {
if (res.status == 1) {
uni.setStorageSync('openid', res.res.openid)
uni.setStorageSync('session_key', res.res.session_key)
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}else{
// 如果没有openid,需要重定向拿code换openid
if (!uni.getStorageSync('openid')){
this.getwechatQrcode()
}
}
} else {
// 微信外
uni.setStorageSync('h5Type', 0)
}
// #endif
},
onShow: function() {
var that = this
// #ifdef MP-WEIXIN
uni.checkSession({
success(e) {
},
fail(){
that.getOpenidFunc()
}
})
// #endif
},
methods: {
//code换openid 小程序
getOpenidFunc(){
uni.login({
success: res => {
getOpenIDByCode({code: res.code,type:2}).then(res => {
if (res.status == 1) {
uni.setStorageSync('openid', res.res.openid)
uni.setStorageSync('session_key', res.res.session_key)
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}
})
},
//重定向拿code
getwechatQrcode (){
var appid = 'xxx'
var redirect_uri = encodeURIComponent(window.location.href)
var scope = "snsapi_base"
var wxUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope='+scope+'&state=STATUS#wechat_redirect'
window.location.replace(wxUrl)
},
getUrlName (name) {
/* eslint-disable */
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
}
`
``
支付页面:
//支付宝支付,在小程序和公众号下,不显示
<view class="pay_item" @click="toPayResult(0)" v-if='device_type!==5||h5Type!==1'>
<view class="pay_name">
<image src='/static/markrt/pay_2.png'></image>
<text>支付宝支付</text>
</view>
<image src='/static/markrt/arrow.png' class="pay_arrow"></image>
</view>
<view class="pay_item" @click="toPayResult(1)">
<view class="pay_name">
<image src='/static/markrt/pay_3.png'></image>
<text>微信支付</text>
</view>
<image src='/static/markrt/arrow.png' class="pay_arrow"></image>
</view>
return {
device_type: uni.getStorageSync('device_type'),
h5Type: uni.getStorageSync('h5Type')
}
toPayResult (type){
//webType 0 app 1 小程序 2 h5
// #ifdef APP-PLUS
var webType = 0
// #endif
// #ifdef MP-WEIXIN
var webType = 1
// #endif
// #ifdef H5
var webType = 2
// #endif
// chooseType 0 支付宝 1 微信
var chooseType = type
//1.支付宝-APP;3.支付宝-H5;4.微信-APP;6.微信-H5;7.微信-微信浏览器;8.微信小程序 10.applepay;100.测试支付;
if (webType==0){
if (chooseType==0){
var detail_pay_type = 1
}else{
var detail_pay_type = 4
}
}else if(webType==1){
var detail_pay_type = 8
}else{
if(chooseType==1){
var h5Type = this.h5Type
if (h5Type==1){
var detail_pay_type = 7
}else{
var detail_pay_type = 6
}
}else{
var detail_pay_type = 3
}
}
var order_no = this.listDel.order_no
var openid = uni.getStorageSync('openid')
var data = {
order_no: order_no,
openid: openid,
detail_pay_type: detail_pay_type
}
this.payFunc(data,detail_pay_type)
},
payFunc(data,detail_pay_type){
var that = this
uni.showLoading({
title: ''
})
var provider = uni.getStorageSync('provider')
orderPay(data).then(res => {
uni.hideLoading();
if (res.status == 1) {
if (detail_pay_type==8){
//小程序
uni.requestPayment({
provider: provider,
timeStamp: res.res.timeStamp, // 时间戳(单位:秒)
nonceStr: res.res.nonceStr, // 随机字符串
package: res.res.package, // 固定值
signType: res.res.signType, //固定值
paySign: res.res.paySign, //签名
success(res) {
uni.showToast({
title:'支付成功',
icon:'none'
})
uni.navigateTo({
url: '/market/pages/payResult'
});
},
fail(e) {
uni.showToast({
title:'支付失败',
icon:'none'
})
}
})
}else if(detail_pay_type==7){
// 公众号微信
this.weixinPay(res.res)
}else if(detail_pay_type==6){
// 公众号h5
var url = res.res
window.location.href = url
}else if (detail_pay_type==3){
//支付宝h5
const divForm = document.getElementById('divForm')
if(divForm){
document.body.removeChild(divForm)
}
const div = document.createElement('div')
div.id = 'divForm' // 设置id
div.innerHTML = res.res
document.body.appendChild(div)
// 利用id去获取表单
document.getElementById('divForm').children[0].setAttribute('target','_self')
this.$nextTick(function(){
document.getElementById('divForm').children[0].submit()
})
}else if(detail_pay_type==1){
//支付宝app
uni.requestPayment({
provider: 'alipay',
orderInfo: res.res, //支付宝订单数据
success: function (res) {
console.log('success:' + JSON.stringify(res));
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});
}else if(detail_pay_type==4){
//微信app
//订单对象,从服务器获取
var orderInfo = {
"appid": res.res.appId, // 应用ID(AppID)
"partnerid": res.res.partnerId, // 商户号(PartnerID)
"prepayid": res.res.prepayId, // 预支付交易会话ID
"package": res.res.packageValue, // 固定值
"noncestr": res.res.nonceStr, // 随机字符串
"timestamp": res.res.timeStamp, // 时间戳(单位:秒)
"sign": res.res.sign, // 签名,这里用的 MD5 签名
};
uni.requestPayment({
provider: "wxpay",
orderInfo: orderInfos,
success(res) {
console.log('success:' + JSON.stringify(res));
console.log("支付成功");
},
fail(err) {
console.log('fail:' + JSON.stringify(err));
console.log("支付失败");
}
});
}
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
},
weixinPay(data){
var vm= this;
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
}
}else{
vm.onBridgeReady(data);
}
},
// 微信内调取h5支付
onBridgeReady (res) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": res.appId, //公众号名称,由商户传入
"timeStamp": res.timeStamp.toString(), //时间戳,自1970年以来的秒数
"nonceStr": res.nonceStr, //随机串
"package":res. package,
"signType": res.signType, //微信签名方式:
"paySign": res.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
}
})
},