estel_docs/content/blog/1.技术栈/976.Nuxt 微信分享接口.md

title, description, date, img, navigation

title	description	date	img	navigation
Nuxt 微信分享接口	微信分享接口,使用Nuxt,实现微信分享接口.	2025-08-10	https://img.jiwei.xin/20250810130754103.png	icon simple-icons:nuxtdotjs

需求

写了一个文档插件. 缘由呢是之前在 WordPress 上用过一个插件.对接微信的JS SDK,可以实现将链接带标题,图,简介封装成一个 卡片形式.分享给朋友或者朋友圈.比如:

如果没有对接微信的SDK,分享链接是这样的:

实现

这个功能实现起来也不复杂,其中麻烦的地方是向微信获取 access_token 和 jsapi_ticket,这样迫不得已就得写一个后端.

type WeChat = {
config: (cfg: {
debug?: boolean
appId: string
timestamp: number
nonceStr: string
signature: string
jsApiList: string[]
}) => void
ready: (cb: () => void) => void
error: (cb: (e: unknown) => void) => void
updateTimelineShareData: (opts: { title: string, link: string, imgUrl: string, success?: () => void }) => void
updateAppMessageShareData: (opts: { title: string, desc: string, link: string, imgUrl: string, success?: () => void }) => void
}

::tip{icon="lucide-info"} 有利有弊

• 因为要动态向微信请求 access_token 和 jsapi_ticket,并在生命周期内缓存起来,就必须得有个后端,
• 将其包装成了一个 API ,运行在 Nuxt 的服务器
• 但这样就没办法纯静态编译了 ::