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

使用框架：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: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
});

Q：各种奇怪的报错：签名无效、40001、invalid url domain
A：
微信 JS 接口签名校验工具
40001的话是后台获取的token不对（请小伙伴检查一下）
invalid url domain：域名跟微信的安全域名不匹配（需要发布到线上测试）

4’ 通过ready接口处理成功验证

wx.ready(() => {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.onMenuShareAppMessage({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success() {console.log('成功分享给朋友');},cancel() {console.log('分享到朋友取消');},});// 分享到朋友圈wx.onMenuShareTimeline({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接imgUrl: '', // 分享图标success() {console.log('成功分享到朋友圈');},cancel() {console.log('分享到朋友圈取消');},});
});

最后：
微信网页开发的SDK分享只能分享图文链接，
如果一定要分享图片：
1.提示长按保存发给好友/保存后自己发朋友圈；
2.还是一个链接，但是里面有一张图

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

微信分享踩坑：config:invalid signature错误的解决方法
微信分享踩坑:config:invalid signature错误的解决方法一般出现这个错误多半是签名获取失败,而我根据我获取到的签名跟签名算法校验里面得到的签名是一样的,于是查找大量文档,核实可能 ...
微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
微信公众号服务器配置但没有回调,微信公众号 “服务器配置” 踩坑记
前言今天工作的时候,碰到一个极其无语的关于微信公众号的坑,为此,我语言攻击了腾讯的机器人客服.然而并没有卵用...万万没想到,我还是解决了这个问题,并记录下踩坑经历,希望能帮到一些朋友吧. 背景今 ...
7代cpu能装虚拟xp系统吗_Intel 10代PC/笔记本安装Win7踩坑记 amp; 驱动分享
免责声明:本文只是从技术角度进行讨论,主要因我自己的兴趣而引发测试.只代表个人观点,与任何组织机构无关. 目录 - 从赛扬G5900"亮机"CPU说起 - 10代Core Wi ...
加入域时出现以下错误登陆失败该目标账户名称不正确_微信支付踩坑合集：微信小程序支付失败是什么原因?持续更新...
微信小程序开发的过程一定会遇到各种问题,最让人棘手的就是支付问题,因为没有支付做商城类似的小程序就没有办法完成最关键的一步.那么支付失败到底什么原因呢?一下子收集了几个错误类似,希望对你有帮助: No ...
微信开发踩坑之旅之开发准备及服务器配置
在工作和兴趣的机缘巧合之下,我开始接触微信开发.在这里简单记述自己的微信开发踩坑之旅. 首先,由于本人标准的理工科生,记述的语言有所不足,我尽量说明准确和详细点. 本文记述主线 ·申请公众号 ·公众号 ...
微信开发踩坑系列一之Native支付
微信开发踩坑系列一之Native支付 1.前言 1.1.文章说明 1.2.微信支付简介 1.3.项目技术栈 2.Native支付开发 2.1.官方描述 2.2.两种模式介绍 2.3.开发前准备工作 2 ...
微信签名验证踩坑记录1
@ 微信签名验证踩坑记录1 H5页面打开小程序的签名验证算法,我碰到个问题有点奇葩,不过也算是自己吸取个教训. 在H5页面打开小程序需要调用jssdk签名.这里有个URL是前端传过来的参数,这时候要 ...
android小程序_小程序踩坑记
小程序踩坑记希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...

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

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

最新文章

热门文章