vue项目全局配置微信分享_[转]Vue项目全局配置微信分享思路详解

使用的技术

1.使用vue作为框架

2.使用vux作为UI组件库

全局配置微信分享思路

1.区分一般和特殊，一般情况，全局配置默认分享文案；特殊情况分两种，一种是分享内容不需要异步获取，则在路由跳转时配置，另一种是分享内容需要异步获取，则需要待异步内容获取后更新分享内容。

2.不需要异步获取的内容我们采用定义在路由元信息的方式，直接在每次路由跳转之后调用公共函数更新分享内容。

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

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

需要异步获取的分享内容

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

需要注意的坑点

1.如果项目采用非history模式，则需要去掉url上#后的部分传给后端换取微信签名。

2.根据微信官方说明：

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

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

总结

以上所述是小编给大家介绍的Vue项目全局配置微信分享思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

【备注】转载作者 ：FrankCheung