ionic單頁面應用中微信分享的問題總結

首先說一下 ionic 是單頁面應用,也就是說整個項目就有一個index.html, 那么問題就就來了, 如果我們不同的頁面要分享給大家的是不同的鏈接和圖片,應該怎么去做呢? 這就是我們今天要總結的東西. 今天這個問題真是鬧得我心煩,有必要總結下來了.

學習重點：

1. 微信分享方法巧妙封裝

2. 監聽路由事件$rootScope.$on

3. 舉一反三

微信分享

關于微信分享，大家都是在熟悉不過了，無非就是調用微信的SDK，授權，給他分享索要的東西的ok。所以對于微信分享似乎沒有什么好說的，但是細心的伙伴有木有發現，微信的分享并不是每次分享都去調用分享的方法，數據存進去每次分享都是拿上次的數據。

就因為這個我們在ionic單頁面應用中倘若要實現每個頁面都分享不同的信息，豈不是每個controller里面都要調用一次分享了，不然分享的信息都不會是你想要的，因為在Angular中controller不會重新加載一遍的哦！所以即便我們寫了動態的數據，微信也壓根不會理你的。你抱怨也沒用，照我們老大的話就是：“你愛用不用嘍”屌的很嘞！

Ionic中微信分享

言歸正傳，說我們今天的重點，就是怎么在ionic中實現不同頁面分享不用的信息。

1、首先我創建一個名叫叫 share.js 的文件(PS：我們的需求就是聊天頁面分享的是用戶的頭像和下載頁，其他的都是公眾號本身)

//這里的a為了區分是不是聊天頁面，和分享不同很信息。很巧妙的一個用法var setShareData = function(a){
    //這里我們給一個默認值    var linkUrl = 'http://www.qinqimaifang.cn/qmspa/index.html';    var imgUrl = 'http://www.qinqimaifang.cn/qmspa/img/logo.png';    if(a>0){
        linkUrl = sessionStorage.getItem('linkUrl');
        imgUrl = sessionStorage.getItem('imgUrl');
    };
    wx.onMenuShareTimeline({
        title: '如果買房時有困惑，來“親戚買房”找他',
        link: linkUrl,
        imgUrl: imgUrl,
        success: function (res) {            // 用戶確認分享后執行的回調函數
        },
        cancel: function (res) {           
        }
    });    // 分享給朋友    wx.onMenuShareAppMessage({
        title: '如果買房時有困惑，來“親戚買房”找他',
        desc: '地產老總一對一解答買房疑惑',
        link: linkUrl,
        imgUrl: imgUrl,
        success: function () { 
           
        },
        cancel: function () { 
            
        }
    });
};

2， 監聽路由事件$rootScope.$on

這里也是我們今天解決問題的重點所在，因為我們用的是ui-rooter，所以我們要想知道用戶是不是在當前聊天頁面。

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
        console.log(toState.name);
        //這里判斷當前的是不是聊天頁面        if( 'tab.consultant_QA'.indexOf( toState.name)>=0 ){//            event.preventDefault();            //如果是就就傳遞參數1
            setShareData(1);
        }else{
            //反之就是其他信息了
            setShareData(0);
        }
    });

3. 調用

最后一步就是調用了，我們只需要在聊天的頁面調用我們在share.js中定義的方法

//聊天頁面controller
setShareData(1); //這里的傳值很重要，因為是要判斷你分享的是什么哦

//初始化頁面的controller
setShareData(1);

舉一反三

什么是舉一反三，聰明的小伙伴都知道，就是在這個問題上我們就可以學習到怎么監聽路由事件，之前我們知道angular加載一遍之后就不會重新的加載了，那時候第一想到的就是廣播事件，現在我們是不是可以利用監聽路由來巧妙的解決了呢？當然更多的問題都可以使用的。不僅僅限制微信分享的。今天分享就到這里了。祝大家學習愉快。

PS：代碼優化可能不好，也許有更好的方法，歡迎大家一起來討論哦！