ionic單頁面應(yīng)用中微信分享的問題總結(jié)-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、如皋ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的如皋網(wǎng)站制作公司

學(xué)習(xí)重點(diǎn)：

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

  2. 監(jiān)聽路由事件$rootScope.$on

  3. 舉一反三

ionic單頁面應(yīng)用中微信分享的問題總結(jié)

微信分享

關(guān)于微信分享，大家都是在熟悉不過了，無非就是調(diào)用微信的SDK，授權(quán)，給他分享索要的東西的ok。所以對(duì)于微信分享似乎沒有什么好說的，但是細(xì)心的伙伴有木有發(fā)現(xiàn)，微信的分享并不是每次分享都去調(diào)用分享的方法，數(shù)據(jù)存進(jìn)去每次分享都是拿上次的數(shù)據(jù)。

就因?yàn)檫@個(gè)我們?cè)趇onic單頁面應(yīng)用中倘若要實(shí)現(xiàn)每個(gè)頁面都分享不同的信息，豈不是每個(gè)controller里面都要調(diào)用一次分享了，不然分享的信息都不會(huì)是你想要的，因?yàn)樵贏ngular中controller不會(huì)重新加載一遍的哦！所以即便我們寫了動(dòng)態(tài)的數(shù)據(jù)，微信也壓根不會(huì)理你的。你抱怨也沒用，照我們老大的話就是：“你愛用不用嘍”屌的很嘞！

Ionic中微信分享

言歸正傳，說我們今天的重點(diǎn)，就是怎么在ionic中實(shí)現(xiàn)不同頁面分享不用的信息。

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

//這里的a為了區(qū)分是不是聊天頁面，和分享不同很信息。很巧妙的一個(gè)用法var setShareData = function(a){
    //這里我們給一個(gè)默認(rèn)值    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: '如果買房時(shí)有困惑，來“親戚買房”找他',
        link: linkUrl,
        imgUrl: imgUrl,
        success: function (res) {            // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
        },
        cancel: function (res) {           
        }
    });    // 分享給朋友    wx.onMenuShareAppMessage({
        title: '如果買房時(shí)有困惑，來“親戚買房”找他',
        desc: '地產(chǎn)老總一對(duì)一解答買房疑惑',
        link: linkUrl,
        imgUrl: imgUrl,
        success: function () { 
           
        },
        cancel: function () { 
            
        }
    });
};

2， 監(jiān)聽路由事件$rootScope.$on

這里也是我們今天解決問題的重點(diǎn)所在，因?yàn)槲覀冇玫氖莡i-rooter，所以我們要想知道用戶是不是在當(dāng)前聊天頁面。

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

3. 調(diào)用

最后一步就是調(diào)用了，我們只需要在聊天的頁面調(diào)用我們?cè)趕hare.js中定義的方法

//聊天頁面controller
setShareData(1); //這里的傳值很重要，因?yàn)槭且袛嗄惴窒淼氖鞘裁磁?
//初始化頁面的controller
setShareData(1);

舉一反三

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

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

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

文章題目：ionic單頁面應(yīng)用中微信分享的問題總結(jié)-創(chuàng)新互聯(lián)
URL分享：http://bm7419.com/article8/disoip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、域名注冊(cè)、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司