美文网首页
H5----微信支付、分享

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

作者: 王小妞闯天涯 | 来源:发表于2021-01-08 14:48 被阅读0次

    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----微信支付、分享

          本文链接:https://www.haomeiwen.com/subject/awiacktx.html