第一次写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这个方面的原理。就避坑。