uniapp引入Facebook插件安排后，聊天图标刷新页面正常显示，每次跳转到其他页面再跳转回到首页就不显示聊天图标

uniapp引入Facebook聊天插件刷新正常显示，每次切换页面再回到首页就不显示问题

Facebook官方教程

img

测试代码



<template>
    <view>

        <!--在底部加上代码-->
        <view id="fb-root"> </view>
        <view id="fb-customer-chat" class="fb-customerchat" :page_id="pageId" :attribution="attribution"></view>
        

    </view>
</template>



<script>
export default {
    data() {
        return {
            pageId: "101199972640448",
            attribution: "biz_inbox"
            }
    },
    onShow() {
        this.$nextTick(() => {
            console.log("fbparent");
            this.facebookInit()
        })
    },
    mounted() {
    
    },
    methods:{
        facebookInit() {
            console.log("Facebook");
            window.fbAsyncInit = function() {
                FB.init({
                    xfbml: true,
                    version: 'v14.0'
                });
            };

            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s);
                js.id = id;
                js.src = 'https://connect.facebook.net/zh_CN/sdk/xfbml.customerchat.js';
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

        },        
    }
        
}

项目上的代码， 首页代码

img

项目效果 出现了蓝色聊天图标

img

现在的问题是，首页打开可以显示图标，但是如果跳转到另外一个页面再添加跳转回来首页，图标不显示，刷新一下又会出来

*

注意，测试聊天插件一定要编译生成生产环境代码，然后本地用host用facebook.gzdzh.cn这域名运行才会有效果，一定要科学上网才可以哦，这个域名过了Facebook的白名单的，上面的pageId对应的这个域名

  • 补充：onshow每次都触发，详情页跳转回来首页onshow有触发，浏览器网络那里看到请求要发起了，就是图标不显示

查看下，切换页面时，触发初始化方法了没
若对你有帮助，可以关注一下我哦⊙∀⊙！
以后有什么问题可以私信给我

开启一下缓存

1.检查下图标是不是被隐藏了
2.图标层级关系

建议把图标直接替换成本地文件，然后再看看有问题没有。

1.因为你使用的onShow函数 每次进来都会重新执行
解决方法 :
1.onShow 换成 onload里面
2.动态引入 换成静态引入
3.加一把锁,加载了就不用重新加载

js.src = 'https://connect.facebook.net/zh_CN/sdk/xfbml.customerchat.js';
                fjs.parentNode.insertBefore(js, fjs);