vue 微信分享

2,180 阅读2分钟

npm install --save weixin-js-sdk

JSSDK 文档说明

#封装微信分享代码

import wx from 'weixin-js-sdk' //微信sdk依赖
import http from '../../http' // 引用全局
const jsApiList = [
  'checkJsApi',
  'onMenuShareAppMessage',
  'updateAppMessageShareData',
  'onMenuShareTimeline',
  'updateTimelineShareData',
  'onMenuShareWeibo'
]
//要用到微信API
function getUrl() {
  if (window.entryUrl === '') {
    window.entryUrl = location.href.split('#')[0]
  }
  let u = navigator.userAgent
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
  return isAndroid ? location.href.split('#')[0] : window.entryUrl
}

function getJSSDK(weiXin, invitation) {
  // 调用后台接口换取参数
  let url = getUrl()
  http
    .post('api-wechat/share/get-info', {
      invitation: invitation,
      url: url
    })
    .then(res => {
      console.log(weiXin)
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: res.data.appId, // 必填,公众号的唯一标识
        timestamp: res.data.timeStamp, // 必填,生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
        signature: res.data.signature, // 必填,签名
        jsApiList: jsApiList // 必填,需要使用的JS接口列表
      })
      wx.ready(function() {
        wx.checkJsApi({
          jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'showAllNonBaseMenuItem'
          ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
          success: function(res) {
            console.log('检测', res)
          }
        })
        wx.onMenuShareAppMessage({
          title: weiXin.title,
          desc: weiXin.desc,
          link: weiXin.linkurl,
          imgUrl: weiXin.img,
          trigger: function trigger(res) {},
          success: function success(res) {
            console.log('已分享')
          },
          cancel: function cancel(res) {
            console.log('已取消')
          },
          fail: function fail(res) {
            alert(JSON.stringify(res))
          }
        })
        wx.showAllNonBaseMenuItem() //显示所有非基础组件
        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline({
          title: weiXin.title,
          link: weiXin.linkurl,
          imgUrl: weiXin.img,
          trigger: function trigger(res) {
            // alert('用户点击分享到朋友圈');
          },
          success: function success(res) {
            //alert('已分享');
          },
          cancel: function cancel(res) {
            //alert('已取消');
          },
          fail: function fail(res) {
            alert(JSON.stringify(res))
          }
        })
        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        // wx.onMenuShareQQ({
        //   title: weiXin.title,
        //   desc: weiXin.desc,
        //   link: weiXin.linkurl,
        //   imgUrl: weiXin.img,
        //   trigger: function trigger(res) {
        //     //alert('用户点击分享到QQ');
        //   },
        //   complete: function complete(res) {
        //     alert(JSON.stringify(res));
        //   },
        //   success: function success(res) {
        //     //alert('已分享');
        //   },
        //   cancel: function cancel(res) {
        //     //alert('已取消');
        //   },
        //   fail: function fail(res) {
        //     //alert(JSON.stringify(res));
        //   }
        // });
        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        // wx.onMenuShareWeibo({
        //   title: weiXin.title,
        //   desc: weiXin.desc,
        //   link: weiXin.linkurl,
        //   imgUrl: weiXin.img,
        //   trigger: function trigger(res) {
        //     //alert('用户点击分享到微博');
        //   },
        //   complete: function complete(res) {
        //     // alert(JSON.stringify(res));
        //   },
        //   success: function success(res) {
        //     //alert('已分享');
        //   },
        //   cancel: function cancel(res) {
        //     // alert('已取消');
        //   },
        //   fail: function fail(res) {
        //     // alert(JSON.stringify(res));
        //     console.log(JSON.stringify(res));
        //   }
        // });
      })
      wx.error(function(res) {
        console.log(JSON.stringify(res) + '微信验证失败')
        // alert(JSON.stringify(res)+"微信验证失败");
      })
    })
}
export default {
  // 获取JSSDK
  getJSSDK: getJSSDK
}

#组件中使用

import getJSSDK from '../../assets/js/sdk'
mounted() {
  let wxShareData = {
    title: "微信分享测试",
    linkurl: location.origin + "/index.html#/test?shareId=154545",
    desc: "分享链接添加动态参数",
    img: "http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg"
  };
  getJSSDK.getJSSDK(wxShareData, "154545");
},

#微信里禁止分享

// 在公众号里的H5页面需要做禁止分享
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  // 通过下面这个API隐藏右上角按钮
  WeixinJSBridge.call('hideOptionMenu')
})