微信分享,第一次接触会发现很多坑。网页版微信分享是不支持按钮去分享的,只能通过微信右上角的按钮去分享。通过按钮分享的目前只支持APP。其实这样一来H5的分享就简单了很多。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,点击进入官方api文档; 注意:这里使用的都是微信官方最新的文档
一、首先获取配置所需要的参数
首先使用已有公众号的appid,然后根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp( 时间戳)、noncestr(随机字符串)和signature(签名)。
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用
二、项目引入微信jssdk
引入方式有两种,各取所需:
(1)、通过导入依赖包 首先通过npm 安装依赖 ```javascript npm i -S weixin-js-sdk ``` 然后在页面中引入 ```javascript import wx from 'weixin-js-sdk' ```(2)通过script标签,引入微信官网的JS-SDK文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
三、通过config接口注入权限验证配置
wx.config({
debug: false, // 开启调试模式
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: [
'updateTimelineShareData',//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
'updateAppMessageShareData',//自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
] // 必填
})
四、分享
原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。这里只介绍最新的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。(1)自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
wx.ready(function(){
wx.updateAppMessageShareData({
title: option.title, // 分享标题
desc: option.desc, // 分享描述
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success: function(res){
}
})
})
(2)自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
wx.ready(function(){
wx.updateTimelineShareData({
title: option.title, // 分享标题
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
desc: option.desc, // 分享描述
success: function(res){
// 用户成功分享后执行的回调函数
_this.$http.post(_this.$conf.env.updateShareCount, params).then(res =>{
alert('成功')
}).catch(err =>{
})
}
});
})