奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

Vue项目微信分享实践,通过路由钩子函数

时间:2018-05-04 18:14来源: 作者:小邱
这个项目为移动端项目,主要用于接入公众号服务。项目采用两种登录方式,微信授权登录以及账号密码登录。

写在前面

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

使用的技术

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

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-05-04 18:05

关注奔三路小程序,方便你我他