美文网首页
微信分享配置

微信分享配置

作者: 給我小鱼干 | 来源:发表于2018-09-14 09:15 被阅读0次

    jquery写法:

      <script type="text/javascript" src="./js/jquery.js"></script>
      <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>//需要引入微信分享JS
      <script src="./js/util.js"></script>
      <script type="text/javascript">
        
    //为了避免二次分享失败
     var _url = location.href
      if(_url.indexOf("?from=") !=-1) {
        _url = location.origin + location.pathname
        window.location.replace(_url)
      }
      var wechatApi = httpUrl.SHARE+encodeURIComponent(_url)
      $.ajax({
            type: "GET",
            url: wechatApi,
            dataType:'json',
            success: function(res){
              let data = res.data
              window.wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseImage', 'previewImage']
              })
    
              window.wx.ready(function(){
                window.wx.onMenuShareTimeline({//分享朋友圈
                  title: '【限时福利】200元红包免费领取!',
                  link: _url,
                  imgUrl: 'http://xxxx.com/user/couponActivity/image/home1.jpg'
                })
                window.wx.onMenuShareAppMessage({//分享好友
                  title: '【限时福利】200元红包免费领取!',
                  desc:'专业影像定制输出平台,让影像艺术之美走进每个人的生活。',
                  link: _url,
                  imgUrl: 'http://xxxx.com/user/couponActivity/image/home1.jpg',
                  type: 'link'
                })
              })
            }
          }); 
    

    vue写法:

    在index.html页面中引入微信的js

    let _url = location.href
            let shareurl = _url
            axios({url: config.WECHAT_API+encodeURIComponent(_url)}).then(res => {
              let data = res.data.data
              window.wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseImage', 'previewImage']
              })
          
              window.wx.ready(() => {
                window.wx.onMenuShareTimeline({
                  title: '这是属于我的毕业季',
                  link: shareurl,
                  imgUrl: 'https://xxx.com/img/biyeji_title.jpg'
                })
                window.wx.onMenuShareAppMessage({
                  title: '这是属于我的毕业季',
                  desc: '记录大学时光的回忆,不来一本这个是不可能的,这辈子都不可能。',
                  link: shareurl,
                  imgUrl: 'https://xxx.com/img/biyeji_title.jpg',
                  type: 'link'
                })
              })
            })
    

    需要注意的是分享调用的shareURL 与分享链接需要保持高度一致 否则就会报错
    而且JS安全域名也要加入

    相关文章

      网友评论

          本文标题:微信分享配置

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