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

我們提供的服務有：成都做網站、成都網站設計、成都外貿網站建設、微信公眾號開發、網站優化、網站認證、如皋ssl等。為近千家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的如皋網站制作公司

學習重點：

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：代碼優化可能不好，也許有更好的方法，歡迎大家一起來討論哦！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：ionic單頁面應用中微信分享的問題總結-創新互聯
URL分享：http://www.yijiale78.com/article8/disoip.html

成都網站建設公司_創新互聯，為您提供網站設計、自適應網站、域名注冊、企業網站制作、手機網站建設、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯