记录一下，分享真的有好多坑（本篇文章只讲述前端遇到的问题，不提供后端数据）
每行代码以及每行字都有用，要静下心看完（不要和任何人去攀比，每个人都是独一无二的）
如果看技术问题总结，请滑动到页面底部（实现过程也有问题的解决方法）
微信分享给朋友（新接口api也支持qq，这里不展示效果图了）
image.png
微信分享到朋友圈
image.png
微信开放api文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
第一步：安装JSSDK（并引入）
第二步：通过config接口注入权限验证配置
第三步：通过ready接口处理成功验证
第四步：通过error接口处理失败验证
不说这些废话了，直接上代码（这里简单封装了一下，傻瓜式教程）
第一步：
安装 jssdk npm install weixin-js-sdk --save
第二步：
在vue里创建js文件，我的是在 assets----common---utils.js 代码如下：
import wx from "weixin-js-sdk"
/*
* 微信分享
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{shareData}:分享配置参数
*/
export const wexinShare = (data, shareData) => {
// var wx = require('weixin-js-sdk') || window['wx'];
let appId = data.appId;
let timestamp = data.timestamp;
let nonceStr = data.nonceStr;
let signature = data.signature;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.checkJsApi({
jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
console.log(res, 'checkJsApi')
}
});
wx.ready(function() {
// //分享到朋友圈”及“分享到QQ空间”
wx.updateTimelineShareData({
title: shareData.title, // 分享标题
link: shareData.link + '&t=' + timestamp + '&Content=1', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: function(res) {
// 设置成功
console.log("分享朋友圈成功返回的信息为:", res);
}
})
//“分享给朋友”及“分享到QQ”
wx.updateAppMessageShareData({
title: shareData.title, // 分享标题
desc: shareData.desc, // 分享描述
link: shareData.link + '&t=' + timestamp + '&Content=1', // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: function(res) {
console.log("分享朋友成功返回的信息为:", res);;
}
})
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log('验证失败返回的信息:', res);
});
}
第三步：
在分享页面引入刚刚封装暴露出来的方法
import { wexinShare } from '@/assets/common/utils.js';
调用后端接口获取签名等数据(传参根据后端接口查看)
把获取的微信加签和要分享的数据进行获取，传入方法
weixin() {
//请求微信配置参数接口（获取签名），由后台给接口给
var urls = window.location.href.split('#')[0];
console.log(urls, 22222333);
//看后台请求接口是get/post
http.post(config.shareResume, {
jdId: this.jdId,
recommendId: this.$route.query.recommendId,
url: urls
}).then(res => {
console.log(res, '内容');
console.log(this.allPositionDetailList, '111');
if (res.code == 200) {
//微信加签
var obj = {
appId: res.data.appId,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
timestamp: res.data.timestamp,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
};
//分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去
var url = window.location.href.split('#')[0];
// var shareWxLink = encodeURIComponent(url);加密
let shareData = {
title: this.allPositionDetailList.jdName, // 分享标题
desc:
'公司名称：' +
this.allPositionDetailList.merchantName +
' 招聘人数：' +
this.allPositionDetailList.jdNumber +
' 工作经验：' +
this.experienceInfo[this.allPositionDetailList.experience],
link: res.data.linkUrl,
// link: window.location.href,
imgUrl: res.data.imgUrl // 分享图标
};
//引用
wexinShare(obj, shareData);
} else {
this.$toast.warn('获取sdk参数失败！');
}
});
},
(目的是为了兼容ios,苹果每次要去重定向页面，安卓不需要，不这样跳转会导致安卓没问题，但是苹果不成功或者不显示标题或者图片)
到这步如果都没有问题基本就可以分享了（注意h5分享是使用微信浏览器右上角的三个点进行分享的，在点击右上角之前要先注入config/ready,官网已说明）
image.png
分享的时候要去判断是否是微信浏览器打开，如果不是要提示不能分享
var broser = window.navigator.userAgent.toLowerCase();
//通过正则表达式匹配broser 中是否含有MicroMessenger字符串
if (broser.match(/MicroMessenger/i) == 'micromessenger') {
console.log('微信浏览器');
// this.weixin();
this.showContent = true;
} else {
this.$toast.warn('请使用微信浏览器打开');
}
image.png
说到这里就需要分享的时候做个引导页了（效果如下）
两张透明图片拼接而成（图片放下面，需要自己保存，遮罩层自己来写）
image.png
因为是透明的所以可能看不太清（右箭头的透明图片）
3.png
我知道了透明图片
idont.png
接下来总结一下分享可能会遇到的问题
1.分享的内容一直是地址而不是一个链接
看link和后端配置的js安全域名一致不一致
2.安卓分享没有任何问题但是ios分享就不显示标题和描述以及图片
跳转分享页时要使用 window.location.replace(url) 用于重定向地址（微信社区也说了）
image.png
3.以上都没有问题了但是ios分享还是链接
需要扫描进入，不要直接点击分享链接进入（或者清除微信缓存，退出重新登录就ok了）
4.如果还是分享不成功还是地址
查看官方文档（上面分享过）看你调用的是新接口还是即将废弃的接口（本文章是新接口api）
image.png
基本这些就解决了分享问题，还有尝试过其他解决方法但是都没有生效，这里不太过多阐述，又什么问题，欢迎在评论区留言。