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：代码优化可能很差，也许有更好的方法，欢迎你们一块儿来讨论哦！