[https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)
请先查阅官方的说明文档，本教程主要是帮助你如何获取当前页面的签名数据，签名正确有方可调用文档中的各种js方法：
签名正确后，将会回调 wx.ready 方法，反之会调用 wx.error 方法，开发阶段，建议设置 debug: true ，将会输出丰富的调试信息。
# 签名接口
详见前端接口文档中的：“微信公众号js-sdk获取sign签名” 接口：
# 示例代码
下面将举例 vue 开发模式下的使用方法：
## vue调用分享
```javascript
npm install weixin-js-sdk --save
```
安装好插件以后，创建一个公共js文件，方便后续调用：
wxShare.js
```javascript
/* eslint-disable */
import Vue from 'vue';
import wx from 'weixin-js-sdk';
//存储各个链接的签名信息
const signMap = new Map();
// 设置默认的分享信息，因为如分享图、请求授权项、隐藏授权项等基本不变，此处设置直接引用，避免使用时繁琐设置
const defaultWxShareConfig = {
title: "分享标题（通常是动态的）",
desc: '分享描述（通常是动态的）',
link: window.location.href,
imgUrl: '分享图片地址',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'closeWindow'],
hideMenuList: ['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode','menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand']
}
//存储临时的分享信息
const wxShareConfig = {
}
const wxShare = {
//各个页面加载后，调用此方法，传入的参数config是对象，其属性参考defaultWxShareConfig
updateWxShareConfig(config = {}) {
wxShareConfig.title = config.title || defaultWxShareConfig.title;
wxShareConfig.desc = config.desc || defaultWxShareConfig.desc;
wxShareConfig.link = config.link || defaultWxShareConfig.link;
wxShareConfig.imgUrl = config.imgUrl || defaultWxShareConfig.imgUrl;
wxShareConfig.jsApiList = config.jsApiList || defaultWxShareConfig.jsApiList;
wxShareConfig.hideMenuList = config.hideMenuList || defaultWxShareConfig.hideMenuList;
var authUrl = window.location.href
const ua = navigator.userAgent
const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
const isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isiOS) {
authUrl = 'ios系统，授权地址必须使用第一次打开时候的地址，中途换的地址不识别'
}
//判断是否已经签名了
if (signMap.has(authUrl)) {
this._wxConfigJSSDK(signMap.get(authUrl), wxShareConfig);
} else {
this.wxShareAuth(authUrl);
}
},
//从服务器获取某分享链接的签名信息，并存储起来
async wxShareAuth(authUrl) {
//此处我使用的是自己封装的网络请求方法
var postData = {
url: authUrl
}
const res = await requestApi('/gooking/wx/jssdk/sign', 'post', postData)
if (res.code == 0) {
//分享链接授权签名信息
const sign = res.data;
signMap.set(authUrl, sign);
this._wxConfigJSSDK(sign);
}
},
//将签名信息更新到微信的SDK中
_wxConfigJSSDK(shareSign) {
wx.config({
debug: false,
appId: shareSign.appid,
timestamp: shareSign.timestamp,
nonceStr: shareSign.noncestr,
signature: shareSign.sign,
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
})
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready(function() {
const {title,desc,link,imgUrl} = wxShareConfig;
wx.onMenuShareAppMessage({
title,
desc,
link,
imgUrl,
success: function() {
console.log("分享成功");
},
fail: function() {
console.log("分享失败");
},
cancel: function() {
console.log("取消分享");
}
})
wx.onMenuShareTimeline({
title,
link,
imgUrl,
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
}
})
});
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
wx.error(function(res) {
console.log("分享失败: error", res);
});
}
}
//导出工具类
export default wxShare;
//将工具类添加到Vue静态方法方便调用
Vue.prototype.$wxShare = wxShare;
```
上述代码中，调用接口的代码，根据你自己的实际情况调用
main.js 中全局引入：
```javascript
import './utils/wxShare'
```
需要分享的页面，直接调用:
```javascript
this.$wxShare.updateWxShareConfig({
title: '分享标题',
desc: '分享介绍',
imgUrl: '分享图片地址',
link: '链接地址'
})
```