h5公众号开发分享总结
浪费了三天时间终于把这个坑填完，ios兼容和安卓兼容问题很多，总结一下供大家参考，如有不足，欢迎大家留言指正，谢谢。
一、产品要求与项目配置。
产品要求：在列表页面点击按钮，唤起分享面板，进行分享。（无法实现，h5无法通过js唤起分享面板）。
产品要求改进：通过微信右上角三个点进行分享，但是需要分享当前点击项进行分享（无法实现，分享只能是单独页面）。
产品要求改进：增加详情页面进行分享。（终于可以实现。。。）
项目配置：需要填写js安全域名和网页授权域名。
二、分享函数，话不多说上代码：
sharefuns(shareData) {
let _this = this;
clearTimeout(this.titmer);
this.titmer = setTimeout(async () => {
let { data } = await getWxConfigParam({
url: encodeURIComponent(location.origin + `/sharePage`),
});
localStorage.setItem("shareHref", this.shareUrl);
wx.config({
debug: false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.noncestr,
signature: data.sign,
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
});
wx.ready(function () {
wx.updateAppMessageShareData({
title: shareData.title || "oa分享系统",
desc: shareData.desc || "oa分享系统描述",
link: `${window.location.protocol}//${
window.location.host
}/share.html?redirectUrl=${encodeURIComponent(shareData.realUrl)}`,
imgUrl: shareData.imgUrl,
success: function (res) {
// 设置成功
console.log("分享成功");
},
fail(rej) {
console.log("分享失败11");
_this.$router.push({ path: "/bSiteShare" });
// alert(JSON.stringify(rej));
},
});
wx.updateTimelineShareData({
title: shareData.title || "oa分享系统",
desc: shareData.desc || "oa分享系统描述",
link: `${window.location.protocol}//${
window.location.host
}/share.html?redirectUrl=${encodeURIComponent(shareData.realUrl)}`,
imgUrl: shareData.imgUrl,
success: function (res) {
// 设置成功
console.log("分享成功");
},
fail(rej) {
console.log("分享失败11");
_this.$router.push({ path: "/bSiteShare" });
// alert(JSON.stringify(rej));
},
});
});
wx.error(function (res) {
console.log("权限获取失败11");
console.log(res);
});
}, 500);
},
踩坑1：link必须是js安全域名下的页面否则报签证失败。
踩坑2：spa单页面分享需要指定静态页面重定向，url如果添加参数，安卓会报签证失败。
静态页面代码：
踩坑3：ios系统，分享页面为进入系统的第一个页面，history模式下需要在路由拦截里面添加验签操作。
代码：
let getConfig = async function (url) {
const {data: data} = await getWxConfigParam({
url: encodeURIComponent('http://test-oam.1000phone.net/sharePage'),
})
console.log(data.appid)
wx.config({
debug: false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.noncestr,
signature: data.sign,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
})
wx.ready(function () {
console.log('权限获取成功')
wx.updateAppMessageShareData({
title: 'oa移动端分享系统',
desc: 'oa移动端分享系统分享',
link: 'http://test-oam.1000phone.net/sharePage',
imgUrl: 'http://test-oam.1000phone.net/img/bg.1cbdf362.png',
success: function (res) {
// 设置成功
console.log('分享成功')
},
fail(rej) {
console.log('分享失败11')
},
})
})
}
let isIOS = function () {
var isIphone = navigator.userAgent.includes('iPhone')
var isIpad = navigator.userAgent.includes('iPad')
return isIphone || isIpad
}
const router = new VueRouter({ mode: 'history', routes })
router.beforeEach((to, from, next) => {
console.log('800000000000000000');
next()
if (isIOS()) {
getConfig()
next()
} else {
next()
}
})
三，路由处理，因为要兼容ios分享必须是进入的第一个页面问题，做了如下操作。
1.公众号设置页面的时候直接进入分享页面。
2.列表页进入详情页通过全局缓冲传递数据可以是vuex或者是localstorage。（ps分享页面url不允许加参数,不能通过url传递）。
3.因为系统需要登录，如果没有token需要跳转到登陆页面，如果有token，则跳转到上次离开的页面（根据缓冲数据判断）。
注意分享详情页面返回上一级，需要清除一下缓冲数据
