微信公众号开发之js-sdk开发

Posted 2020-09-28

公司最近项目需要使用微信进行分享,对微信的jssdk研究了下,由于研究过程并不顺利,遇到的坑比较多,所以特意将研究结果记录下来,供大家批评和参考!

 

官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信的jssdk是面向网页开发者提供的基于微信内的网页开发工具包,提供了诸如分享朋友圈,分享微信好友,分享QQ好友 and so on,具体支持的文档参考上述官方文档;

在进行微信jssdk开发之前,首先你得拥有一个微信公众号,并且具有对应功能的权限,注意一定要有对应开发的权限!!!(如下图所示).另外如果你没有微信的公众号或者仅为测试所用,那么可以去申请一个微信测试的账号(这个给腾讯点赞!).

如果你有了这些基础,那么就可以开始开发了,开发分为以下五个步骤

第一步:域名配置

• 假如你是自己的微信公众号请到公众号设置-功能设置里面设置js接口安全域名;
• 设置安全域名需要遵循以下步骤:一,从配置页面把验证文件下载下来放置到要配置的域名的服务器目录下,确保该文件可以直接访问,在浏览器里面查看下是否可以进行访问,此处需要注意一定要注意可以访问,不要因为权限,密码等原因导致无法访问;二,在配置页下面的域名输入框里面填入需要配置的域名,点击保存,可见提示保存成功,否则请查找其他原因(一般不会出问题的),只有此处配置的域名下的内容才可以进行分享;
• 如果你是微信测试公众号,登录微信测试平台,在JS接口安全域名配置上对应域名就可以了.

第二步:引入js文件

在html页面中引入js文件:http://res.wx.qq.com/open/js/jweixin-1.2.0.js

第三步:config接口注入

在进行jssdk接口调用之前,必须在html页面中进行config接口注入

wx.config({

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

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

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

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

    signature: ‘‘,// 必填，签名

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见微信官方文档

});

appid就不用说了,每个微信公众号唯一一个;

timestamp和nonceStr由开发者动态生成,一般在服务器端生成;

signature需要使用jsapi_ticket,url,noncestr,timestamp拼接成如下一个字符串,并对如下的求sha1的值,这个值即为signature,其中jsapi_ticket在上述官方文档中也可以找到;

例如:jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

第四步:通过ready接口处理成功验证

所有内容应该(并不是必须)通过ready接口来进行处理,在该方法内部对需要用到的接口进行处理,我觉得更像是一种注册绑定;

如分享到朋友圈的接口,link的链接的内容一定要在前面配置的安全域名之下的内容,其他内容也不太填敏感信息;

wx.onMenuShareTimeline({

    title: ‘‘, // 分享标题

    link: ‘‘, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl: ‘‘, // 分享图标

    success: function () { 

        // 用户确认分享后执行的回调函数

    },

    cancel: function () { 

        // 用户取消分享后执行的回调函数

    }

});

第五步：通过error接口处理失败验证

wx.error(function(res){

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

});

测试的微信信息验证过程

笔记自己猜测的信息验证过程:

我们在进行接口配置的时候将我们从服务器拿到的noncestr,timestamp,signature写到config方法中,config向微信发出异步请求,将我们的配置信息传递到服务器,由服务器计算得出一个签名,和我们传给服务器的签名进行对比,当二者相同的时候说明验证信息无误,使用此方法保证分享的安全性!

总结

那么说了这么多,你服务器端代码写好了,html网页代码也写好了,怎么分享呢?

在微信里面打开你的网页,在微信的右上角,点击进入分享,其实也就是微信官方的分享按钮,只能通过此方法进行分享!!!

下面说一下笔者在开发过程中遇到的错误

1. Invalid url domain:未在微信公众号里面配置安全域名,或者安全域名配置错误(注意一级域名和二级域名的问题),如果域名不是你亲手配置的一定要注意这个问题;
2. 若网站端口不是80或者443端口在计算签名的时候需要对参数url进行端口号处理,需要端口号替换掉,因为微信服务器计算这个签名的时候是不把端口计算在内的;
3. require subscribe错误说明你没有订阅该测试号，该错误仅测试号会出现,邀请好友测试的时候可能会出现这个问题;
4. 随机串和时间戳需要自己实现,计算签名千万不要放在浏览器端进行,要在服务器端进行;
5. 在计算签名的时候要注意url的参数问题,部分连接是带有参数的,另外还存在二次分享失败的问题,此时应该也是参数的问题;
6. 如果你使用的是安卓手机(苹果的检查比安卓松,苹果可能没有问题,但是安卓就不行了),如果你在微信中打开的分享网页压根没有分享按钮,或者直接白屏打不开(此时应该是整个网站的页面都是这样的),恭喜你可以考虑查看网站的证书是否断链等原因;
7. 分享不要涉及敏感内容

工具推荐

在开发过程中可以考虑使用微信官方的微信web开发者工具进行开发调试,里面可以看到jssdk的信息,如果出现config:ok基本上是没有什么问题了,但是有的时候不要太相信这个结果了,还要到手机环境进行测试的,切记安卓和苹果都要测试!!!

如果你有任何批评或者疑问,可以在下面进行评论或者向此邮箱发邮件,Email:[email protected]