feat(share): 添加微信分享功能并优化相关配置

- 新增 getWXShareConfig 函数用于获取微信分享配置
- 在 router 中集成分享功能,使用 getWXShareConfig 替代硬编码的分享信息
- 添加 setWXShareConfig 函数,用于设置分享配置,包括标题、描述、缩略图等
- 在 AD 页面中添加动态修改 document.title 的逻辑
- 优化 SurveyItem 组件中的标题显示逻辑,根据标题宽度动态调整样式
This commit is contained in:
Huangzhe
2025-05-28 16:07:47 +08:00
parent 92a28bca1e
commit 7822ce4516
5 changed files with 56 additions and 15 deletions

BIN
public/yl.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -3,6 +3,7 @@ import layout from '@/layouts/index.vue';
import Design from '@/views/Design/Index.vue';
import Redirect from '@/layouts/redirect.vue';
import type { title } from 'process';
import { getWXShareConfig } from '@/utils/share';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -144,13 +145,7 @@ const router = createRouter({
shareFunc: () => {
if (window.ReactNativeWebView) {
window.ReactNativeWebView.postMessage(
JSON.stringify({
type: 'shareModal',
title: '分享标题',
description: '分享副标题',
thumbImageUrl: 'https://logo.png',
webpageUrl: window.location.href.replace('/ad/', '/share/')
})
JSON.stringify(getWXShareConfig())
);
}
}

36
src/utils/share/index.ts Normal file
View File

@@ -0,0 +1,36 @@
type WXShareConfig = {
type: string;
title: string;
description: string;
thumbImageUrl: string;
webpageUrl: string;
};
let config: WXShareConfig = {
type: 'shareModal',
title: '分享标题',
description: '',
thumbImageUrl: 'https://logo.png',
webpageUrl: window.location.href.replace('/ad/', '/share/')
};
// 设置分享配置
export const setWXShareConfig = (cb?: (config: WXShareConfig) => WXShareConfig) => {
// 留作扩展
cb && (config = cb(config));
const url = new URL(window.location.href);
// 获取 url 图片
config.thumbImageUrl = url.origin + '/yl.png';
// 获取 title 内容
config.title = document.title || '伊调研';
// 描述区域待定
config.description = '';
// 网页地址
config.webpageUrl = window.location.href.replace('/ad/', '/share/');
};
// 获取分享配置
export const getWXShareConfig = () => {
setWXShareConfig();
return config;
};

View File

@@ -20,6 +20,13 @@ function handleButtonClick() {
window.location.href = bannerInfo.value?.url;
}
/**
* 在挂载之后重新修改 html title 内容
*/
setTimeout(() => {
document.title = bannerInfo.value?.title || '伊调研';
}, 800);
</script>
<template>

View File

@@ -57,6 +57,9 @@ function setImg(code: number) {
return imageMap[code] || png11;
}
// 是否显示 title 的 popover
const showTitlePop = ref(false);
// 是否是短标题 title; 在组件挂载之后会根据 title 的宽度来判断
const isShortTitle = ref(false);
onMounted(() => {
// console.log(titleRef.value);
@@ -69,14 +72,14 @@ onMounted(() => {
const surveyTitleStyle = computed<CSSProperties>(() => {
const isPublishNumber = survey.value.is_publish_number;
const isSurveyTime = survey.value.is_time;
const width =
isSurveyTime && isPublishNumber
? isShortTitle.value
? '25vw'
: ''
: isSurveyTime
? '170px'
: '';
let width = '';
if (isSurveyTime && isPublishNumber) {
if (isShortTitle.value) {
width = '25vw';
}
} else if (isSurveyTime) {
width = '170px';
}
return {
maxWidth: width
};