https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

请先查阅官方的说明文档，本教程主要是帮助你如何获取当前页面的签名数据，签名正确有方可调用文档中的各种js方法：

image.png

签名正确后，将会回调 wx.ready 方法，反之会调用 wx.error 方法，开发阶段，建议设置 debug: true ，将会输出丰富的调试信息。

签名接口

详见前端接口文档中的：“微信公众号js-sdk获取sign签名” 接口：

image.png

示例代码

下面将举例 vue 开发模式下的使用方法：

vue调用分享

  1. npm install weixin-js-sdk --save

安装好插件以后，创建一个公共js文件，方便后续调用：

wxShare.js

  1. /* eslint-disable */
  2. import Vue from 'vue';
  3. import wx from 'weixin-js-sdk';
  5. //存储各个链接的签名信息
  6. const signMap = new Map(); 
  7. // 设置默认的分享信息，因为如分享图、请求授权项、隐藏授权项等基本不变，此处设置直接引用，避免使用时繁琐设置
  8. const defaultWxShareConfig = { 
  9.     title: "分享标题（通常是动态的）", 
  10.     desc: '分享描述（通常是动态的）',
  11.     link: window.location.href,
  12.     imgUrl: '分享图片地址',
  13.     jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'closeWindow'],
  14.     hideMenuList: ['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode','menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand']
  15. } 
  16. //存储临时的分享信息
  17. const wxShareConfig = {
  19. }
  21. const wxShare = {
  22.     //各个页面加载后，调用此方法，传入的参数config是对象，其属性参考defaultWxShareConfig
  23.     updateWxShareConfig(config = {}) {
  24.         wxShareConfig.title = config.title || defaultWxShareConfig.title;
  25.         wxShareConfig.desc = config.desc || defaultWxShareConfig.desc;
  26.         wxShareConfig.link = config.link || defaultWxShareConfig.link;
  27.         wxShareConfig.imgUrl = config.imgUrl || defaultWxShareConfig.imgUrl;
  28.         wxShareConfig.jsApiList = config.jsApiList || defaultWxShareConfig.jsApiList;
  29.         wxShareConfig.hideMenuList = config.hideMenuList || defaultWxShareConfig.hideMenuList;
  31.         var authUrl = window.location.href
  32.         const ua = navigator.userAgent
  33.         const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
  34.         const isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  35.         if (isiOS) {
  36.             authUrl = 'ios系统，授权地址必须使用第一次打开时候的地址，中途换的地址不识别'
  37.         }
  38.         //判断是否已经签名了
  39.         if (signMap.has(authUrl)) {
  40.             this._wxConfigJSSDK(signMap.get(authUrl), wxShareConfig);
  41.         } else {
  42.             this.wxShareAuth(authUrl);
  43.         }
  45.     },
  47.     //从服务器获取某分享链接的签名信息，并存储起来
  48.     async wxShareAuth(authUrl) {
  49.         //此处我使用的是自己封装的网络请求方法
  50.         var postData = {
  51.             url: authUrl
  52.         }
  53.         const res = await requestApi('/gooking/wx/jssdk/sign', 'post', postData)
  54.         if (res.code == 0) {
  55.             //分享链接授权签名信息
  56.             const sign = res.data;
  57.             signMap.set(authUrl, sign);
  58.             this._wxConfigJSSDK(sign);
  59.         }
  60.     },
  62.     //将签名信息更新到微信的SDK中
  63.     _wxConfigJSSDK(shareSign) {
  64.         wx.config({
  65.             debug: false,
  66.             appId: shareSign.appid,
  67.             timestamp: shareSign.timestamp,
  68.             nonceStr: shareSign.noncestr,
  69.             signature: shareSign.sign,
  70.             jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
  71.         })
  72.         // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  73.         wx.ready(function() {
  74.             const {title,desc,link,imgUrl} = wxShareConfig;
  75.             wx.onMenuShareAppMessage({
  76.                 title,
  77.                 desc,
  78.                 link,
  79.                 imgUrl,
  80.                 success: function() {
  81.                     console.log("分享成功");
  82.                 },
  83.                 fail: function() {
  84.                     console.log("分享失败");
  85.                 },
  86.                 cancel: function() {
  87.                     console.log("取消分享");
  88.                 }
  89.             })
  90.             wx.onMenuShareTimeline({
  91.                 title,
  92.                 link,
  93.                 imgUrl,
  94.                 success: function() {
  95.                     console.log("分享成功");
  96.                 },
  97.                 cancel: function() {
  98.                     console.log("取消分享");
  99.                 }
  100.             })
  102.         });
  104.         // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。    
  105.         wx.error(function(res) {
  106.             console.log("分享失败: error", res);
  107.         });
  109.     }
  110. }
  111. //导出工具类
  112. export default wxShare;
  113. //将工具类添加到Vue静态方法方便调用
  114. Vue.prototype.$wxShare = wxShare;

上述代码中，调用接口的代码，根据你自己的实际情况调用

main.js 中全局引入：

  1. import './utils/wxShare'

需要分享的页面，直接调用:

  1. this.$wxShare.updateWxShareConfig({
  2.     title: '分享标题',
  3.     desc: '分享介绍',
  4.     imgUrl: '分享图片地址',
  5.     link:  '链接地址'
  6. })