实现微信、qq分享

最新推荐文章于 2021-03-10 17:56:55 发布

原创最新推荐文章于 2021-03-10 17:56:55 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#实现微信、qq分享

JS 专栏收录该内容

116 篇文章

订阅专栏

前提：在微信公众平台配置好安全域名

1、安装weixin-js-sdk：npm install weixin-js-sdk

2、创建要用的sdk.js文件

import wx from 'weixin-js-sdk' // 微信sdk依赖
import axios from 'axios'
const jsApiList = ['updateAppMessageShareData']

function getJSSDK (url, dataForWeixin) {
  axios.get('/OAutho/JsSdkConfig?url=' + encodeURIComponent(url)).then(res => {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'wx9d399xxxxxxxxx14', // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.noncestr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList: jsApiList // 必填，需要使用的JS接口列表
    })
    wx.ready(function () {
      wx.updateAppMessageShareData({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.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.error(function (res) {
      alert('微信验证失败')
    })
  })
}
export default {
  // 获取JSSDK
  getJSSDK: getJSSDK
}

3、在需要分享的地方调用

import sdk from '../utils/sdk' //引入sdk.js

var url = window.location.href.split('#')[0]
var obj = {
  title: this.userInfo.UserName,		//分享标题
  desc: '个人资料',						//分享内容
  linkurl: location.protocol+"//"+location.host+'/dist/#/show?id=' + this.userInfo.Id,//分享链接
  img: this.userInfo.Photo,				//分享内容显示的图片
}
sdk.getJSSDK(url, obj) 					//传入sdk.js需要的参数

1、引入JS-SDK

2、测试：