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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
jquery 插件学习(六)
2012/08/06 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
js闭包实例汇总
2014/11/09 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python实现挑选出来100以内的质数
2015/03/24 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
省三好学生申请材料
2014/01/22 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
开业典礼致辞
2015/07/29 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
信息技术课教学反思
2016/02/23 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
pandas中对文本类型数据的处理小结
2021/11/01 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技