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

MytLoy

于 2018-11-27 17:45:58 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信公众号文章标签：微信分享 vue

本文链接：https://blog.youkuaiyun.com/LYP_csdn_jy/article/details/84568721

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用框架：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: '',

最低0.47元/天解锁文章