写在前面

这个项目为移动端项目，主要用于接入公众号服务。项目采用两种登录方式，微信授权登录以及账号密码登录。对于移动端项目而言，为了便于项目扩展以及提供开发热更新速度，项目分为不同的模块，每个模块是一个单页面应用。页面分为两种，一种是需要用户登录之后才能浏览，另一种是用户无需登录即可浏览。无论哪一种，均配置微信分享。

使用的技术

使用vue作为框架
使用vux作为UI组件库

全局配置微信分享思路

区分一般和特殊，一般情况，全局配置默认分享文案；特殊情况分两种，一种是分享内容不需要异步获取，则在路由跳转时配置，另一种是分享内容需要异步获取，则需要待异步内容获取后更新分享内容。
不需要异步获取的内容我们采用定义在路由元信息的方式，直接在每次路由跳转之后调用公共函数更新分享内容。

具体可以查看微信JSSDK的使用说明

// wxShare.jsimport Vuefrom'vue'// 在组件外使用vux集成的微信jssdkimport { WechatPlugin, AjaxPlugin }from'vux'

Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)exportdefaultfunctionwxShare ({title, desc, timelineTitle, link, imgUrl} = {}){
    Vue.wechat.config({debug:false,appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
    })
    Vue.wechat.ready(() => {
      Vue.wechat.onMenuShareAppMessage({title: title,// 分享标题
        desc: desc ||'默认分享文案',// 分享描述
        link: link ||window.location.href,// 分享链接
        imgUrl: imgUrl ||'图标地址（必须是有效的Link）'// 分享图标
      })
      Vue.wechat.onMenuShareTimeline({title: timelineTitle || desc ||'默认分享文案',// 分享标题，由于分享到朋友圈没有desc，所以这里采用的策略是，指定的朋友圈分享标题优先，其次采用发送给朋友的描述，最后采用默认文案。
        link: link ||window.location.href,// 分享链接
        imgUrl: imgUrl ||'图标地址（必须是有效的Link）'// 分享图标
      })
    })
    Vue.wechat.error((res) => {
    })
}// 为Vue的原型对象添加该方法，则所有vue实例都能继承该方法
Vue.prototype.$wxShare = wxShare复制代码

// router/index.js  每个模块都有自己内部的路由配置// codes...const routes = [
    {path:'/index',name:'index',redirect:'/index/homepage',children: [
          {path:'/index/homepage',name:'homepage',component: homepage
            meta: {title:'这是主页',shareDesc:'这是本站的主页',desc:'homepage, click and see!',timelineTitle:'这是首页，欢迎点击关注，blablablablabla~~~',imgUrl:'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png'
            }
          },
        ]
      }
]复制代码

// routerRule，公共路由配置，所有模块共用一个路由控制策略import wxSharefrom'@/utils/wxShare'exportdefaultfunctionrouterRule (router){// other codes...

    router.afterEach(( to,from) => {
        wxShare({title: to.meta.title,desc: to.meta.shareDesc,link: to.meta.shareLink,logo: to.meta.shareLogo})
      })
  
}复制代码

// main.jsimport routerRulefrom ...

routerRule(router)复制代码

经过上面的配置，router.afterEach都会调用一次wxShare，重新读取router中的meta的信息重新定义微信分享内容，达到全局配置和特殊配置结合的目的。

需要异步获取的分享内容

这种情况，我们采取在vue实例的created钩子中，在获取数据的成功回调中调用一次wxShare即可


// homepage.vue

<script>

export default {
    data() {
        return {
            
        }
    },
    created() {
        getHomepageInfo()
            .then( res => {
                this.$wxShare({
                    title: res.title,
                    desc: res.desc,
                    imgUrl: res.logo
                })
            } )
    }
}


</script>复制代码

需要注意的坑点

如果项目采用非history模式，则需要去掉url上#后的部分传给后端换取微信签名。
根据微信官方说明：

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用...

由于SPA应用，url变化之后，需要重新config一次，重新注入当前页面的配置信息，因此这个步骤必须在router.afterEach中调用！因为根据vue-router的说明，在导航被确认之后，再调用全局的afterEach钩子，这个时候导航已经确认了，url已经改变，可以针对更新后的url重新获取微信签名了。

谨以此记录自己踩坑过程，多有不足，望各位看官指正！