vue+h5+js-sdk 实现分享的功能(分享至好友/朋友圈)

vue+h5+js-sdk 实现分享的功能(分享至好友/朋友圈)

需求:

用户在h5 页面中实现微信的分享至好友、分享至朋友圈的功能、且实现的方式为卡片的形式,(一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友。vue项目中,分享携带头部标题、简介和缩略图等信息)。

效果图:

分享后的展现形式:

注明几点踩过的坑

要想分享出去是卡片的形式,而不是链接的方式,需要通过如下几种方式:

以扫码的方式进入,后进行分享将链接收藏,从收藏中点击进入,后进行分享在微信公众号的菜单栏中进行配置链接,用户在微信公众号中点击,后进行分享 注: 如果是点击链接进入,则分享出去还是链接的形式。

实现方式

在微信公众号中进行配置

将域名的ip进行配置

代码实现方式

安装weixin-js-sdk

npm install weixin-js-sdk

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

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: '', // 必填,公众号的唯一标识

timestamp: , // 必填,生成签名的时间戳

nonceStr: '', // 必填,生成签名的随机串

signature: '',// 必填,签名

jsApiList: [] // 必填,需要使用的JS接口列表

});

引入代码中并使用

代码字段解释 :

winUrl :这个必须是前端传递给后端signature 必须是后端返回的,如果返回错误,则一直配置失败自己写的按钮,是不能唤起微信右上角三个点进行分享的,可以通过给用户提示,进行引导。

可参考官方网址:微信网页开发,分享的功能

相关创作

湫岩海边 추암해변 : VISITKOREA
正规365体育投注

湫岩海边 추암해변 : VISITKOREA

📅 08-19 👁️ 9582
单缸柴油机最大的是多少匹马力
cctv3直播365

单缸柴油机最大的是多少匹马力

📅 08-09 👁️ 9515