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-sdkexport class WxShare {signMap = new Map();  // 存储地址url认证信息signauthApi = '/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;

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

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

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

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