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

网友投稿 286 2023-02-06


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 || '图标地址(必http://须是有效的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

需要注意的坑点

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

2.根据微信官方说明:

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

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

总结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:电脑远程连接共享文件夹(电脑远程连接共享文件夹命令)
下一篇:spring boot2.0实现优雅停机的方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~