https://my.oschina.net/u/2941696/blog/755725
这里我只贴vue相关的
涉及到调用微信功能的就要调用微信的sdk,vue下可以直接使用npm安装
npm install weixin-js-sdk -save
然后在页面中引入
import wx from 'weixin-js-sdk'
首先第一步，在调用分享功能的页面要通过config接口注入权限验证配置，
wx.config({
debug: false, // 开启调试模式,开发时可以开启
appId: Data.appId, // 必填，公众号的唯一标识 由接口返回
timestamp: Data.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: Data.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: Data.signature, // 必填，签名 由接口返回
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
});
}
这里要先让后端提供接口，前端通过接口获取以上参数值，这个接口最好能直接让前端把当前调用分享功能的页面URL直接传递给后端，后端根据这个URL生成签名，否则会报签名无效。
还要注意后端生成签名时要在公众平台中设置白名单，把项目所在的服务器IP加入白名单；
第二步 调用获取“分享到朋友圈”和“发送给好友”接口
注意这个接口时获取按钮点击状态的，所以H5页面是无法自己写个按钮来直接调用分享到朋友圈的，只能使用微信右上角的分享到朋友圈或发送给好友的按钮
wx.ready(() => {
//分享给朋友
wx.onMenuShareAppMessage({
title: '您的好友邀请您注册秒单之家', // 分享标题
desc: '快来注册秒单之家，一大笔订单等你来拿', // 分享描述
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/zhanghuifeng/static/img/logo.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
// alert('cancel')
_this.wxShare() //这是用户撤销后重新执行第一步验证签名的方法名 根据自己的命名写
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '您的好友邀请您注册秒单之家', // 分享标题
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/zhanghuifeng/static/img/logo.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
_this.wxShare()
}
})
})
这里的link参数就是你要分享的页面的URL ，如果要分享的页面是当前页 而且是vue的路由页面（hash模式页面），那么就直接用location.href就可以，不需要用娇娇同学的split[0]方法截取URL，如果是其他页面就写全那个页面的地址就行，我的是其他路由页面，不是当前页面 所以我的_this.shareUrl对应的值是
_this.shareUrl = window.document.location.protocol + '//' + window.document.location.host + '/zhanghuifeng/#/registerShare?icode=' + res.data
icode是我分享的页面带的参数;
还有要注意的是我的cancel事件中调用了一个method _this.fetchData()；这是用来在用户取消后重新执行上两步，尤其是验证签名，否则用取消后再次分享则会不成功；
贴出 完整的方法代码：
wxShare() {
let _this = this
this.API.get('/uc/wx_params'+'?channel=h5'+'&url='+window.location.href).then(function(res){
if(res.code==200){
var Data = res.data;
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作
wx.config({
debug: false, // 开启调试模式,开发时可以开启
appId: Data.appId, // 必填，公众号的唯一标识 由接口返回
timestamp: Data.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: Data.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: Data.signature, // 必填，签名 由接口返回
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
});
}else if(res.code==50107){
$.toptip('用户不存在', 'warning');
}else if(res.code == 40002){
$.toptip('参数缺失', 'warning');
}else if(res.code == 500){
$.toptip('系统异常，请稍后再试', 'warning');
}else{
$.toptip('系统繁忙，请稍后再试', 'warning');
}
}).catch(function(error){
console.log('wx_params', error);
});
wx.ready(() => {
//分享给朋友
wx.onMenuShareAppMessage({
title: '您的好友邀请您注册秒单之家', // 分享标题
desc: '快来注册秒单之家，一大笔订单等你来拿', // 分享描述
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/kwd/static/img/logo.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
// alert('cancel')
_this.fetchData()
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '您的好友邀请您注册秒单之家', // 分享标题
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/kwd/static/img/logo.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
_this.fetchData()
}
})
})
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
vue 微信分享朋友圈或朋友 demo
先写一个share.js 放在 utils
准备工作 需要weixin-js-sdk
npm install weixin-js-sdk安装好后可以使用一下两种方式进行引入。/* 使用CommonJs规范引入 */ const wx = require('weixin-js-sdk'); /* 使用ES6模块引入 */ import wx from 'weixin-js-sdk';直接上demo代码
import {post} from "../api/http";//封装的请求方式post get import wx from 'weixin-js-sdk' export const shareTitle = '测试'; export const shareUrl = '测试连接'; export const shareImg = '测试图片'; export const shareDesc = '测试详情'; /** *分享 * @param _this * @param shareTitle 标题 * @param shareUrl 链接 * @param shareImg 图片 * @param shareDesc 描述
* 也可以传入对象 把这个demo变成一个公共方法，主要是便于回调分享成功的方法 例如 export const option */
//举例：let option = {shareTitle:this.datalist.name, // 分享标题shareUrl: window.location.href,shareImg:this.datalist.image,// 分享图标shareDesc:'我在#侑侑商城#发现一个非常不错的商品，快来看看吧',success: function () {alert(分享成功) //特别说明一下 微信官方已经关闭了分享是否成功的判断了 所以不管你是取消了还是分享了 都是返回success},error: function () {}//end
export const commonShare = (_this, shareTitle, shareUrl, shareImg, shareDesc) => { let url = window.location.href; let data = { url: url }; post('main/getShareSign',data).then(res => { if (res.signature !=''){ var data = res; wx.config({ debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.appId, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature, // 必填，签名，见附录1 jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function () { wx.onMenuShareTimeline({ title: shareTitle, // 分享标题 link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareImg, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 _this.$vux.toast.text('分享成功！！！'); }, cancel: function () { // 用户取消分享后执行的回调函数 _this.$vux.toast.text('取消分享！！！'); } }); wx.onMenuShareAppMessage({ title: shareTitle, // 分享标题 desc: shareDesc, // 分享描述 link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareImg, // 分享图标 type: "", // 分享类型,music、video或link，不填默认为link dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 _this.$vux.toast.text('分享成功！！！'); }, cancel: function () { // 用户取消分享后执行的回调函数 _this.$vux.toast.text('取消分享！！！'); } }); }); } }).catch(err => { alert(err) console.log(err) }) };然后进入页面初始化的时候执行此方法（否则如用户直接点分享到朋友圈或朋友是不会显示图片等等 相当于还没有生效）
var shareTitle=this.goodsTitle; var shareUrl=this.url; var shareImg=this.GoodsImg; var shareDesc="简介详细"; commonShare(this, shareTitle, shareUrl, shareImg, shareDesc);//分享朋友圈和朋友
先写一个share.js 放在 utils
准备工作 需要weixin-js-sdk
npm install weixin-js-sdk
安装好后可以使用一下两种方式进行引入。
/* 使用CommonJs规范引入 */
const wx = require('weixin-js-sdk');
/* 使用ES6模块引入 */
import wx from 'weixin-js-sdk';
直接上demo代码
import {post} from "../api/http";//封装的请求方式post get
import wx from 'weixin-js-sdk'
export const shareTitle = '测试';
export const shareUrl = '测试连接';
export const shareImg = '测试图片';
export const shareDesc = '测试详情';
/**
*分享
* @param _this
* @param shareTitle 标题
* @param shareUrl 链接
* @param shareImg 图片
* @param shareDesc 描述
* 也可以传入对象 把这个demo变成一个公共方法，主要是便于回调分享成功的方法 例如 export const option
*/
//举例：
//end
export const commonShare = (_this, shareTitle, shareUrl, shareImg, shareDesc) => { let url = window.location.href; let data = { url: url }; post('main/getShareSign',data).then(res => { if (res.signature !=''){ var data = res; wx.config({ debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.appId, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature, // 必填，签名，见附录1 jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function () { wx.onMenuShareTimeline({ title: shareTitle, // 分享标题 link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareImg, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 _this.$vux.toast.text('分享成功！！！'); }, cancel: function () { // 用户取消分享后执行的回调函数 _this.$vux.toast.text('取消分享！！！'); } }); wx.onMenuShareAppMessage({ title: shareTitle, // 分享标题 desc: shareDesc, // 分享描述 link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareImg, // 分享图标 type: "", // 分享类型,music、video或link，不填默认为link dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 _this.$vux.toast.text('分享成功！！！'); }, cancel: function () { // 用户取消分享后执行的回调函数 _this.$vux.toast.text('取消分享！！！'); } }); }); } }).catch(err => { alert(err) console.log(err) }) };
然后进入页面初始化的时候执行此方法（否则如用户直接点分享到朋友圈或朋友是不会显示图片等等 相当于还没有生效）
var shareTitle=this.goodsTitle;
var shareUrl=this.url;
var shareImg=this.GoodsImg;
var shareDesc="简介详细";
commonShare(this, shareTitle, shareUrl, shareImg, shareDesc);//分享朋友圈和朋友