feat(share): 添加微信分享功能并优化相关配置
- 新增 getWXShareConfig 函数用于获取微信分享配置 - 在 router 中集成分享功能,使用 getWXShareConfig 替代硬编码的分享信息 - 添加 setWXShareConfig 函数,用于设置分享配置,包括标题、描述、缩略图等 - 在 AD 页面中添加动态修改 document.title 的逻辑 - 优化 SurveyItem 组件中的标题显示逻辑,根据标题宽度动态调整样式
This commit is contained in:
BIN
public/yl.png
Normal file
BIN
public/yl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@@ -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
36
src/utils/share/index.ts
Normal 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;
|
||||
};
|
||||
@@ -20,6 +20,13 @@ function handleButtonClick() {
|
||||
|
||||
window.location.href = bannerInfo.value?.url;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在挂载之后重新修改 html title 内容
|
||||
*/
|
||||
setTimeout(() => {
|
||||
document.title = bannerInfo.value?.title || '伊调研';
|
||||
}, 800);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -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
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user