微信分享给朋友圈/朋友/判断网络类型/支付在vue里面亲测

来源：互联网发布：js offsetparent属性编辑：程序博客网时间：2024/05/17 03:54

最近开发微信公众号也是各种接触jssdk，也走了不少弯路吧，写个总结铭记一下。。。。用的是vue框架来开发的。。。。。

在涉及分享的时候在因为默认取得就是页面第一张图，也走了点弯路，虽然可取但是自己定义的tittle和描述内容纹丝不动

最开始这么干的：仅仅改变了分享图标而已，并没有起到多大的作用

<body>  <div style="display:none">    <img src="http://***.com" alt=""/>  </div>  <div id="app"></div>  <!-- built files will be auto injected --></body>

在可能被分享的页面里面的方法里写上

  //初始化微信js  我是在created里面调用 你随意      initJs(){        console.log('ajaxssssss')        let fromUrl = window.location.href;        utilAxios.post({           url: `/api/wechat/wechat/jsSign?fromUrl=${fromUrl}`,//请求到配置函数所需参数          method: 'POST',          headers:{            'Content-Type':'application/x-www-form-urlencoded'          },          callback: function (res) {            console.log('成功了S')            console.log(res)            console.log(res.data.data.timestamp+'000000')            if(res){              wx.config({                debug: false,                appId: res.data.data.appId,                timestamp: res.data.data.timestamp,                nonceStr: res.data.data.noncestr,                signature: res.data.data.signature,                jsApiList: [                   'checkJsApi',                  'onMenuShareTimeline',                  'onMenuShareAppMessage',                  'onMenuShareQQ',                  'onMenuShareWeibo',                  'getNetworkType',                ]              });            }else{              alert('获取信息失败，请重新尝试！');            }          }, error: function () {            alert("网络错误,请重新尝试");          }        });      },

//显示设备状态      getNetworkType(){        let that = this ;       wx.ready(function(){  
wx.getNetworkType({        success: function (res) {//            console.log(res.networkType+'aaassasdsdsdasad');          if( res.networkType == 'wifi') {            //如果现在的网络状态是wifi  可以根据需要操作          } else {            //其他情况下的操作          }        },        fail: function (res) {//            console.log(JSON.stringify(res));          console.log('错了')        }      });      })      },
      //分享给朋友自定义函数

doShareAppMessage(){

   wx.ready(function(){ //一定要在ready函数里面调用微信接口 如下

     wx.onMenuShareAppMessage({

 title: '分享标题', // 分享标题

desc:"我是一个介绍",

//   link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

        imgUrl: 'http://***.png', // 分享图标

      success: function () {

       // 用户确认分享后执行的回调函数

       console.log('分享成功了')

},

  cancel: function () {            // 用户取消分享后执行的回调函数

      console.log('取消分享了')

});

})

},

  //分享到朋友圈

  doShareOnline(){

    wx.ready(function () {

    wx.onMenuShareTimeline({

        title: '分享标题', // 分享标题

         desc: '分享描述分享描述分享描述', // 分享描述

        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

             imgUrl: 'http://**.png', // 分享图标

           type: '', // 分享类型,music、video或link，不填默认为link

       dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

          success: function () {

            // 用户确认分享后执行的回调函数

},

    cancel: function () {

   // 用户取消分享后执行的回调函数

});

})

},

支付 用的微信内置对象WeixinJSBridge 用的也是莫名其妙，项目接近尾声了，也不好在过大调试， 下次全部用wx.方法来做

utilAxios.post({  url: `/api/wechat/pay/wechatOrder?orderNo=${questionId}&payType=question`,      method: 'POST',  headers:{    'Content-Type':'application/x-www-form-urlencoded'  },  callback: function (res) {    if( res.data.success == 1000 ) {      //支付成功      let timeStamp = res.data.api.timeStamp;      let nonceStr = res.data.api.nonceStr;      let package1 = res.data.api.package;      let signType = res.data.api.signType;      let paySign = res.data.api.paySign;      let appId = res.data.api.appId;      console.log(this.signType);      function onBridgeReady(){        WeixinJSBridge.invoke(          'getBrandWCPayRequest', {            "appId":appId,     //公众号名称，由商户传入            "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数            "nonceStr":nonceStr, //随机串            "package":package1,            "signType":signType,         //微信签名方式：            "paySign":paySign //微信签名          },          function(res){            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。            //支付成功跳转页面            that.$router.push({              path:`/myQuestions`            })          }        );      }      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();      }    }  }});

然后在合适的地方调用

created(){  this.initJs();//微信初始函数   let that = this ;//保存当前this指向

//下面用了演示   setTimeout(function(){     that.doShareAppMessage();     that.doShareOnline();   },2000)},

阅读全文

0 0