实现微信、qq分享

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

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、测试:

  1. mac开启网络共享(系统偏好设置->共享->Wi-Fi)
  2. 手机连mac开启的共享wifi,然后选择修改网络->高级选项->手动里面设置代理->填入mac的ip及程序的端口号
  3. 访问链接就好了

参考:

https://blog.csdn.net/qq_33744228/article/details/82887872

https://blog.csdn.net/alokka/article/details/84325181

你可能感兴趣的:(JS)