微信分享时，标题、内容、图标不显示问题（时序问题）

今天在处理微信分享时，标题，内容、图标不显示问题，最后发现是时序问题。

只说思路，不上代码，

我是在主页，和详情页获取的分享的参数（是一个对象，里面含有title、shareUrl、content、iconUrl属性），

在主页和详情页这些父组件拿到分享参数后，传给他们共用的子组件footer，然后在footer组件内调用的微信分享方法；

首先，微信分享依托于微信环境，另外要想分享出正常的分享画面，需要等到分享参数里的属性全部拿到值（为什么这样说，因为有些分享参数的属性值是在后台接口的回调里面拿到的）；

但是，我们不敢保证或者是没法确定父组件里的异步接口和微信初始化哪个先进行完，我们必须保证这两个异步事件都进行完，才能分享出正常的分享画面，（之前就是微信初始化快与父组件的异步接口，而微信分享方法是在微信初始化回调里面调用的，所以分享出来的页面里面不含内容、图标、标题）；那么怎样去处理这个问题呢？

大致思路是：保证微信初始化完成并且父组件的异步接口完成，再调用微信分享方法，所以得将微信分享方法的调用从微信初始化回调里单独拿出来，封装一个方法，分别在微信初始化回调里调用，和父组件的接口回调方法里调用，当满足微信初始化完成以及父组件接口调用完成之后再调用微信分享方法，也就是，谁最后完成，那么谁就调用微信分享方法，若不满足任何一个条件，则分享参数为默认参数。

具体的做法是：1、先将微信分享方法拿出来封装一个方法

shareReady(shareParameters){
            var self=this;
            if(self.wxReadyState&&shareParameters&&shareParameters.title&&shareParameters.shareUrl&&shareParameters.iconUrl){//满足俩条件
                wxVue.share(shareParameters);
            }else{
                shareParameters={
                    title: "我哒 学生用品署名定制商城", // 分享标题
                    content: "每个宝宝都该拥有自己哒专属商城，这里买的所有东东都带着宝宝的名字哦", // 分享描述
                    shareUrl: window.location.href, // 分享链接
                    iconUrl: window.location.origin + "/wodaa_logo.png", // 分享图标
                }
                wxVue.share(shareParameters);
            }
        },

2、在添加一个微信初始化成功的状态，用于服务上面代码

wxReadyState:false,//微信初始化完成状态

3、在微信初始化回调里调用

    onWxReady(){
            var self = this;
            console.log('onWxReady 微信环境加载完成的回调');
            console.log('--'+self.pageUserInfo.loginState);
            if(self.pageUserInfo.loginState != 'logining'){
                //微信登陆
                self.wxLoginEvent('ready');
            }
            self.wxReadyState=true;
            self.shareReady(self.shareParameters);
        },

4、在父组件的接口回调里调用

self.$refs.footer.shareReady(self.shareObj);

另外，今天发现这个问题，主要是之前在父组件接口没完成时，先调用了微信分享方法，我console出来了分享的参数是含有属性的，但当我打印具体的属性值时却是undefined，然后老同事说的是，我看到的打印结果不一定是当时的实际值，因为打印也是需要用时间的，虽然是以毫秒计，但是接口的返回以及微信初始化也是按毫秒计的，所以有时候不能相信打印出来的结果。。。

微信分享时，标题、内容、图标不显示问题（时序问题）

猜你喜欢