引入JSSDK
npm install weixin-js-sdk微信JSSDK支付
wxPay方法封装
import axios from 'axios';
import wx from "weixin-js-sdk";
import {GetPayOrder, PostPay} from "@/api/home";
import {message, Modal} from "ant-design-vue";
export default {
// 获取微信支付SDK的签名
getWxPaySign(params: any): Promise<void> {
return new Promise<void>((resolve, reject) => {
// 发起请求获取签名
GetPayOrder(params).then((res: any) => {
const {data,code} = res
if (code === 200) {
// 配置微信JS SDK
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'chooseWXPay'
]
})
// 配置完成后返回一个resolve
wx.ready(() => {
resolve(data)
})
wx.error((res:any) => {
reject(new Error('微信支付初始化失败'))
})
} else {
// 请求失败时返回一个reject
reject(new Error('获取微信支付SDK签名失败'))
}
}).catch((error: any) => {
reject(error);
});
});
},
routerWxMiniPay(data:any){
let object = encodeURIComponent(JSON.stringify(data))
wx.miniProgram.navigateTo({
url: `/pages/pay/pay?object=${object}`, // 小程序地址
success () {
console.log('question success')
},
fail (error) {
console.log(error)
}
})
},
closeWXPay() {
wx.closeWindow(); /* 关闭微信窗口，调用时需要在config中进行校验 */
},
// 发起微信支付
wxPay(params: any): Promise<any> {
return new Promise((resolve, reject) => {
// 调用微信支付
wx.chooseWXPay({
timestamp: params.timestamp,
nonceStr: params.nonceStr,
package: params.package,
signType: params.signType,
paySign: params.paySign,
success: function(res) {
// Modal.success({title:JSON.stringify(res)})
// 前端判断返回方式，微信团队郑重提示：不保证绝对可靠，切记！
if (res.errMsg == 'chooseWXPay:ok') {
// 【支付成功】
} else if (res.errMsg == 'chooseWXPay:cancel') {
// 【支付取消】：用户取消支付不会进入这个判断，而是进入complate和cancel函数
} else {
}
},
complete: function(res) {
// Modal.info({title:JSON.stringify(res)})
// 接口调用完成时执行的回调函数，无论成功或失败都会执行
if (res.errMsg == 'chooseWXPay:ok') {
// wx.closeWindow()
resolve(res)
// 【支付成功】：支付成功提示页面，点击完成按钮之后
} else if (res.errMsg == 'chooseWXPay:cancel') {
reject(res)
// 【支付取消】
} else {
reject(res)
}
/**
* iOS和Android支付成功点击“完成”后都会进入success和complete函数，都返回'chooseWXPay:ok'
* （也有人说Android支付成功不进入success函数，）
* 原因是【iOS和Android返回数据不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"}，iOS返回{"err_Info":"success","errMsg":"chooseWXPay:ok"}，故Android找不到success方法，导致失败】
* */
},
fail: function(err) {
// Modal.error({title:JSON.stringify(err)})
reject(err)
// 接口调用失败
},
});
});
}
}
支付调用
import wxPay from "@/utils/wxPay";
const createOrder = (item: any) => {
// 获取微信支付SDK的签名
wxPay.getWxPaySign({
order_no: item.order_no,
url: encodeURIComponent(location.href.split('#')[0]),//支付需要将url encodeURIComponent
}).then(res => {
// 配置成功后发起微信支付
goPay(res)
payInfo.value = res
}).catch(err => {
// Modal.error({title: JSON.stringify(err)})
console.error(err)
})
}微信JSSDK自定义分享
封装分享方法
import wx from "weixin-js-sdk";
import {GetShareSignature} from "@/api/home";
import {useLoginStore} from "@/store/login";
export default {
// 获取微信支付SDK的签名
initWechatShare() {
return new Promise<void>((resolve, reject) => {
// let urls = import.meta.env.VITE_WEB_BASE_URL + '/'
const {getWxShareUrl} = useLoginStore()
//****重点：此地址为微信打开网页的地址，SPA项目进入后可能会重定向，但是用于签名的地址必须与微信打开入口地址保持一致
let url = getWxShareUrl()
GetShareSignature({
url: url ,//***重点：分享接口不需要encodeURIComponent
}).then((res: any) => {
const {data, code} = res
if (code !== 200) return
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['updateAppMessageShareData',
'updateTimelineShareData']
});
wx.ready(() => {
resolve(data)
})
wx.error((res:any) => {
reject(new Error('微信分享初始化失败'))
})
})
})
},
wxShare() {
let metaDescription = document.querySelector('meta[name="description"]');
let metaImg = document.querySelector('meta[name="imageUrl"]');
let description = metaDescription ? metaDescription.getAttribute('content') : '';
let img = metaImg ? metaImg.getAttribute('content') : 'xxx.png';
let title = document.title;
let imgUrl = img as string
let desc = description as string;
let myUrl = location.href.split('#')[0];//分享接口不需要encodeURIComponent
//分享给朋友
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: myUrl, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
});
wx.updateTimelineShareData({
title: title, // 分享标题
link: myUrl, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
}
});
}
}
获取入口地址用于签名
//App.vue
onMounted(async () => {
let isWechat = ISINWECHAT()
if(!isWechat) return
let url = location.href.split('#')[0]
//设置微信分享的入口签名地址
setWxShareUrl(url)
})相关页面进行自定义分享
//需要进行自定义分享的页面
import wxShare from "@/utils/wxShare";
onMounted(async () => {
loading.value =true
await getMySong()
let isWechat = ISINWECHAT()
if(isWechat){
//初始化微信分享
await wxShare.initWechatShare()
wxShare.wxShare()
}
})
