Vue单页式应用(Hash模式下)实现微信分享的实例

前端微信分享的基本步骤:

一.绑定域名:

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说,微信开发的都应该清楚。

二.引入js文件:

在需要调用JS接口的页面引入如下JS文件,(支持https):

请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK。

这里我采用了https,而且我用Vue-cli生成的项目,因此我将文件直接在index.html中引入。

三.通过config接口注入权限验证配置:

在下面会有实例说明,这里我只想说,接口可以放在自己写的AJAX回调用,将成功回调的值直接传入到wx.config需要的参数中。

四.通过ready接口处理成功验证

文档中说:“ config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。”

个人认为,这个可能是针对APP的,我的项目是微信的H5功能页面,如果想分享的话只能从右上角的“三个点点”中直接分享。(这仅是小生的个人想法,还望有学识有智谋的您给出确切的答案)。

五.通过error接口处理失败验证:这个我只是写到了项目中,不多做说明。

其他的文档中写的很清楚,聪明的你可能不需要我更多的解释。微信API给的还算详细,很多地方直接调用就可以。只是对于初次使用的人来说,放到自己的环境中会有些许小坑很难发现,导致浪费很多时间,但解决后发现并不难处理。以下是我开发时的部分笔记,如有不足还望各位观众老爷多多提点:

1.触及某个页面分享时,需要得到当前该页面的Url,用来传给后台。换取config中的参数。

2.页面分享出去的窗口中对应着一个接口,该接口中包含一个Url,这个Url是分享者希望分享出去的页面链接。在这个Url中可以拼加自己需要的参数,实现分享的追踪。

如:var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;这个shareUrl可以直接传到街口的参数中。

3.分享页面的JS中必须配置有config,在config中有一个jsApiList,在其中放置需要使用的JS接口列表,并以字符串的形式写入。

//接口入住权限验证配置 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: appId, // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature, // 必填,签名,见附录1 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });

4.在config下方,有一个ready方法,该方法用来初始化我们要应用的js列表,而且任何方法一定要放在config方法后才可以。

如在Vue中,可以将该方法放在mounted中,并在其中放入‘分享给朋友',‘分享至朋友圈'的js接口。

值得注意的是:两个接口并不是写在触发事件的方法中(如@click='Fun'),而是直接在页面初始化的时候,放在ready中直接被调用。

wx.ready(function() { wx.onMenuShareAppMessage({ title: shareTitle, // 分享标题 desc: 'This is a test!', // 分享描述 link: shareUrl, // 分享链接 imgUrl: imgUrl, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success: function() { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareTimeline({ title: shareTitle, // 分享标题 link: shareUrl, imgUrl: imgUrl, // 分享图标 success: function() { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); });

以上部分代码放在Vue的mounted中,当页面组件生成的时候直接被调用。

5.坑点

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjdxg.html