不同系统下微信 onMenuShareTimeline 调用

问题

一个商城项目，在首页和商品详情页有着不同的分享文案。测试的时候发现安卓系统下商品详情页的分享内容是首页的文案，但是 iOS 系统和微信开发者工具都是正常的…于是开始了排查之路。

首先来看下简化版的代码结构。

// 通用设置 - 全局设定分享信息window.globalShareDataWx = {    title: 'test'}alert('全局环境');wx.ready(function(){    alert('ready环境');    wx.onMenuShareTimeline({        title: window.globalShareDataWx.title    })})// 商品详情页 - 商品详情页异步获取商品信息后$.ajax({    success: function(data) {        alert('异步环境');        wx.onMenuShareTimeline({            title: data.title        })    }})

排查

因为分享出了问题，于是从分享函数开始排查，给分享函数中的 success 增加 alert 弹窗，结果发现安卓分享完后执行的是首页的分享函数。。这就不应该了，此时先注释掉全局分享函数，发现分享正常，难道安卓 wx.onMenuShareTimeline 只能设定一次？网上搜索并没有发现有这种说法….继续排查。

后来在两个分享函数附近的地方都增加弹窗了，然后发现了两个系统不一致的地方。重点！！！

// 安卓下弹出信息顺序
全局环境 => 异步环境 => ready环境

// iOS 下弹出信息顺序
全局环境 => ready环境 => 异步环境

结论

因为默认分享函数写在了全局通用方法中（埋下了大坑！），所以即使进入商品页后，这个函数还是存在的！！

此时执行顺序的不同，因此此时在 iOS 环境是可以正常分享商品详情的，但是在安卓环境下，因为分享函数会被 ready 环境中覆盖，导致无法实现预期情况！

于是对异步环境进行下面的补充

// 商品详情页异步获取商品信息后$.ajax({    success: function(data) {        window.globalShareDataWx = { // 这里重新设置分享信息，安卓分享的时候调用这里的内容            title: data.title        }        alert('异步环境');        wx.onMenuShareTimeline({            title: data.title        })    }})

此时可以解决安卓下分享问题。

反思

1. 不应该偷懒把分享函数放到通用函数中，应该更进一步的拆分，按需引用，这样才不会导致冲突。要努力去学习 Webpack/ES6，模块化很大程度可以解决这种问题。
2. 异步函数，不要想当然的按照自己以为的顺序执行，这次就是犯了这个错。