如何做微信分享

好久没有写自己在项目所遇到的问题以及解决办法了，外包公司太忙。最近做公众号项目比较多。今天抽空写一些最近在项目遇到的问题吧

首先谈谈微信分享吧

第一步 作为前端必须要和后台商量是 前端去获取code来跟后台openId,还是后台自己获取code传openId给前端。

两种办法都是可行的，个人建议呢，(1)后台获取code 在链接里传openId给前端，前端通过截取url里的参数来保存openId，用localStorage.setItem()来储存取到的openId。以下是截取openId 的函数

	    getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var t = window.location.href.split("=")[1].split("#")[0];
                window.localStorage.setItem('openid', t);
			},

调用getQueryString() 即可

（2）第二种 前端自己获取code 也简单 但是因为vue是一个页面进行路由去其他页面的 所以可能导致也页面刷新，用户体验感不太好。

window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid= &redirect_uri=" + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect"

1.appId 填写自己的（公众号号）

2.redirect_uri (填写后台给你能跳转到你页面的地址）

 3. GetCode(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r != null) return unescape(decodeURI(r[2]));
                return null;
            },

4.获取到code后调后台接口 取到oppenId

5.window.localStorage.setItem('wxOpenId', response.data.wxOpenId); 储存下来

第二步 分享

	axios.post(HOSTS + '/app/beforeShare?token=' + window.localStorage.getItem('token') + '&url=' + encodeURIComponent(window.location.href.split('#')[0]))
					.then((response) => {
						that.hturl = response.data.map.url
						wx.config({
							debug: false,
							appId: response.data.map.appid,
							timestamp: response.data.map.timestamp,
							nonceStr: response.data.map.nonceStr,
							signature: response.data.map.signature,
							jsApiList: [
								'onMenuShareAppMessage',
								'onMenuShareTimeline'
							]
						});

					})
					.catch((error) => {

					})
				wx.ready(function() {
					console.log('我是微信分享')
					// 分享给朋友
					wx.onMenuShareAppMessage({
						title: 'zd', // 分享标题
						desc: 'zd', // 分享描述
						link: that.hturl, // 分享链接
						imgUrl: '', // 分享图标
						type: '', // 分享类型,music、video或link，不填默认为link
						dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						success: function() {
							window.alert('已分享给朋友');

							axios.post(HOSTS + '/app/share?token=' +                                             window.localStorage.getItem('token') + '&type=1' + '&shareType=3')
								.then((response) => {
									that.hturl = response.data.map.url
									wx.config({
										debug: false,
										appId: response.data.map.appid,
										timestamp: response.data.map.timestamp,
										nonceStr: response.data.map.nonceStr,
										signature: response.data.map.signature,
										jsApiList: [
											'onMenuShareAppMessage',
											'onMenuShareTimeline'
										]
									});

								})
								.catch((error) => {

								})

						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
						},
						fail: function(res) {
							window.alert('我是测试！' + JSON.stringify(res));
						}
					});

					// 分享到朋友圈
					wx.onMenuShareTimeline({
						title: 'zd', // 分享标题
						desc: 'zf', // 分享描述
						link: that.hturl,
						imgUrl: '', // 分享图标
						success: function() {
							window.alert('已分享到朋友圈');
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数

						},
						fail: function(res) {
							window.alert(JSON.stringify(res));
						}
					});
				});

代码模块我将步骤写法都附上了

（1）调用后台接口 取到appId timestamp nonceStr signature四个参数去请求 微信 四个参数一个都不能错！！！

（2）在上述调试中 我测试时前端启动dbug模式     debug: true，

一直报错 签名错误 后台返回给我的  signature和我传给微信的一样呀。为什么还是错误呢？于是把后台的签名的拿去验证后，发现后台返回的验证错误，（签名算法错误）。后台改可签名但是还是报了 签名错误。

于是前后台一起找 最终解决办法 前端用encodeURIComponent进行连接地址转化 后台得到转化的 进行签名算法。

当返回config:ok好 分享正常使用了。在

    title: '益管家在线栏目直播进行中', // 分享标题
                        desc: '打造24小时健康好生活', // 分享描述
                        link: that.hturl, // 分享链接
                        imgUrl: '', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

传入你要分享出去的标题 图片 描述就好

由于业务需要我们项目需要分享成功后得到一些信息 所以 在成功后请求了后台接口

 

 

 

欢迎提意见订正 （QQ：1150801771）