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


### 需求
##### 写了一个文档插件. 缘由呢是之前在 WordPress 上用过一个插件.对接微信的JS SDK,可以实现将链接带标题,图,简介封装成一个 卡片形式.分享给朋友或者朋友圈.比如:
![image.png](https://img.lijue.net/20250810123533952.png)

##### 如果没有对接微信的SDK,分享链接是这样的:
![image.png](https://img.lijue.net/20250810123719803.png)





### 实现
##### 这个功能实现起来也不复杂,其中麻烦的地方是向微信获取 access_token 和 jsapi_ticket,这样迫不得已就得写一个后端.
```ts[wxShare.vue]
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 的服务器
- 但这样就没办法纯静态编译了
::