feat(分享): 添加微信分享功能到课程详情页
添加 useShare 组合式函数实现微信分享功能,并在课程详情页加载后设置分享内容
Showing
2 changed files
with
47 additions
and
0 deletions
src/composables/useShare.js
0 → 100644
| 1 | +/* | ||
| 2 | + * @Date: 2022-06-13 17:42:32 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-12-04 13:36:41 | ||
| 5 | + * @FilePath: /mlaj/src/composables/useShare.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 8 | +import wx from 'weixin-js-sdk'; | ||
| 9 | + | ||
| 10 | +/** | ||
| 11 | + * @description: 微信分享功能 | ||
| 12 | + * @param {*} title 标题 | ||
| 13 | + * @param {*} desc 描述 | ||
| 14 | + * @param {*} imgUrl 图标 | ||
| 15 | + * @return {*} | ||
| 16 | + */ | ||
| 17 | +export const sharePage = ({title = '美乐爱觉', desc = '', imgUrl = ''}) => { | ||
| 18 | + const shareData = { | ||
| 19 | + title, // 分享标题 | ||
| 20 | + desc, // 分享描述 | ||
| 21 | + link: location.origin + location.pathname + location.hash, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致 | ||
| 22 | + imgUrl, // 分享图标 | ||
| 23 | + success: function () { | ||
| 24 | + // console.warn('设置成功'); | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + // 分享好友(微信好友或qq好友) | ||
| 28 | + wx.updateAppMessageShareData(shareData); | ||
| 29 | + // 分享到朋友圈或qq空间 | ||
| 30 | + wx.updateTimelineShareData(shareData); | ||
| 31 | + // 分享到腾讯微博 | ||
| 32 | + wx.onMenuShareWeibo(shareData); | ||
| 33 | + | ||
| 34 | + // // 获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃) | ||
| 35 | + // wx.onMenuShareAppMessage(shareData); | ||
| 36 | + // // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃) | ||
| 37 | + // wx.onMenuShareTimeline(shareData); | ||
| 38 | + // // 获取“分享到QQ”按钮点击状态及自定义分享内容接口(即将废弃) | ||
| 39 | + // wx.onMenuShareQQ(shareData); | ||
| 40 | +} |
| ... | @@ -339,6 +339,7 @@ import { useAuth } from '@/contexts/auth' | ... | @@ -339,6 +339,7 @@ import { useAuth } from '@/contexts/auth' |
| 339 | import { useTitle } from '@vueuse/core'; | 339 | import { useTitle } from '@vueuse/core'; |
| 340 | import { showToast, showDialog, showImagePreview } from 'vant'; | 340 | import { showToast, showDialog, showImagePreview } from 'vant'; |
| 341 | import { formatDate } from '@/utils/tools' | 341 | import { formatDate } from '@/utils/tools' |
| 342 | +import { sharePage } from '@/composables/useShare.js' | ||
| 342 | 343 | ||
| 343 | import AppLayout from '@/components/layout/AppLayout.vue' | 344 | import AppLayout from '@/components/layout/AppLayout.vue' |
| 344 | import FrostedGlass from '@/components/ui/FrostedGlass.vue' | 345 | import FrostedGlass from '@/components/ui/FrostedGlass.vue' |
| ... | @@ -762,6 +763,12 @@ const toggleTask = (type) => { | ... | @@ -762,6 +763,12 @@ const toggleTask = (type) => { |
| 762 | const closeCheckInDialog = () => { | 763 | const closeCheckInDialog = () => { |
| 763 | showCheckInDialog.value = false; | 764 | showCheckInDialog.value = false; |
| 764 | } | 765 | } |
| 766 | + | ||
| 767 | +setTimeout(() => { | ||
| 768 | + // TAG:微信分享 | ||
| 769 | + // 自定义分享内容 | ||
| 770 | + sharePage({ title: `${course.value.title}`, desc: `${course.value.subtitle}`, imgUrl: course.value.cover }); | ||
| 771 | +}, 1000) | ||
| 765 | </script> | 772 | </script> |
| 766 | 773 | ||
| 767 | <style lang="less"> | 774 | <style lang="less"> | ... | ... |
-
Please register or login to post a comment