H5----微信支付、分享

1.获取code
var reg = new RegExp("(^|&)" + 'code' + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
let code = unescape(r[2]);
}
2.微信支付封装方法,需要先通过openID生成支付相关信息后,调用方法
export function CallWeiXinPay(paramsData){
//监测是否在微信浏览器中
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
console.log('addEventListener');
document.addEventListener(
'WeixinJSBridgeReady',
onBridgeReady(paramsData),
false
);
} else if (document.attachEvent) {
console.log('attachEvent');
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent(
'onWeixinJSBridgeReady',
onBridgeReady(paramsData)
);
}
}else{
onBridgeReady(paramsData)
}

}

export function onBridgeReady(paramsData) {
console.log(paramsData);
console.log('paramsData');
console.log(WeixinJSBridge);
// paramsData = paramsData.replace(/"/g, '"');
//开始调用微信支付
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
paramsData,
function(res) {
console.log(res);
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
console.log(window.location.href);
let redirectUrl = window.location.href.split('index.html?')[0] +'index.html'+ '#/shellRecord';
console.log(redirectUrl);
location.href = redirectUrl;

    // location.href =
    //   location.protocol +
    //   '//' +
    //   location.host +
    //   'web/resource/swp/wdv3/weixin/www/index.html#/shellRecord';
  } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
     //alert('取消支付!');
  } else  {
    // alert('支付失败');
  }
}

);
}
3.获取code
window打开链接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3a%2f%2fnew.lzgok.com%2f%23%2fwechat_order%3fpage%3d1&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
code会拼接在回调地址的链接中,用方法1获取code
4.分享,先从后台获取签名随机串等,初始化微信之后,调用微信分享
shareConfig() {
let c_this = this;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: this.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: this.timestamp_t, // 必填,生成签名的时间戳
nonceStr: this.noncestr_t, // 必填,生成签名的随机串
signature: this.signature, // 必填,签名,见附录1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

  // console.log(this.certName);
  let tit = this.shareInfo.magazinename; //标题
  let img = this.shareInfo.picpath; //图片
  let con = this.shareInfo.brief; //简介
  let link = this.shareInfo.shareUrl; //链接
//如果参数中有中文,需要encodeURIComponent

  wx.ready(function() {
    // 分享到朋友圈
    wx.onMenuShareTimeline({
      title: tit, // 分享标题
      link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: img, // 分享图标
      trigger: function(res) {
        //  alert('用户点击发送给朋友');
      },
      success: function() {},
      cancel: function() {}
    });

    // 发送给好友
    wx.onMenuShareAppMessage({
      title: tit, // 分享标题
      desc: con, // 分享描述
      link: link,
      imgUrl: img,
      type: link, // 分享类型,music video link(default)  ,
      success: function() {},
      cancel: function() {}
    });
  });
}

微信自定义分享需注意:分享的链接必须在同一域名下,图片大小有限制,之前是32K,现在没有那么多限制,含有中文的参数必须用encodeURIComponent编码,否则在iOS 上分享会出现微信配置什么都是成功的,就是自定义分享无效

你可能感兴趣的:(H5----微信支付、分享)