微信网页开发/JS-SDK说明文档
概述
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
JSSDK使用步骤可以详细查看说明文档
微信支付
发起一个微信支付请求
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串,不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: '', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});
1、首先请求接口,通过config接口注入权限验证配置
ps:接口封装
/**
* SDK 可以在 index.html 引入 https://res.wx.qq.com/open/js/jweixin-1.6.0.js
* 也可以下载下来本地引入JS 文件
*/
import wx from "@/utils/WeChat/jweixin-1.6.0";
/**
* loadWeChatShare 是权限验证接口,需要根据自己的项目接口调整
* export function loadWeChatShare(params) {
* return mGet("/mobile/wechat/share", params);
* }
*/
import { loadWeChatShare } from "@/api/wechat";
/**
* config 初始化
* @param params {object} 其他参数
* @param callback {function} 回调函数
*/
export function lWeChatConfig(params, callback) {
loadWeChatShare({
id: params.id,
url: params.url || window.location.href.split("#")[0]
}).then(res => {
const { data } = res;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ["chooseWXPay"] // 必填,需要使用的JS接口列表
});
wx.ready(() => {
if (callback) callback();
});
wx.error(err => {
console.error("config fail:", err);
});
});
}
2、使用 wx.config 注册分享功能
/**
* 微信支付
* @param params {Object} config 参数
* @param data {Object} 支付参数
* @returns {Promise<unknown>}
*/
export function lWeChatPay(params, data) {
return new Promise((resolve, reject) => {
lWeChatConfig(params, () => {
wx.chooseWXPay({
timestamp: data.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位
package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: data.paySign, // 支付签名
success: function(res) {
resolve(res);
},
fail: function(err) {
reject(err);
}
});
});
});
}
3、在页面中调用分享
import { lWeChatPay } from "@/utils/WeChat/jwx";
/**
* loadWxPay 是微信支付接口,需要根据自己的项目接口调整
* export function loadWxPay(params) {
* return mGet("/mobile/wechat/pay", params);
* }
*/
loadWxPay({
oid: oid
}).then(e => {
// 使用微信支付函数
lWeChatPay({},{
timestamp: e.timeStamp,
nonceStr: e.nonceStr,
package: e.package,
signType: e.signType,
paySign: e.paySign
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
});