微信公众号支付（JSAPI支付）

• 微信公众号支付（JSAPI支付）

微信浏览器会内置 WeixinJSBridge 对象，但是其可能需要加载时间，可以通过文档代码

if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener(&＃39;WeixinJSBridgeReady&＃39;, onBridgeReady, false);}else if (document.attachEvent){document.attachEvent(&＃39;WeixinJSBridgeReady&＃39;, onBridgeReady); document.attachEvent(&＃39;onWeixinJSBridgeReady&＃39;, onBridgeReady);}
}else{onBridgeReady();
}

去判断是否存在该对象

拉起支付：

function onBridgeReady(){WeixinJSBridge.invoke(&＃39;getBrandWCPayRequest&＃39;, {"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: &＃39;&＃39;, // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: &＃39;&＃39;, // 必填，生成签名的随机串signature: &＃39;&＃39;,// 必填，签名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 &＃39;vue&＃39;;
import wx from &＃39;weixin-js-sdk&＃39;;
//存储服务器授权链接
const jsSDKAuth = &＃39;XXX/wx_jssign_package.json&＃39;;
//存储各个链接的签名信息
const signMap = new Map();
// 设置默认的分享信息，因为如分享图、请求授权项、隐藏授权项等基本不变，此处设置直接引用，避免使用时繁琐设置
const defaultWxShareCOnfig= { title: "分享标题（通常是动态的）", desc: &＃39;分享描述（通常是动态的）&＃39;,link: location.href,imgUrl: &＃39;分享图片（通常是128*128的logo）&＃39;,jsApiList: [&＃39;onMenuShareTimeline&＃39;, &＃39;onMenuShareAppMessage&＃39;, &＃39;hideMenuItems&＃39;, &＃39;chooseWXPay&＃39;],hideMenuList: [&＃39;menuItem:editTag&＃39;, &＃39;menuItem:delete&＃39;, &＃39;menuItem:originPage&＃39;, &＃39;menuItem:readMode&＃39;,&＃39;menuItem:openWithQQBrowser&＃39;, &＃39;menuItem:openWithSafari&＃39;, &＃39;menuItem:share:email&＃39;, &＃39;menuItem:share:brand&＃39;]
} const wxShare = {//各个页面加载后，调用此方法，传入的参数config是对象，其属性参考defaultWxShareConfigupdateWxShareConfig(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: [&＃39;onMenuShareAppMessage&＃39;, &＃39;onMenuShareTimeline&＃39;]})// 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 &＃39;./utils/wxShare&＃39;;

2）页面中调用：

//页面加载完成后调用
activated() {this.uuid = _this.$route.query.uuid;var shareUrl = &＃39;url&＃39;;this.$wxShare.updateWxShareConfig({title:&＃39;标题&＃39;,desc: &＃39;简介&＃39;,link: shareUrl});
}