怎样实现Vue项目全局配置微信分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了怎样实现Vue项目全局配置微信分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3816字，纯文字阅读大概需要6分钟。

内容图文

这次给大家带来怎样实现Vue项目全局配置微信分享，实现Vue项目全局配置微信分享的注意事项有哪些，下面就是实战案例，一起来看一下。

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

使用的技术

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

全局配置微信分享思路

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

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

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

// wxShare.js
import Vue from 'vue'
// 在组件外使用vux集成的微信jssdk
import { WechatPlugin, AjaxPlugin } from 'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)
export default function wxShare ({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 wxShare from '@/utils/wxShare'
export default function routerRule (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.js
import routerRule from ...
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>

需要注意的坑点

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

2.根据微信官方说明：

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

优化vue项目步骤详解

怎样使用Node.js内Koa实现JWT用户认证

以上就是怎样实现Vue项目全局配置微信分享的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的怎样实现Vue项目全局配置微信分享全部内容，希望文章能够帮你解决怎样实现Vue项目全局配置微信分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---