首先說一下 ionic 是單頁面應用,也就是說整個項目就有一個index.html, 那麼問題就就來了, 如果我們不同的頁面要分享給大家的是不同的鏈接和圖片,應該怎麼去做呢? 這就是我們今天要總結的東西. 今天這個問題真是鬧得我心煩,有必要總結下來了.
學習重點：
微信分享方法巧妙封裝
監聽路由事件$rootScope.$on
舉一反三
微信分享
關於微信分享，大家都是在熟悉不過了，無非就是調用微信的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：代碼優化可能不好，也許有更好的方法，歡迎大家一起來討論哦！