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);