写在前面:

刚做了一个微信端的网页,用到了微信分享,在网上看了好多的资料,发现好多文档都写得云里雾里,让人看的头疼。通过对很多大佬文章的综合整理,才完成了微信分享的部分。所以我想着自己写一篇文章,能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK,能够按照我写的步骤简单粗暴的实现
备注:本人还是个菜鸟,刚刚接触vue 文章中有错误或者大家对我有建议,随意的提出来,我好改正,谢谢大家!

1.安装sdk

  npm install weixin-js-sdk --save

2. 在main.js入口文件中引入微信sdk

  import wx from 'weixin-js-sdk'

3.在main.js的生命周期函数(created()或mounted())中引入微信sdk配置代码那就是全局的,也可以在你想要分享的.vue组件中引入微信sdk配置代码这样微信分享只在这个组件有效

4.通过config接口注入权限验证配置(一般后台会提供接口,获取接口后对应上就好,这个权限验证也可以放到一个公用js中这样不同的组件都可以复用这个配置)

  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
  });

5.通过ready接口处理成功验证(如果每个组件要应用不同的分享内容那么这个ready接口就在不同组件的生命周期函数中配置就好)

  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)最新接口
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
  // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)最新接口     
    wx.updateTimelineShareData({ 
        title: '', // 分享标题
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
  });

本人也是VUE的菜鸟,谢谢大家查看和使用本文档,如果文档中有什么问题,希望大家能指正出来,我好及时修正,谢谢你

Logo

前往低代码交流专区

更多推荐