前言（必读）
要实现这个功能的必要条件：
1，必须是服务号（企业或机构主体），且通过微信认证（个人订阅号不支持）
2，域名备案：H5网页的域名必须完成ICP备案（国内服务器），且备案主体与公众号主体一致
注意事项（重要）：
1、这个自定义分享是定义卡片式内容，并不能唤起微信的分享面板！！！
2、因为微信的内部机制，不能通过链接直接访问进入再分享，必须通过分享出来的卡片或者从公众号底部菜单配置进入的分享才可以！！！
阅读官方文档（微信公众号JS-SDK说明文档）
官方文档：
[developers.weixin.qq.com/doc/offiacc…]
一、微信公众号后台设置
第一步：
第二步：启用开发者密码，设置白名单
二、引入
1.线上地址（可下载）：res.wx.qq.com/open/js/jwe…
2.通过npm下载：
// 安装
npm install weixin-js-sdk --save
// 引入
import wx from "weixin-js-sdk";
三、JS文件定义
import wx from 'weixin-js-sdk';
import { showTopToast } from '@/utils/vant';
/*
* 微信分享
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{shareData}:分享配置参数
*/
export const weChatShare = (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;
let jsApiList = data.jsApiList;
// console.log(1111,'进入了');
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
appId: appId, // 必填，公众号的唯一标识 (后端返回)
timestamp: timestamp, // 必填，生成签名的时间戳 (后端返回)
nonceStr: nonceStr, // 必填，生成签名的随机串 (后端返回)
signature: signature, // 必填，签名，见附录1 (后端返回)
jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.checkJsApi({
jsApiList: jsApiList,
success: (res) => {
if (!res.checkResult.updateAppMessageShareData) {
console.error('当前环境不支持分享到朋友');
}
}
});
wx.ready(function () {
// //分享到朋友圈”及“分享到QQ空间”
wx.updateTimelineShareData({
title: shareData.title, // 分享标题
link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: (res) => {
// 设置成功
// console.log("分享朋友圈成功返回的信息为:", res);
}
})
//“分享给朋友”及“分享到QQ”
wx.updateAppMessageShareData({
title: shareData.title, // 分享标题
desc: shareData.desc, // 分享描述
link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: function (res) {
// console.log("分享朋友成功返回的信息为:", res);
}
})
});
wx.error(function (res) {
console.log('验证失败返回的信息:', res);
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
// console.log('验证失败返回的信息:', res);
});
}
/*
* 地理位置
* 获取微信加签信息
* @param{data}:获取的微信加签
*/
export const wexinShareLocation = (data) => {
// var wx = require('weixin-js-sdk') || window['wx'];
let appId = data.appId;
let timestamp = data.timestamp;
let nonceStr = data.nonceStr;
let signature = data.signature;
// console.log(1111,'进入了');
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: [
'openLocation'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.checkJsApi({
jsApiList: jsApiList,
success: (res) => {
if (!res.checkResult.updateAppMessageShareData) {
console.error('当前环境不支持分享到朋友');
}
}
});
wx.ready(function () {
wx.openLocation({
latitude: 29.48414234546961, // 纬度，浮点数，范围为90 ~ -90
longitude: 104.41112296287323, // 经度，浮点数，范围为180 ~ -180。
name: '某某有限公司', // 位置名
address: '某省某市某区', // 地址详情说明
scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
success(res) {
// console.log('成功了',res)
},
});
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
// console.log('验证失败返回的信息:', res);
});
}
四、调用
// 自定义分享
const onSelectShare = async () => {
// console.log(imagesList.value,'wxConfig============')
// showShare.value = true;
try {
// 获取当前页面URL（去掉hash部分）
const currentUrl = window.location.href.split('#')[0];
// 调用后端接口获取微信签名
const res= await getWechatSign({
url: encodeURIComponent(currentUrl)
})
if (res['code'] !== 200) {
throw new Error('获取微信签名失败');
}
// 配置微信JS-SDK
const wxConfig = {
appId: res['data'].appId,
nonceStr: res['data'].nonceStr,
signature: res['data'].signature,
timestamp: res['data'].timestamp,
jsApiList: res['data'].jsApiList
};
// 准备分享数据
const shareData = {
title: coursesDetail.name, // 分享标题
desc: coursesDetail.description, // 分享描述
link: `https://xxx.com/#/courseDetail?courseId=${$route.query.courseId}&simulationId=${$route.query.simulationId}`, // 域名和js安全域名保持一致
imgUrl: sharedPoster.value, // 分享图标
};
// console.log(wxConfig,'wxConfig============')
// console.log(shareData,'========shareData')
// 调用微信分享功能
await weChatShare(wxConfig, shareData);
} catch (error) {
console.error('分享失败:', error);
// showTopToast('分享功能暂时不可用');
}
};
// 地理位置
const openLocation = () => {
let ua: any = window.navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) != 'micromessenger') {
Toast('请使用微信浏览器打开');
return
}
let newUrl: string = window.location.href.split('#')[0]
getTicket({
url: encodeURIComponent(newUrl)
}).then((res: any) => {
if (res.code == 0) {
//微信加签
let obj = {
appId: res.data.app_id,
nonceStr: res.data.nonce_str,
signature: res.data.signature,
timestamp: res.data.timestamp,
jsApiList: ['openLocation']
}
//引用
wexinShareLocation(obj)
} else {
// Toast(res.message)
}
})
}
