微信分享踩坑记（一）——微信生态右上角自定义分享（微信JS-SDK）

最新推荐文章于 2021-07-09 10:26:56 发布

原创

最新推荐文章于 2021-07-09 10:26:56 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信分享 #vue

本文介绍了在Vue.js项目中利用微信JS-SDK实现微信生态右上角自定义分享的踩坑经历，包括设置JS安全域名、处理打包问题、签名错误排查以及分享限制等关键步骤。在遇到.txt文件放置问题时，通过修改webpack配置解决了访问路径问题；对于签名错误，提供了微信接口签名校验工具进行排查。注意，微信网页分享仅支持图文链接，若需分享图片，建议提示用户长按保存或通过链接方式分享带图内容。

使用框架：Vue.js、微信JS-SDK、HTML5+（HBuilder）
两种场景：微信生态右上角自定义分享、APP分享到微信

1’ 公众号设置JS安全域名

公众号开发者可在该域名下调用微信开放的JS接口（详细步骤请自行检索*）

Q：其中的一个.txt校验文件需要放在域名的根目录下面，但是vue中使用webpack打包出来的静态文件通常是放在static下面的，这样会报错
A：将文件放在项目的根目录，并在webpack的这两个目录中添加这一段代码（要保证：域名/文件名.txt能直接访问）
在这里插入图片描述

2’ vue中引入微信相关的模块

Vue.use(WechatPlugin);
const wx = Vue.wechat;

3’ 通过config接口注入权限验证配置（需要后台提供接口）

wx.config({
   
   
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp