vue2.0 Hash模式下实现微信分享

1，通过后台，获取accessToken 和 签名jsApiTicket，并写入浏览器缓存（可以写在app.vue中）

<script type="text/ecmascript-6">
import Store from 'common/js/store.js';
const CODE_SUC = 1;
const CODE_ERR = 0;
export default {
name: 'app',
data () {
return {
wxToken: {
accessToken: ""
},
wxJsApiTicket: {
jsApiTicket: ""
}
};
},
created () {
setInterval(this.getAccessToken(), 7000);
// 接口入住权限验证配置
},
components: {
vFooter
},
methods: {
　　// 获取accessToken 和 签名jsApiTicket，并写入浏览器缓存
getAccessToken () {
this.axios.post("/api/user/getAccessToken", {
"token": null,
"uid": 0,
"devType": "wx"
}).then((res) => {
res = res.data;
if (res.code === CODE_SUC) {
// console.log(res.accessToken);
this.wxToken.accessToken = res.accessToken;
this.wxJsApiTicket.jsApiTicket = res.jsApiTicket;
Store.saveAccessToken(this.wxToken);
Store.saveJsApiTicket(this.wxJsApiTicket);
// console.log(res.accessToken);
} else if (res.code === CODE_ERR) {
console.log("获取accessToken失败");
}
}).catch((res) => {
window.alert('网络异常,登录请求失败');
});
}
}
};
</script>

2，上面的store.js（写入浏览器缓存的文件）如下

const STORAGE_KEY1 = 'memberInfo';
const STORAGE_KEY2 = 'token';
const STORAGE_KEY3 = 'accessToken';
const STORAGE_KEY4 = 'jsApiTicket';

export default {
fetchFromLocal () {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY1) || "{}");
},

saveToLocal (obj) {
window.localStorage.setItem(STORAGE_KEY1, JSON.stringify(obj));
},

saveAccessToken (obj) {
window.localStorage.setItem(STORAGE_KEY3, JSON.stringify(obj));
},

saveJsApiTicket (obj) {
window.localStorage.setItem(STORAGE_KEY4, JSON.stringify(obj));
}
};

　　

3，mian.js中，注册分享全局函数，并暴露出接口

import wx from 'weixin-js-sdk';   // 导入微信sdk
import Store from 'common/js/store.js';   // 导入store.js

// 全局注册分享函数
Vue.prototype.wxShare = function (title, desc, link, imgUrl) {
// 获取签名
this.axios.post("/api/user/getSignature", {
"token": null,
"uid": 0,
"devType": "wx",
"ticket": Store.fetchjsApiTicket().jsApiTicket,  // 获取浏览器缓存的签名
"url": encodeURIComponent(window.location.href.split('#')[0]) // 此处进行一次编码
}).then((res) => {
res = res.data;
if (res.code === CODE_SUC) {
wx.config({
debug: false,
appId: '', // 填写自己的appID
timestamp: res.timestamp,
nonceStr: res.noncestr,
signature: res.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
} else if (res.code === CODE_ERR) {
console.log("获取accessToken失败");
}
}).catch((res) => {
window.alert('网络异常,登录请求失败');
});
wx.ready(function () {
// 分享给朋友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
window.alert('已分享给朋友');
this.axios.post("/api/product/shareStatistics", {
"token": null,
"uid": 0,
"devType": "wx"
}).then((res) => {
res = res.data;
if (res.code === CODE_SUC) {
window.alert("分享返回数据成功");
} else if (res.code === CODE_ERR) {
console.log("获取失败");
}
}).catch((res) => {
window.alert('网络异常,登录请求失败');
});
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
fail: function (res) {
window.alert(JSON.stringify(res));
}
});

// 分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link,
imgUrl: imgUrl, // 分享图标
success: function () {
window.alert('已分享到朋友圈');
},
cancel: function () {
// 用户取消分享后执行的回调函数
this.axios.post("/api/product/shareStatistics", {
"token": null,
"uid": 0,
"devType": "wx"
}).then((res) => {
res = res.data;
if (res.code === CODE_SUC) {
window.aleryt("分享返回数据成功");
} else if (res.code === CODE_ERR) {
console.log("获取失败");
}
}).catch((res) => {
window.alert('网络异常,登录请求失败');
});
},
fail: function (res) {
window.alert(JSON.stringify(res));
}
});
});
};

4，在相应的位置调用注册好的wxShare （title, desc, link, imgUrl）函数，并传入所需的值：

　 例：以下为分享商品详情页面，link 为自己拼接路径的变量

this.wxShare('商品详情' + ' ' + this.good.goodsInfo.goodsName, this.good.goodsInfo.goodsName, link, this.IMG_BASE_URL + this.good.goodsInfo.goodsImage);

5，特别注意：在Hash模式下，安卓中会遇到分享到朋友圈之后，点击跳转会首页的情况，此时分享的路径与商品的真实路径是不一致的。需要在服务器端稍微处理一下。即把index文件，重新建一个文件夹，例如static，放进去。此时分享之后的路径，与真实路径才是一致的，也不会发生跳回首页的情况。苹果手机则不会有这个问题。