微信公众号开发中分享功能 分享微信朋友圈/微信好友

微信公众号中经常遇到的问题就是分享链接到微信朋友圈 微信好友一类的需求。
下边走一下需要操作的流程
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
之后如有解决办法之后再来追加更新

猜你喜欢

转载自blog.csdn.net/MtangEr/article/details/88814127