1. 程式人生 > >微信分享時,標題、內容、圖標不顯示問題(時序問題)

微信分享時,標題、內容、圖標不顯示問題(時序問題)

origin nstat 顯示 圖標 ins 接口回調 打印 內容 window

今天在處理微信分享時,標題,內容、圖標不顯示問題,最後發現是時序問題。

只說思路,不上代碼,

我是在主頁,和詳情頁獲取的分享的參數(是一個對象,裏面含有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,然後老同事說的是,我看到的打印結果不一定是當時的實際值,因為打印也是需要用時間的,雖然是以毫秒計,但是接口的返回以及微信初始化也是按毫秒計的,所以有時候不能相信打印出來的結果。。。

微信分享時,標題、內容、圖標不顯示問題(時序問題)