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

首先說一下 ionic 是單頁面應用,也就是說整個項目就有一個index.html, 那麼問題就就來了, 若是咱們不一樣的頁面要分享給你們的是不一樣的連接和圖片,應該怎麼去作呢? 這就是咱們今天要總結的東西. 今天這個問題真是鬧得我心煩,有必要總結下來了.

學習重點：

1. 微信分享方法巧妙封裝
2. 監聽路由事件$rootScope.$on
3. 觸類旁通

微信分享

關於微信分享，你們都是在熟悉不過了，無非就是調用微信的SDK，受權，給他分享索要的東西的ok。因此對於微信分享彷佛沒有什麼好說的，可是細心的夥伴有木有發現，微信的分享並非每次分享都去調用分享的方法，數據存進去每次分享都是拿上次的數據。

就由於這個咱們在ionic單頁面應用中假若要實現每一個頁面都分享不一樣的信息，豈不是每一個controller裏面都要調用一次分享了，否則分享的信息都不會是你想要的，由於在Angular中controller不會從新加載一遍的哦！因此即使咱們寫了動態的數據，微信也壓根不會理你的。你抱怨也沒用，照咱們老大的話就是：「你愛用不用嘍」屌的很嘞！

Ionic中微信分享

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

一、首先我建立一個名叫叫 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：代碼優化可能很差，也許有更好的方法，歡迎你們一塊兒來討論哦！