|
|
|
|
@ -1,64 +1,92 @@
|
|
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
// import { useState, useEffect } from 'react';
|
|
|
|
|
import { /** useState, */ useEffect, useRef } from 'react';
|
|
|
|
|
|
|
|
|
|
import Image from 'next/image';
|
|
|
|
|
// import Image from 'next/image';
|
|
|
|
|
import wx from 'weixin-js-sdk';
|
|
|
|
|
|
|
|
|
|
// import { APPID } from '@/const';
|
|
|
|
|
// import useUA from '@/hooks/useUA';
|
|
|
|
|
import { APPID } from '@/const';
|
|
|
|
|
import useUA from '@/hooks/useUA';
|
|
|
|
|
|
|
|
|
|
// 分享获取微信token
|
|
|
|
|
async function getShareAccessToken(url: string) {
|
|
|
|
|
const res = await fetch('http://api.indie.cn:9012/user/wechat/getShareAccessToken', {
|
|
|
|
|
// const res = await fetch('http://39.103.180.196:9012/user/wechat/getShareAccessToken', {
|
|
|
|
|
method: 'post',
|
|
|
|
|
body: JSON.stringify({ url }),
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
});
|
|
|
|
|
return res.json();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function WXShareBtn() {
|
|
|
|
|
// const { inWX } = useUA();
|
|
|
|
|
const { inWX } = useUA();
|
|
|
|
|
// const [wxPrepared, setWxPrepared] = useState(false);
|
|
|
|
|
const fetchingRef = useRef(false);
|
|
|
|
|
|
|
|
|
|
const handleShare = () => {
|
|
|
|
|
alert('敬请期待');
|
|
|
|
|
// const handleShare = () => {
|
|
|
|
|
// if (!wxPrepared) return;
|
|
|
|
|
// window.wx.share();
|
|
|
|
|
};
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if (!inWX) return;
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!inWX) return;
|
|
|
|
|
|
|
|
|
|
// const { searchParams } = new URL(window.location.href);
|
|
|
|
|
// const code = searchParams.get('code');
|
|
|
|
|
const { origin, pathname, searchParams } = new URL(window.location.href);
|
|
|
|
|
const code = searchParams.get('code');
|
|
|
|
|
|
|
|
|
|
// // 未授权
|
|
|
|
|
// if (!code) {
|
|
|
|
|
// window.location.replace(
|
|
|
|
|
// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=queyue#wechat_redirect`,
|
|
|
|
|
// );
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
// 未授权
|
|
|
|
|
if (!code) {
|
|
|
|
|
window.location.replace(
|
|
|
|
|
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=queyue#wechat_redirect`,
|
|
|
|
|
);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// // 已授权
|
|
|
|
|
// const wx = window.wx;
|
|
|
|
|
// if (typeof wx === 'undefined') return;
|
|
|
|
|
// wx.config({
|
|
|
|
|
// debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
|
|
|
// appId: APPID, // 必填，公众号的唯一标识
|
|
|
|
|
// timestamp: 0, // 必填，生成签名的时间戳
|
|
|
|
|
// nonceStr: '', // 必填，生成签名的随机串
|
|
|
|
|
// signature: '', // 必填，签名
|
|
|
|
|
// jsApiList: [wx.updateAppMessageShareData], // 必填，需要使用的JS接口列表
|
|
|
|
|
// });
|
|
|
|
|
// wx.ready(function () {
|
|
|
|
|
// // 需在用户可能点击分享按钮前就先调用
|
|
|
|
|
// wx.updateAppMessageShareData({
|
|
|
|
|
// title: '', // 分享标题
|
|
|
|
|
// desc: '', // 分享描述
|
|
|
|
|
// link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
|
|
// imgUrl: '', // 分享图标
|
|
|
|
|
// success: () => {
|
|
|
|
|
// 已授权
|
|
|
|
|
if (fetchingRef.current) return;
|
|
|
|
|
fetchingRef.current = true;
|
|
|
|
|
getShareAccessToken(window.location.href)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (!res?.data) return;
|
|
|
|
|
if (typeof wx === 'undefined') return;
|
|
|
|
|
const { timestamp, nonceStr, signature } = res?.data || {};
|
|
|
|
|
wx.config({
|
|
|
|
|
debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
|
|
|
appId: APPID, // 必填，公众号的唯一标识
|
|
|
|
|
timestamp, // 必填，生成签名的时间戳
|
|
|
|
|
nonceStr, // 必填，生成签名的随机串
|
|
|
|
|
signature, // 必填，签名
|
|
|
|
|
jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], // 必填，需要使用的JS接口列表
|
|
|
|
|
});
|
|
|
|
|
wx.ready(function () {
|
|
|
|
|
// setWxPrepared(true);
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
// }, [inWX]);
|
|
|
|
|
const queryArr: string[] = [];
|
|
|
|
|
searchParams.forEach((value, key) => {
|
|
|
|
|
if (key && !['code', 'state'].includes(key)) {
|
|
|
|
|
queryArr.push(`${key}=${value}`);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const shareParam = {
|
|
|
|
|
title: '雀乐', // 分享标题
|
|
|
|
|
link: `${origin}${pathname}${queryArr.length > 0 ? `?${queryArr.join('&')}` : ''}`, // 分享链接
|
|
|
|
|
desc: '独立 不独于世', // 分享描述
|
|
|
|
|
imgUrl: '', // 分享图标
|
|
|
|
|
success() {},
|
|
|
|
|
cancel() {},
|
|
|
|
|
};
|
|
|
|
|
wx.updateAppMessageShareData(shareParam);
|
|
|
|
|
wx.onMenuShareAppMessage(shareParam);
|
|
|
|
|
wx.onMenuShareTimeline(shareParam);
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.finally(() => {
|
|
|
|
|
fetchingRef.current = false;
|
|
|
|
|
});
|
|
|
|
|
}, [inWX]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<button
|
|
|
|
|
{/* <button
|
|
|
|
|
className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
|
|
|
|
|
onClick={handleShare}
|
|
|
|
|
>
|
|
|
|
|
@ -70,7 +98,7 @@ export default function WXShareBtn() {
|
|
|
|
|
alt="wx-share"
|
|
|
|
|
/>
|
|
|
|
|
<span>分享给好友</span>
|
|
|
|
|
</button>
|
|
|
|
|
</button> */}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
