- 微信公众号支付(JSAPI支付)
微信浏览器会内置 WeixinJSBridge 对象,但是其可能需要加载时间,可以通过文档代码
if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } }else{ onBridgeReady(); }
去判断是否存在该对象
拉起支付:
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公众号ID,由商户传入 "timeStamp":"1395712654", //时间戳,自1970年以来的秒数 "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信签名方式: "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){ // 使用以上方式判断前端返回,微信团队郑重提示: //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 } }); }
- h5支付(JS-SDK)
微信h5支付提供了jssdk ,可以通过引入sdk 在其他浏览器中进行拉起支付或者微信其他功能(如分享,扫码等)
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [] // 必填,需要使用的JS接口列表 });
步骤四:通过ready接口处理成功验证
wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 });
步骤五:通过error接口处理失败验证
wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 });
vue中使用wx-js-sdk
-
- 引入sdk文件
npm install weixin-js-sdk --save
-
- 创建微信工具类文件
/* eslint-disable */ import Vue from 'vue'; import wx from 'weixin-js-sdk'; //存储服务器授权链接 const jsSDKAuth = 'XXX/wx_jssign_package.json'; //存储各个链接的签名信息 const signMap = new Map(); // 设置默认的分享信息,因为如分享图、请求授权项、隐藏授权项等基本不变,此处设置直接引用,避免使用时繁琐设置 const defaultWxShareConfig = { title: "分享标题(通常是动态的)", desc: '分享描述(通常是动态的)', link: location.href, imgUrl: '分享图片(通常是128*128的logo)', jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'chooseWXPay'], hideMenuList: ['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode','menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand'] } const wxShare = { //各个页面加载后,调用此方法,传入的参数config是对象,其属性参考defaultWxShareConfig updateWxShareConfig(config = {}) { wxShareConfig.title = config.title || defaultWxShareConfig.title; wxShareConfig.desc = config.desc || defaultWxShareConfig.desc; wxShareConfig.link = config.link || defaultWxShareConfig.link; wxShareConfig.imgUrl = config.imgUrl || defaultWxShareConfig.imgUrl; wxShareConfig.jsApiList = config.jsApiList || defaultWxShareConfig.jsApiList; wxShareConfig.hideMenuList = config.hideMenuList || defaultWxShareConfig.hideMenuList; //微信中二次分享的处理,截取到有效的分享链接 var authUrl = wxShareConfig.link.split("#")[0]; authUrl = authUrl.split("?")[0]; //判断是否已经签名了 if (signMap.has(authUrl)) { this._wxConfigJSSDK(signMap.get(authUrl), wxShareConfig); } else { this._wxShareAuth(authUrl); } }, //从服务器获取某分享链接的签名信息,并存储起来 _wxShareAuth(authUrl) { //此处我使用的是自己封装的网络请求方法 const promise = Vue.http.get(jsSDKAuth + "?url=" + encodeURIComponent(authUrl)); promise.then(res => { //此处请根据各自的服务器返回数据文档进行操作 if (res.data.code == 200) { //分享链接授权签名信息 const sign = res.data.data; signMap.set(authUrl, sign); this._wxConfigJSSDK(sign); } }); promise.catch((err) => { console.log(err.response); }) }, //将签名信息更新到微信的SDK中 _wxConfigJSSDK(shareSign) { wx.config({ debug: false, appId: shareSign.appId, timestamp: shareSign.timestamp, nonceStr: shareSign.nonceStr, signature: shareSign.signature, jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] }) // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 wx.ready(function() { const {title,desc,link,imgUrl} = wxShareConfig; wx.onMenuShareAppMessage({ title, desc, link, imgUrl, success: function() { console.log("分享成功"); }, fail: function() { console.log("分享失败"); }, cancel: function() { console.log("取消分享"); } }) wx.onMenuShareTimeline({ title, link, imgUrl, success: function() { console.log("分享成功"); }, cancel: function() { console.log("取消分享"); } }) }); // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 wx.error(function(res) { console.log("分享失败: error", res); }); } } //导出工具类 export default wxShare; //将工具类添加到Vue静态方法方便调用 Vue.prototype.$wxShare = wxShare;
3.调用方式
1)mian.js中引入:import './utils/wxShare';
2)页面中调用:
//页面加载完成后调用 activated() { this.uuid = _this.$route.query.uuid; var shareUrl = 'url'; this.$wxShare.updateWxShareConfig({ title:'标题', desc: '简介', link: shareUrl }); }