前端实现微信平台实现分享

Posted 2020-08-27 思梦PHP

随着微信的升级，关于微信的一些jssdk接口需通过签名之后才可以使用，今天主要与大家讲解一下前端如何调用jssdk接口，以及如何来签名实现的。以及还有一些接口配置。

首先与大家讲解一下微信js-sdk的的一些基本介绍：

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

本次主要讲解的内容：如何自定义分享到朋友圈，朋友，屏蔽分享到qq，qq空间等功能。

JSSDK使用步骤：

一：绑定域名

首先登录微信公众平台，进入"公众号"里的功能设置，填写"js接口安全域名"。主意：1.要查看自己的公众号是否有您需要的相对就的开发权限

2.js接口安全域名，就是你项目发布的地方，还有一定要把.txt文件放到你前端项目的根目录。如果在配置过程中不清楚可以联系我，cyh_nini

图1

图2

二、引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js，否则将无法在ios9.0以上系统中成功使用JSSDK

图3

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

微信源码配置介绍如下：

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: ‘‘, // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: ‘‘, // 必填，生成签名的随机串

signature: ‘‘,// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

四、通过ready接口处理成功或失败验证

wx.ready(function(){

// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

});

wx.error(function(res){

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

图4

前端代码就完了，但当你们写上这些代码的时候，你会发现一直报错：

errMsg:config:invalid signature

按微信的说法是按照这几种做法：

确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign页面工具进行校验。

确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。

确认url是页面完整的url(请在当前页面alert(location.href.split(‘#‘)[0])确认)，包括‘http(s)://‘部分，以及‘？‘后面的GET参数部分,但不包括‘#‘hash后面的部分。

确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

确保一定缓存access_token和jsapi_ticket。

确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去‘#‘hash部分的链接（可用location.href.split(‘#‘)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

可是我都是按步骤来的，签名工具也验证签名没问题，这6个都确认通过了，但一直不知道错在哪里。

最后才知道，原来是通过url去获取签名，就是因为url没有encode，因为js-sdk接口去验证的你签名是否正确时，它是把url进行encode了，真是坑呀，搞了一天才发现是这么这原因。不说了，直接上代码：

图5

这段代码是通过把动态生成的url传给后台，让后台去生成处理相应的签名算法。

重点提醒：

Token请求每天也是有上限的，每天请求最多2000次，超过了次数将无法在此请求，一旦超出，可以在公众号管理后台-开发-接口权限-获取access_token的操作哪里重置，不过每个月只有10此机会

有一个网页调试工具，来查看token的，地址：

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token