微信公众号开发中分享功能 分享微信朋友圈/微信好友
微信公众号中经常遇到的问题就是分享链接到微信朋友圈 微信好友一类的需求。下边走一下需要操作的流程1.首先再项目中(一般就放到自己的公共文件中引入即可,vue中引入到index.html中)引入微信js 链接。目前最高版本应该是1.4.0<script type="text/JavaScript" src="http://res.wx.qq.com/open/js/jweixin-1....
·
微信公众号中经常遇到的问题就是分享链接到微信朋友圈 微信好友一类的需求。
下边走一下需要操作的流程
1.首先再项目中(一般就放到自己的公共文件中引入即可,vue中引入到index.html中)引入微信js 链接。
目前最高版本应该是1.4.0
<script type="text/JavaScript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2.在对应需要的文件内添加微信分享的方法
sharewxinit: function (title, content, imgUrl, shareUrl) {
var vm = this;
var baseUrl = encodeURIComponent(location.href.split('#')[0]);
var jsApiList = "checkJsApi,onMenuShareAppMessage,onMenuShareTimeline";
vm.axios.post("/wx/jsapi/jsapiSignature", {
url: baseUrl,
debug: false,
jsApiList: jsApiList
}).then((res) => {
var data = res.data.data;
console.log(data);
wx.config(eval("(" + data + ")"));
});
wx.ready(function () {
//分享到朋友圈的
wx.onMenuShareTimeline({
title: title,
link: shareUrl,
imgUrl: imgUrl,
success: function () {
vm.shareShow = false;
}
});
//分享给朋友的
wx.onMenuShareAppMessage({
title: title,
desc: content,
link: shareUrl,
imgUrl: imgUrl,
type: '',
dataUrl: '',
success: function (da2) {
vm.shareShow = false;
}
});
});
},
3.调用方法
//在方法中需要传入四个参数 第一个是标题,第二个是内容,第三个是 图片logo,第四个是要跳转到的链接(shareurl,自行定义跳转链接)
如下:
this.sharewxinit("推荐您成为墨林艺术艺术家", "推荐您成为墨林艺术艺术家", "http://image.molinmall.com/agent/logo.png", shareurl);
效果如下:
一般做到这三部就没有问题了,
需要注意的点:
进入这个页面的时候 需要使用链接跳转。a标签的href这种 或者 window.localtion.href=" "即可。
vue项目中切不可路由跳转。会出现链接跳转的路径不对
还有一个经历分享:
上次用的时候 接收到这样的信息
更新1.4.0版本, 而且接口的名称有变,
使用时,我们将版本升级,接口名称更新。但是升级之后,会遇到bug,并不是我们想要的效果。 又不得不将接口名称改回去,但是版本就仍保留了最高的1.4.0
之后如有解决办法之后再来追加更新
更多推荐
已为社区贡献17条内容
所有评论(0)