准备工作

1.微信公众号、获取appId、secret；

2.在公众号后台填写JS接口安全域名和IP白名单；

后台工作

请求微信接口并给前端返回noncestr（生成签名的随机串）、timestamp（生成签名的时间戳）、signature（签名），获取方式文档中描述的很清楚，这里就不在赘述了。

微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

前端工作

一、安装

引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

或者

npm安装：

npm install weixin-js-sdk --save

二、引入

import Wx from 'weixin-js-sdk';

三、通过config接口注入权限验证配置

shareConfig是通过后台接口获取的；Wx.config是异步方法，如果紧跟着写分享配置需要放到wx.ready中；

Wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '**********', // 必填，公众号的唯一标识timestamp: shareConfig.timestamp, // 必填，生成签名的时间戳nonceStr: shareConfig.noncestr, // 必填，生成签名的随机串signature: shareConfig.signature,// 必填，签名，见附录1jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2// 这里后面两个接口是即将废弃的，但是我看微信开放文档写的，如果是低版本的微信可能不支持前面两个新的分享方法，所以就都加上了
});

四、分享配置

let shareConfig = {title: '', // 标题desc: '', // 描述link: '', // 分享链接imgUrl: '', // 图片地址success: function (res) {console.log(res, '成功');},cancel: function (err) {console.log(err, '失败');}
};Wx.ready(function () {// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容Wx.updateAppMessageShareData(shareConfig);// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容Wx.updateTimelineShareData(shareConfig);Wx.onMenuShareAppMessage(shareConfig);Wx.onMenuShareTimeline(shareConfig);});