vue项目使用微信jssdk做分享

调用微信JSSDK做分享

闲话

​ 公司有个需求要做微信分享，上头发话，就做呗。但是为了以后能方便点，就封装了一下，有需要的道友且拿去（我是菜鸡，如果有大佬觉得有问题，欢迎指点）。

安装

​ 官方将js-sdk发布到npm，支持CommonJS，所以我们使用的webpack可以直接使用；npm点这里

npm install wexin-js-sdk --save

注意；这里我项目使用的vue-cli4搭建的项目，在安装js-sdk之后，项目就报错运行不起来了，错误原因是vue-loader加载不到热重载服务器。emmm，反复两次还是同样的问题，后来把项目的vue服务关了，在安装依赖，再重新启动项目就可以了。这里就提一句吧。

WxShare类实现

​ 我这里为了方便，写了一个分享类，以后使用的时候直接调用即可（这怎么是偷懒呢）。

import api from '@/api';  //  封装的axios请求方法
import wx from 'weixin-js-sdk';	// 使用js-sdk

export class WxShare {

  signMap = new Map();  // 存储地址url认证信息sign

  authApi = '/weixinShare/getSignature';  // 获取签名接口

  // 分享默认参数
  defaultShareConfig = {
    title: '教案大赛',
    desc: '分享教案描述信息',
    link: location.href,
    imgUrl: 'logo',
    jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareWeibo', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ' ], // 分享给朋友分享到QQ  分享到朋友圈 分享到腾讯微博
  }

  // 分享参数
  wxShareConfig = {}

  // 测试方法
  log(val) {
    console.log('this is share', val)
    console.log('defaultShareConfig', this.defaultShareConfig)
  }

  /**
   * 
   * @param {Object} config 分页配置信息，包括title，desc，等等；
   */
  yioksShare( config = {}) {
    this.wxShareConfig.title = config.title || this.defaultShareConfig.title;
    this.wxShareConfig.desc = config.desc || this.defaultShareConfig.desc;
    this.wxShareConfig.link = config.link || this.defaultShareConfig.link;
    this.wxShareConfig.imgUrl = config.imgUrl || this.defaultShareConfig.imgUrl;
    this.wxShareConfig.jsApiList = config.jsApiList || this.defaultShareConfig;

    const signMsg = this.signMap.has(this.wxShareConfig.link)
    if(signMsg) {
      // 注入签名信息， 并调用分享
      console.log('调用分享')
      this.injectAndShare(signMsg)
    } else {
      // 当前分享链接不存在签名 = 更新签名信息
      // 获取签名信息
      console.log('调用获取签名接口')
      this.getShareAuth(this.wxShareConfig.link)
    }
  }


  /**
   * 
   * @param {Object} signMsg 接口签名信息
   * @desc jssdk签名权限注入，并添加分享事件监听器
   */
  injectAndShare(signMsg) {

    const that = this;

    signMsg.timestamp = signMsg.timestamp.toString();
    // 访问页面和获取页面必须保持一致
    // console.log('url 比对结果',  location.href.split('#')[0] === signMsg.url )
    wx.config({
      debug: false,  // 开发期间启用
      appId: signMsg.appId,
      timestamp: signMsg.timestamp,   // 注意！时间戳这里应该是10位字符串
      nonceStr: signMsg.noncestr,     // 注意驼峰命名
      signature: signMsg.signature,
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareWeibo', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ' ],
    })

    wx.ready(function() {
      const { title,desc,link,imgUrl } = that.wxShareConfig;
      console.log('wx.ready', '######')

      // wx.checkJsApi({
      //   jsApiList:  ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareWeibo', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ' ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      //   success: function(res) {
      //   // 可用的api值true，不可用为false
      //   // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      //     console.log('#####checkJsApi#####', res)
      //   }
      // });

      wx.updateAppMessageShareData({
        title,desc,link,imgUrl,
        success: function() {
          console.log('分享成功！')
        },
        cancel: function() {
          console.log('分享取消！')
        },
        fail: function() {
          console.log('分享失败！')
        }
      })

       wx.updateTimelineShareData({
        title,desc,link,imgUrl,
        success: function() {
          console.log('分享成功！')
        },
        cancel: function() {
          console.log('分享取消！')
        },
        fail: function() {
          console.log('分享失败！')
        }
      })

      
       wx.onMenuShareWeibo({
        title,desc,link,imgUrl,
        success: function() {
          console.log('分享成功！')
        },
        cancel: function() {
          console.log('分享取消！')
        },
        fail: function() {
          console.log('分享失败！')
        }
      })

      // 即将废弃（为兼容安卓最好加上）
      wx.onMenuShareTimeline({
        title,desc,link,imgUrl,
        success: function() {
          console.log('分享成功！')
        },
        cancel: function() {
          console.log('分享取消！')
        },
        fail: function() {
          console.log('分享失败！')
        }
      })

      // 即将废弃（为兼容安卓最好加上）
      wx.onMenuShareAppMessage({
        title,desc,link,imgUrl,
        success: function() {
          console.log('分享成功！')
        },
        cancel: function() {
          console.log('分享取消！')
        },
        fail: function() {
          console.log('分享失败！')
        }
      })

      // 即将废弃（为兼容安卓最好加上）
      wx.onMenuShareQQ({
        title,desc,link,imgUrl,
        success: function() {
          console.log('分享成功！')
        },
        cancel: function() {
          console.log('分享取消！')
        },
        fail: function() {
          console.log('分享失败！')
        }
      })

    })

    wx.error(function(res) {
      console.log('wx error:', res)
    })

  }

  /**
   * 
   * @param {url} shareUrl 
   * @description 从服务器获取分享页面签名信息
   */
  getShareAuth(shareUrl) {
    console.log('待获取权限的地址', shareUrl)
    api({
      url: this.authApi,
      method: 'POST',
      params: {
        requestUrl: shareUrl
      }
    }).then(res => {
      // console.log('获取签名信息结果：', res)
      if(res.code) {
        console.error('res.msg', res.msg);
        return
      }
      this.signMap.set(shareUrl, res)  // 存储信息
      this.injectAndShare(res);  // 注入签名信息
    }).catch(err => {
      console.error('err', err)
    })
  }
}

​

​ 上面就是代码实现了，如果只是想粘个代码直接用的话，上面的代码尽可拿去。只是需要注意一点。

​ 我定义的getShareAuth方法，用来向本地服务器请求签名等信息，其中api只是我自己封装的axios请求方法，jsSDLAuthUrl是存放的是请求地址，改接口主要获取的是用来注入到wx.config的签名信息；主要包括appId, timestamp, noncestr, signature信息，还有其他信息，这里需要提一点的是最好让后端同学把参与生成signaure的url也一并返回，至于原因后面再说。

使用分享类

​ 以上分享的工作基本就完成了，接下来就是哪里使用写哪里了；

<script>
import { WxShare } from '@/assets/js/wxShare';

const wxShare = new WxShare();	// 注意，这里一定要先实例化才能使用

export default {
    
    data() { return { }},
    
    mounted() {
        wxShare.log('测试可用否？');	// 测试下，我们写的方法可用；
        this.pageShare();	//分享
    },
    
    methods: {
      
        // 分享方法
        pageShare() {
            const CURRENT_URL_HISTORY = location.href;	//注意我的项目使用的history；
            const CURRENT_URL_HASH = location.href.split('#')[0];	// hash模式使用这个
            
            const SHARE_CONFIG = {
                title: '分享标题',
                desc: '分享描述信息',
                link: CURRENT_URL_HISTORY,	// 要分享的页面地址不允许存在#参数
                imgUrl: '',	// 分享出去链接图片
            };
            wxShare.yioksShare(SHARE_CONFIG);	// 调用分享
        },
    },
}
</script>

再啰嗦几句

​ 下面我就啰嗦几句，主要是作为一个萌新也能理解萌新的为难，对上面代码解释几句，没时间看到话，到此为止也是可以的。

​ 因为我只是要做 一个分享页面，所以就只是在局部调用，如果需要分享多个页面，建议将Wxshare方法定义到main.js文件中，直接挂在到vue原型上，这样方便全局使用。

遇到的几个问题

​ 开发期间遇到一个问题：config:invalid signature 错误码：63002;

1. 首先让后端同学检查下acces_token有没有问题；在这里检查
2. 然后检查下signature有没有问题；在这里检查
3. 上面生成的signature中要注意，时间戳是10位秒（部分童鞋直接用毫秒，且记）参数都是小写；
4. 生成签名的参数是小写，注入到wx.config中 nonceStr 是驼峰，且是字符串格式；
5. 还记得上文说要后端把参与的url要返回吗，因为访问的页面一定要和生成签名的url保持一致(代码中有比对的代码，可以查看)；
6. js域配置，这里要注意，不要配置端口号，不要填写如协议，配置的只是域名。（端口号微信官方有要求固定端口号）；

其他的问题都比较好发现了，公众号的状态是否正常，access_token过期？超出限额？

建议pc端开发测试的时候直接使用微信开发工具，很多信息都可以很直观的看到。

以上， [外链图片转存中…(img-I3Q3pWDR-1626232147132)]