vue 微信html,vue 实现微信端网页分享

这个问题折磨了好久，问了很多人都觉得很简单，的确很简单相对于做过了的人来说的话，的确如此，但是第一次做的话，太多坑要踩了，决定记录下来

1、公众号配置：

如果你们的公众号有专人保管，那么跟他说把安全域名加一下，安全域名用于微信的验证，没有这一步操作，下面的都白搭。比如我们的测试公众号，绑定的就是我们测试服务器的域名。同理，生产也是如此。

2、后端配置VUE:

要想使用微信的JS-SDK功能，需要生成签名，配合appId才能使用，这些步骤通常是由后端生成的。这里省去3000字描述如何生成签名，反正你找后端同学就对了。

3、前端配置

终于轮到我们前端上场了，啰嗦了那么多，下面让我们正式起飞。

4，安装微信JS-SDK

首先我们通过npm 安装 微信的js-sdk，当然你也可以在index.html页面中直接加

引用，哪种方式都可以。

//安装

npm install weixin-js-sdk --save

//在需要使用的路由里进行引用 也可以进行全局引用

import wx from 'weixin-js-sdk'

话不多说，先上代码了

//微信分享

WeChatshare(){

let that=this;

let data={url:window.location.href.split('#')[0]};

this.axios.post('/api/v1/signture',data)

.then((res)=>{

wx.config({

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

appId: res.data.data.appId, //必填，公众号的唯一标识

timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳

nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串

signature: res.data.data.signature, // 必填，签名

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

});

//拼接当前地址

let shareUrl=window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1];

shareUrl = shareUrl.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl);

wx.ready(function () {

//分享给朋友

wx.onMenuShareAppMessage({

title: that.fenxi_title,

desc: that.fenxi_describe,

link: shareUrl,

imgUrl: that.fenxi_img,

success: function (res) {

alert('分享成功！');

},

cancel:function(res){

alert('分享失败！');

}

})

//分享到朋友圈

wx.onMenuShareTimeline({

title: that.fenxi_title,

link: shareUrl,

imgUrl: that.fenxi_img,

success: function (res) {

alert('分享成功！');

},

cancel:function(res){

alert('分享失败！');

}

})

});

})

.catch((res)=>{

// console.log(res);

})

},

wx.config({

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

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

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

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

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

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

});

wx.ready(function () {

//分享给朋友

wx.onMenuShareAppMessage({

title: "",// 分享标题

desc: "",// 分享描述

link: "",// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: "",// 分享图标

success: function (res) {

alert('分享成功！');

},

cancel:function(res){

alert('分享失败！');

}

})

//分享到朋友圈

wx.onMenuShareTimeline({

title: "",// 分享标题

link: "",// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: "",// 分享图标

success: function (res) {

alert('分享成功！');

},

cancel:function(res){

alert('分享失败！');

}

})

});

根据sdk文档的教程来，如果都没问题的话还是报签名错误，那应该是后台的问题了

后面可能还会出现分享的链接一直跳转至首页问题，我用的vue 带hash '#/' 微信分享后点开链依然是首页，百度了下，记录下来

第一种方法

网上很多网友都说这个方法可行 通过尝试后发现依然还是出现那个问题

//将地址拼接

window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1]

第二种方法 使用url重定向 测试有效

在static文件夹下，新建html/redirect.html。

redirect.html 内容：

let url = location.href.split('?')

let pars = url[1].split('&')

let data = {}

pars.forEach((n, i) => {

let p = n.split('=')

data[p[0]] = p[1]

})

if (!!data.app3Redirect) {

self.location = decodeURIComponent(data.app3Redirect)

}

然后最后的地址

let shareUrl=window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1];

shareUrl = shareUrl.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl);//需要分享的地址

到了这里就结束了，可能写的不是太好，请打算指教