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


Posted in Javascript onMay 04, 2018

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

使用的技术

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项目全局配置微信分享思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
原生JS实现留言板功能
Feb 08 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 #Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 #Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
node实现的爬虫功能示例
May 04 #Javascript
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
JavaScript实现百度搜索框效果
Mar 26 #Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 #Javascript
You might like
CI框架Session.php源码分析
2014/11/03 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python实现ip代理池功能示例
2019/07/05 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Python中os模块功能与用法详解
2020/02/26 Python
Python基于locals返回作用域字典
2020/10/17 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
党员自我评价范文2015
2015/03/03 职场文书
民事调解书范文
2015/05/20 职场文书
圣诞晚会主持词
2015/07/01 职场文书
九年级化学教学反思
2016/02/22 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis