提交博文

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

@@ -0,0 +1,45 @@
+---
+title: Nuxt 微信分享接口
+description: 微信分享接口,使用Nuxt,实现微信分享接口.
+date: 2025-08-10
+img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250810130754103.png
+navigation:
+  icon: simple-icons:nuxtdotjs
+---
+
+
+### 需求
+##### 之前在 WordPress 上用过一个插件.对接微信的JS SDK,可以实现将连接带标题,图,简介封装成一个 卡片形式.分享给朋友或者朋友圈.比如:
+![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250810123533952.png)
+
+##### 如果没有对接微信的SDK,分享链接是这样的:
+![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/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
+}
+```
+
+- 因为要动态向微信请求并在生命周期内缓存起来,就必须得有个后端,
+- 将其包装成了一个 API ,运行在 Nuxt 的服务器 
+- 但这样就没办法纯静态编译了
+
+