【微信H5分享配置】解决IOS需刷新后才能分享成功

关注

原创 2024-11-04 09:45:01 1.4k 阅读 AI 写同款· GEO 优化 ›

踩坑之路——微信授权&微信分享踩坑之路——微信授权&微信分享一、微信授权 1.1H5微信授权流程判断是否有openid 如果没有话进行微信接口请求返回code 把code传给后台接口获取到openid 授权成功注意：返回地址必须是外网地址 1.2 绑定域名微信测试号域名要与回调地址一致否则报redirect_uri参数错误二、 H5微信分享 2.1引入JS文件通过npm安装微信的js-sdk，或者在index.html页面中直接加script标签来引用，这里采用npm安装， npm install wei 阅读详情

原因

最近在做公众号H5分享，出现了很无语的bug，安卓直接调用分享设置后分享成功，IOS死活不行，必须要刷新页面后才能设置分享配置成功。

现在微信必须是先进行updateAppMessageShareData配置后（onMenuShareAppMessage虽然是旧版的方法，但是全网都建议写上，我也不知道为什么），用户手动点击右上角三个点…，点击转发给朋友才能弹出转发弹窗，不可以代码调用分享。

解决办法如下（俺是vue2的写法，其他框架大差不差）

在页面初始化时判断机型，如果是首次进入且是IOS，需刷新页面后再调用配置

 created() {
        if (this.isIOS()) {
            let iosReload = sessionStorage.getItem('iosReload');
            if (iosReload) {
                // ...执行业务
                  this.getConfig();
            } else {
                // 如果是IOS,且是第一次刷新页面，则刷新当前页面
                sessionStorage.setItem('iosReload', true);
                window.location.reload();
            }
        } else {
                // ...执行业务
            this.getConfig();
        }
    },

请求后端，获取微信配置，设置分享

    methods: {
        isIOS() {
            return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        },
		getConfig() {
            const that = this
            try {
                that.loading = true;
                // 后端请求地址
                getWeiXinConfig({ url: location.href }).then((res) => {
                    if (res.success) {
                        wx.config({
                            debug: false,
                            appId: , // 必填，公众号的唯一标识
                            timestamp: , // 必填，生成签名的时间戳
                            nonceStr: , // 必填，生成签名的随机串
                            signature: , // 必填，签名
                            jsApiList: [
                                'checkJsApi',
                                'updateAppMessageShareData',
                                'updateTimelineShareData',
                                'onMenuShareAppMessage', // 旧的接口，即将废弃(网上说是要把旧接口也填上去，不然注册会失败)
                                'onMenuShareTimeline', // 旧的接口，即将废弃
                                'onMenuShareQQ', // 旧接口，分享给QQ好友
                                'onMenuShareQZone' // 旧接口，分享到QQ空间
                            ] // 必填，需要使用的JS接口列表
                        });
                        wx.ready(function () {
                            wx.updateAppMessageShareData({
                                title: '', // 分享标题
                                desc: '', // 分享描述
                                link: , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: , // 分享图标
                                success: function () {
                                    // 设置成功
                                    // alert('设置分享成功')
                                },
                                fail: function (e) {
                                   
                                }
                            })
                            wx.onMenuShareAppMessage({
                                title: '', // 分享标题
                                desc: ``, // 分享描述
                                link: ``, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: ``, // 分享图标
                                success: function () {
                                    // 设置成功
                                    // alert('分享成功')
                                },
                                fail: function (e) {
                                    // alert(JSON.stringify(e))
                                    // alert(e)
                                }
                            })
                            wx.error((err) => {
                                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
                                // console.log('验证失败', err)
                                // alert(JSON.stringify(err))
                            })
                        })
                    }
                }).finally(() => {
                    that.loading = false
                })
            } catch (e) {
                that.loading = false
                // commons.showMsg(e)
            }
        },
     }