本文是微信公众号开发-H5网页分享功能的前、后端整个流程,以及遇到的invalid signature问题的解答,希望对该功能开发不是很清楚的朋友有所帮助。
一、准备工作。
百度下“微信 公众平台 开发 文档”进入官方接口文档(这里有朋友要问了,为什么搜索的时候要在词与词之间加空格,这是个小技巧,这样搜索的结果更加准确):文档1.1至3.7的篇幅清晰的介绍了如何设置JS安全域名、网站如何导入开放的js接口文件、如何签名验证和以及分享的多种类型。大家还是要仔细的阅读下。
1、绑定安全域名:因为调用微信H5网页分享功能需要调用微信开放的JS接口,并且网站的域名要绑定到微信公众平台“JS接口安全域名”下,才能正常调用微信开放的JS接口。比如网站是http://my.csdn.com/index.html,那么JS接口安全域名就是my.csdn.com。域名绑定失败或者域名不存在会报错误:invalid url domain。
2、引入微信js文件:在需要调用JS接口的页面引入JS文件,用script标签引入即可,可以直接引用官方提供的JS链接,也可以把JS文件下载到本地引用。
3、通过config接口注入权限验证配置:
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用JS-SDK接口。wx.config调用方法如下:
config接口调用完后就可调用ready接口和error接口,这2个接口是代表config是否验证成功的。分享的功能可以封装到一个方法中,然后在ready接口中进行调用。下面直接放代码。
二、前端代码
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jweixin-1.4.0.js"></script>
<script src="js/getRequestParam.js"></script>
<script type="text/javascript">
var nonceStr = ''; //后台返回-生成签名的随机串
var timestamp = '';//后台返回-生成签名的时间戳
var signature = '';//后台返回-签名
var CurrentPageUrl = '';//前台获取传递给后台(后台签名时用到)-当前页面地址,包括url后面接的参数,如果是微信静默授权进来的,该地址会包含微信Code等信息
//微信公众平台APPID
var WX_APPID = &#