第一次写uniapp H5公众号自定义分享。本以为这个是挺简单的,写了几下子很快就能分享出去了,但是高兴没有多久呀,发现苹果系统竟然要手动刷新一次,才能正常分享。为了搞定这个,通宵了一晚上也没有得出个所以然。踩这个坑最主要的还是不够了解uniapp对Android系统和ios系统的机制的路径是不一样的。然后我还以为这个坑跟之前写uni-appH5微信支付iOS系统出现当前页面url未注册问题是一个问题。事实证明这样解决不生效。后来试了各种debug调试这种方法,还以为是执行先后的问题,又往这个方向整,还是不得。还是休息一下吧,毕竟通宵了一晚上,一觉睡到晚上。思路就来了,想来想去还是url的问题
原理:单页应用,ios系统获取签名的url是首次进入页面的地址,安卓系统获取的是当前页面的url地址
*废话说的有点多就想吐槽一下,上代码,我是这样实现的,前提是一个要确保什么签名是对的呀,不然无法分享。
注意这是hash模式下的哈
onLoad() {
let url = 'https://wwww.com/#/pages/share/code'
let ref = uni.getStorageSync('code');
//判断是不是ios系统,是的话截取#前面的路径
let os = ""
uni.getSystemInfo({
success: function(res) {
os = res.system;
}
});
var link = "";
if (os.indexOf("IOS") == -1) {
link = url.split("#")[0]
}else{
link = url
}
//自定义分享链接的拼接
let qiao = 'https://wwww.com/#/pages/brige/brige'
var brige = qiao + "?ref=" + ref
console.log('分享brige', brige)
this.http('/api/jssdk/get', 'post', {
link: link
}).then(res => {
if (res.data.code === 1) {
console.log('分享1111', res.data.data)
var result = res.data.data;
var wxshare = require('jweixin-module');
wxshare.config({
debug: false, //是否打开调试
appId: result.appId, // 公众号的唯一标识
timestamp: result.timestamp, // 生成签名的时间戳
nonceStr: result.nonceStr, // ,生成签名的随机串
signature: result.signature, // 签名
jsApiList: [
"onMenuShareAppMessage",
"onMenuShareTimeline",
]
});
wxshare.ready(function() {
//分享给朋友
wxshare.onMenuShareAppMessage({
title: "标题",// 分享标题
desc: "怎么怎么那么好看", // 分享描述
link: brige, // 当前页面链接
imgUrl: "https://www.com/index/img/imglogo.png", // 分享图标
success: function() { //分享成功回调
},
cancel: function() { //取消分享回调
}
});
//分享到朋友圈
wxshare.onMenuShareTimeline({
title: "标题",// 分享标题
desc: "怎么怎么那么好看", // 分享描述
link: brige, // 当前页面链接
imgUrl: "https://ww.com/index/img/imglogo.png", // 分享图标
success: function() {
},
cancel: function() {
}
});
})
}
});
},
*总结:通过用uniapp写的H5公众号,我们在一些功能上uniapp官方是不支持H5的,所以我们就得借助微信的jssdk的接口。一旦调用,就一定一定的特别注意ios和Android系统的机制特别是url这个方面的原理。就避坑。