diff --git a/content/blog/1.技术栈/976.Nuxt 微信分享接口.md b/content/blog/1.技术栈/976.Nuxt 微信分享接口.md new file mode 100644 index 0000000..3033be4 --- /dev/null +++ b/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 的服务器 +- 但这样就没办法纯静态编译了 + +