首先说一下 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：代码优化可能不好，也许有更好的方法，欢迎大家一起来讨论哦！