最新消息:欢迎大家来到小月博客

ionic单页面应用中微信分享的问题总结

web前端 小月 2580浏览 0评论

ionic单页面应用中微信分享的问题总结

 

首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东西. 今天这个问题真是闹得我心烦,有必要总结下来了.

学习重点:

  1. 微信分享方法巧妙封装
  2. 监听路由事件$rootScope.$on
  3. 举一反三

wxionic

微信分享

关于微信分享,大家都是在熟悉不过了,无非就是调用微信的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:代码优化可能不好,也许有更好的方法,欢迎大家一起来讨论哦!

 

 

 

转载请注明:小月博客 » ionic单页面应用中微信分享的问题总结

一点心意×
 收藏 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (9)

  1. 测试评论
    小月9个月前 (08-25)回复
  2. 风吹过,我来过!
    蒂欧娜9个月前 (08-25)回复
  3. 风吹过,我来过!
    蒂欧娜9个月前 (08-26)回复
  4. 随便看看,随便转转!
    米表9个月前 (08-27)回复
  5. 随便看看,随便转转!
    米表9个月前 (08-28)回复
  6. 感觉很不错的样子!
    尚爱思笑话9个月前 (08-29)回复
  7. 感觉很不错的样子!
    尚爱思笑话9个月前 (08-29)回复
  8. 好的内容让人过目难忘!
    逆向直销网赚9个月前 (08-31)回复
  9. 认真拜读中……
    广告任务网9个月前 (09-07)回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册