欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue项目全局配置微信分享思路详解

程序员文章站 2022-04-21 08:33:24
这个项目为移动端项目,主要用于接入公众号服务。项目采用两种登录方式,微信授权登录以及账号密码登录。对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的...

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

使用的技术

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重新获取微信签名了。

总结

以上所述是小编给大家介绍的vue项目全局配置微信分享思路详解,希望对大家有所帮助