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

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

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

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

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

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

JSSDK使用步骤：

一：绑定域名

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

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

图1

图2

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

3、经过config接口注入权限验证配置

微信源码配置介绍以下：

wx.config({

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

appId: '', // 必填，公众号的惟一标识

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

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

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

jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2

});

4、经过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