h5微信分享在ios上不显示标题 h5转发不能显示标题

需求：做一个H5宣传页面，可以像卡片一样在微信里面转发

遇到问题：

1、没有设置JS安全域名，会报：config：fail,invalid url domain（去公众号里配置）

2、jsApiList的长度为0，（初始化执行的太快，没拿到）

3、微信中点击链接无法显示图片、标题、描述等

4、更新后手机缓存问题（据同事说，在路径后面加一个随机参数就可以避免这个问题，我没改，我实在是被第三个问题搞呕了，不想改了）

第三个问题是我找了很久的bug，后面看到一个简书上的博主的文章，才找到解决办法：https://www.jianshu.com/p/c462d0103ead

不可以直接在微信内点击H5链接地址，必须是通过微信公众号下方链接点击，或者通过扫码进入，才能正常显示分享样式。

可以参考一下这个博主，我后面使用的是扫二维码打开

可怜我一直以为是自己的问题，还找了很久的bug，不说了，说多了都是泪~

写的不好的地方请见谅，这里单纯给自己做笔记了

参考代码：

<template>
    <view>
        <swiper :style="'height: '+ screenHeight +'px;'" class="swiper" :vertical="true" >
            <swiper-item>
                <image src="/static/img/01.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image src="/static/img/02.jpg"></image>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    import jweixin from "jweixin-module"
    export default {
        data() {
            return {
                screenHeight:0,
            }
        },
        created() {
            this.screenHeight = uni.getSystemInfo().screenHeight ? uni.getSystemInfo().screenHeight : 800
        },
        onLoad() {
            this.wxShare()
        },
        methods: {
            wxReady() {
                jweixin.ready(function() {
                    
                    jweixin.onMenuShareAppMessage({
                        title: '', // 分享标题  
                        desc: '', // 分享描述  
                        link: ``, // 分享链接  
                        imgUrl: '', // 分享图标
                        success: res => {
                            // 用户确认分享后执行的回调函数
                            console.log(res)
                            console.log('分享成功')
                        },  
                        cancel: res => {
                            // 用户取消分享后执行的回调函数
                            console.log(res)
                            console.log('bbbbbbb')
                        },
                        fail: res => {
                            console.log(res)
                            console.log('cccccc')
                        }
                    });
                    jweixin.onMenuShareTimeline({
                        title: '', // 分享标题
                        link: ``, // 分享链接  
                        imgUrl: '', // 分享图标
                        success: res => {
                            // 用户确认分享后执行的回调函数
                            console.log(res)
                            console.log('分享成功')
                        },  
                        cancel: res => {
                            // 用户取消分享后执行的回调函数
                            console.log(res)
                            console.log('bbbbbbb')
                        },
                        fail: res => {
                            console.log(res)
                            console.log('cccccc')
                        }
                    });
                    jweixin.onMenuShareTimeline({
                        title: '', // 分享标题
                        link: ``, // 分享链接  
                        imgUrl: '', // 分享图标
                        success: res => {
                            // 用户确认分享后执行的回调函数
                            console.log(res)
                            console.log('分享成功')
                        },  
                        cancel: res => {
                            // 用户取消分享后执行的回调函数
                            console.log(res)
                            console.log('bbbbbbb')
                        },
                        fail: res => {
                            console.log(res)
                            console.log('cccccc')
                        }
                    });
                    jweixin.onMenuShareAppMessage({
                        title: '', // 分享标题
                        desc: '', // 分享描述   
                        link: ``, // 分享链接  
                        imgUrl: '', // 分享图标
                        success: res => {
                            // 用户确认分享后执行的回调函数
                            console.log(res)
                            console.log('分享成功')
                        },  
                        cancel: res => {
                            // 用户取消分享后执行的回调函数
                            console.log(res)
                            console.log('bbbbbbb')
                        },
                        fail: res => {
                            console.log(res)
                            console.log('cccccc')
                        }
                    });
                });
            },
            wxShare() {
                let that = this
                const Api_url='https:xxxx'
                var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题，前台用的js编码，后台解码
                uni.request({
                    url: Api_url + '接口',
                    method: 'POST',
                    header: {
                        'token': '',
                        'usertype': 1,
                        'content-type': 'application/x-www-form-urlencoded'  //post一定要带这个header，被这里坑了半天
                    },  
                    data: {
                        url: surl
                    },  
                    success: res => {
                        jweixin.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
                            appId: res.data.data.appId, // 必填，公众号的唯一标识  
                            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳  
                            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串  
                            signature: res.data.data.signature, // 必填，签名，见附录1  
                            surl: res.data.data.url, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
                            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','updateTimelineShareData','updateAppMessageShareData']
                        });
                        that.wxReady()
                    },
                    fail: error => {
                        console.log('request fail', error);
                    },  
                    complete: () => {}
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    
</style>