做微信分享时,在苹果手机分享一直不行,就尝试监听URL变化,发现不行。后来用刷新页面解决了。
watch: {
$route(to, from) {
/**
*
r
o
u
t
e
是
异
步
改
变
的
,
所
以
,
在
c
r
e
a
t
e
d
(
)
函
数
、
m
o
u
n
t
e
d
(
)
函
数
,
用
t
h
i
s
.
route是异步改变的,所以,在created()函数、mounted()函数,用this.
route是异步改变的,所以,在created()函数、mounted()函数,用this.route.fullPath获取的是
* 上一个页面的链接,不是当前页面的链接。
* KaTeX parse error: Expected 'EOF', got '#' at position 94: …ransitions.html#̲基于路由的动态过渡 */ …route.fullPath)
}
},
解决方法:
import WeChatShareUtils from ‘…/…/util/WeChatShareUtils.js’;
created() {
WeChatShareUtils.addFlag();
this.Request.findShareByType(this.shopId, '11').then((res) => {
if(res.success) {
let shareTitle = res.data.title;
let shareDesc = res.data.description;
let shareLink = process.env.DOMAIN_SERVER + this.$route.fullPath;
let shareImgUrl = res.data.image;
WeChatShareUtils.share(shareTitle, shareDesc, shareLink, shareImgUrl);
} else {
this.$toast(res.msg);
}
});
},
destroyed() {
WeChatShareUtils.deleteFlag();
}
附带WeChatShareUtils工具类:
/**
- 微信分享工具
- 需要手动点击右上角分享,才能调用分享的函数。自己写的按钮,是不能调用分享的。
- 更多资料:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
- 准备:
- 1、需要一个企业版的微信公众号(非个人版)。
- 2、购买服务器,配置域名。域名需要通过ICP备案。
- 3、登录微信公众平台,打开“公众号设置 -> 功能设置”,配置“JS接口安全域名”。
- 需要把一个txt文件上传到域名的根目录下,才能保存成功。
- 4、引入微信JSSDK组件,版本号可以任意选择,建议使用最新版本。
- 注意:
- 微信分享之后,点开链接,再次分享,小图标、描述都不见了,是因为
- 打开的链接和签名分享的链接,必须完全相同。不相同就会出现这种情况。
- TODO:先用低版本的,到时候整个项目更换到最新版本
*/
import axios from ‘axios’;
import Qs from ‘qs’;
export default {
isIOS() {
//判断是否iOS手机
let iOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
if(iOS) {
return true;
}
return false;
},
addFlag() {
//iOS手机必须刷新页面,才能分享成功。安卓手机,不用刷新。
if(this.isIOS()) {
let iosReload = sessionStorage.getItem(“iosReload”);
if(!iosReload) {
sessionStorage.setItem(“iosReload”, “1”);
window.location.reload();
}
}
},
deleteFlag() {
//在vue的destroyed()函数调用。如果是刷新页面,不会触发destroyed()函数。
sessionStorage.removeItem(‘iosReload’);
},
/**
- 基于H5的微信分享
- @param title
- @param desc
- @param link 签名的链接,必须与当前页面的链接,完全相同,包括参数,否则签名失败。
- @param imgUrl
- @param shareUrl 如果分享的链接不填写,就使用link。shareUrl与link可以不相同。
/
share(title, desc, link, imgUrl, shareUrl) {
let configUrl = ‘/app/user/login/config’;
/*- params是添加到url的请求字符串中的,用于get请求。
- 而data是添加到请求体(body)中的,用于post请求。
*/
/**
* 注意,使用window.location.href分享时,获取的链接不是当前页面的,
* 需要使用“协议 + 域名 + 端口 + this.$route.fullPath”的方式,这样才能分享。
* @type {{url: *}}
*/
let data = {
url: link
};
axios.post(configUrl, Qs.stringify(data), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
timeout: 60000
}).then((res) => {
if(res.data.success && res.data.data) {
let data = res.data.data;
wx.config({
//调试模式
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
//需要使用的JS接口列表
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline',
'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo',
'openLocation', 'getLocation']
});
}
}).catch((res) => {
console.error(res);
});
/**
* 微信第一次分享,在安卓手机完全没问题,但是,在苹果手机,不行,要刷新一下才行。
* 或者分享出去,再点开链接,然后分享,没问题,不用刷新。
* 经过检查:
* 1、分享的链接是没问题的。H5弹窗显示,以及后台的接口显示,链接都是对的。
* 2、签名是正确的。
* 3、link必须和公众号js安全域名一致。 -> 链接没错。
* 4、link带有中文,需要使用encodeURIComponent()。 -> 没有中文。
* 可能的原因:
* 1、分享图标,压缩前与压缩后,经过测试,分享与图标无关。(网上说“ios分享图标不能超过32K”)
* 2、安卓手机的url会随着路由切换变化,iphone手机却不会。经过测试,
* 在苹果手机上,路由已经变化了。
* 解决方法:
* 刷新页面。
*/
//config函数执行通过,会自动执行ready函数
wx.ready(() => {
//分享给朋友(即将废弃)
wx.onMenuShareAppMessage({
title: title, //分享标题
desc: desc, //分享描述(简介)
link: shareUrl? shareUrl: link, //分享链接
imgUrl: imgUrl, //分享图标
type: '', //分享类型,music、video或link,不填默认为link
dataUrl: '', //如果type是music或video,则要提供数据链接,默认为空
success: () => {
//分享成功
},
cancel: () => {
//取消分享
}
});
//分享到朋友圈(即将废弃)
wx.onMenuShareTimeline({
title: title, //分享标题
link: shareUrl? shareUrl: link, //分享链接
imgUrl: imgUrl, //分享图标
success: () => {
//分享成功
},
cancel: () => {
//取消分享
}
});
//分享到QQ(即将废弃)
wx.onMenuShareQQ({
title: title, //分享标题
desc: desc, //分享描述(简介)
link: shareUrl? shareUrl: link, //分享链接
imgUrl: imgUrl, //分享图标
success: () => {
//分享成功
},
cancel: () => {
//取消分享
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: title, //分享标题
desc: desc, //分享描述(简介)
link: shareUrl? shareUrl: link, //分享链接
imgUrl: imgUrl, //分享图标
success: () => {
//分享成功
},
cancel: () => {
//取消分享
}
});
//分享到腾讯微博
wx.onMenuShareWeibo({
title: title, //分享标题
desc: desc, //分享描述(简介)
link: shareUrl? shareUrl: link, //分享链接
imgUrl: imgUrl, //分享图标
success: () => {
//分享成功
},
cancel: () => {
//取消分享
}
});
//config信息验证失败会执行error函数
wx.error((res) => {
console.log('WeChat share error');
console.log(res);
});
});
},
getAddress() {
//获取地理位置,主要是经纬度
//需要在jsApiList添加getLocation
return new Promise((resolve, reject) => {
wx.getLocation({
type: ‘wgs84’,
success: (res) => {
resolve(res);
}
});
});
},
openMap(data) {
//打开地图
//需要在jsApiList添加openLocation
wx.openLocation({
latitude: parseFloat(data.latitude), //纬度,必须是数字,不是字符串
longitude: parseFloat(data.longitude), //经度,必须是数字,不是字符串
name: data.name? data.name: ‘’, //位置名(地点)
address: data.address? data.address: ‘’, //地址详情说明
scale: data.scale? data.scale: 16, //地图缩放级别,整形值,范围从1~28。默认为28
infoUrl: data.infoUrl? data.infoUrl: ‘’ //在查看位置界面底部显示的超链接,可点击跳转
});
}
}