前端做微信好友分享_前端实现微信平台实现分享
随着微信的升级,关于微信的一些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
前端做微信好友分享_前端实现微信平台实现分享相关推荐
- 前端做微信好友分享_前端微信分享,调用微信分享,分享朋友圈,分享微信好友,分享qq空间,qq好友...
项目中很多使用到微信分享的地方,对于前端来说也算很简单了,建议写该功能时使用微信调试工具,便于调试,直接上代码 第一步,引入微信配置文件 //这里的AJAX用于获取后台数据,当然也可以不用这么写,您只 ...
- 导出怎么用_微信好友账号怎么导出?微信怎么备份通讯录?
微信好友账号怎么导出?微信怎么备份通讯录?对于经常使用微信社交的朋友,都有一个共同的烦恼,那就是微信只能加5000多个好友,平时还怕一个不小心误删了微信好友,不要烦恼,小编教你导出微信好友! 情景一: ...
- python微信好友助力_微信好友助力活动,discuz插件
[实例简介] 微信营销,好友助力活动discuz插件,有需要的小伙伴抓紧了,价值200元 [实例截图] [核心代码] tom微信好友助力2.3 └── tom微信好友助力2.3 └── tom_wei ...
- 微信通话记录恢复 android,微信好友删除怎么还原?微信恢复
原标题:微信好友删除怎么还原?微信恢复 微信通信录误删或是被别人偷偷删掉,与我们来说都是一种损失,甚至会带来很严重的后果,毕竟在这点赞之交的微信通讯时代,被拉黑.删除或者是主动拉黑删除别人,都是不痛快 ...
- python微信好友比例分析_python分析微信好友分布
既然wxpy能够获得所有微信好友的信息列表,我们可以用来分析微信好友的男女比例分布以及地区分布 获得微信好友列表 关于怎么登录微信 ,可以参考之前的文章, 这里之列出获取好友的代码 # 获取所有好友 ...
- 前端做微信好友分享_前端-微信分享
1.绑定域名 公众号设置->功能设置->JS接口安全域名 加入要分享的工程域名 2.引入JS文件 因为在内网开发,如果直接引用在内网会报错,所以先判断是微信环境再引用js. // 判断是否 ...
- 前端和后端的英文_前端工程师一般都喜欢去哪些网站逛?
看到有人问前端开发应该知道哪些网站,那我就来总结一下. 我先说一些程序员很通用的网站,再推荐一写前端程序员可以订阅的优质前端内容网站,如果对你有用,就点个赞呗~ 1. Google: 这个不用多说了吧 ...
- python前端和后端的区别_前端和后端的区别
有的人认为,前端很好学,后端不好学. 也有的人认为,前端不好学,后端好学,归根到底还得看个人兴趣. 前端和后端做简单的叙述 后端:入门难,深入更难,枯燥乏味,没有太大成就感,看一堆业务逻辑代码. 前端 ...
- python查看微信撤回消息_想查看微信好友撤回的消息?Python帮你搞定
要说微信最让人恶心的发明,消息撤回绝对能上榜. 比如你现在正和女朋友用微信聊着天,或者跟自己喜欢的女孩子聊着天,一个不留神,你没注意到对方发的消息就被她及时撤回了,这时你很好奇,好奇她到底发了什么?于 ...
- python爬取微信好友头像_使用python itchat包爬取微信好友头像形成矩形头像集的方法...
初学python,我们必须干点有意思的事!从微信下手吧! 头像集样例如下: 大家可以发朋友圈开启辨认大赛哈哈~ 话不多说,直接上代码,注释我写了比较多,大家应该能看懂 import itchat im ...
最新文章
- SpringMVC中实现的token,防表单重复提交
- PyTorch | 优化神经网络训练的17种方法
- ActionScript3.0自定义Flex组件问题 重写组件的使用
- 如何解决JAVA环境变量配好后,重启电脑又失效的问题
- 【渝粤教育】国家开放大学2018年春季 0703-21T经济学基础 参考试题
- 博弈论 —— matlab
- 【文末有奖】华为云“网红”语言Python课程来啦!
- 爱克发胶片_GE AGFA 胶片
- matlab 局部图放大或缩小
- python framework jdon_python – Django Rest Framework和JSONField
- flutter android 权限,Flutter permission_handler 权限插件的使用详解
- CSS实现水平垂直居中的1010种方式
- 女生学java软件开发怎么样?就业前景如何?
- mysql的tps是什么意思_Mysql数据库的QPS和TPS的意义和计算方法
- TAP-Win32 Adapter OAS“的网络适配器删除后总是出现(kms激活器及win10激活)
- 如何在小方框上打对号 小方框内打对勾 word 方框打对勾
- redis实战 migrate异常NOAUTH Authentication required.
- win10如何删除microsoft账户并免密登录
- 【linux】【jenkins】自动化运维三 整合gitlab、docker发布vue项目
- QGIS 添加国内地图提供商(高德/百度/必应/腾讯)卫星及路网图
热门文章
- 云数据库RDS和对象存储OSS
- antd 日期组件出现了英文
- 如何查看电脑CPU温度,笔记本温度显示怎么开启
- python单位根检验看结果_python做adf检验
- 为什么-关于因果关系的新科学 | 导言
- Microsoft Visual Studio 2013产品激活密钥
- linux 提取网卡驱动,linux(ubuntu18.04)系统上安装RTL8822CE网卡驱动
- 帝国CMS二次开发入门教程
- 2020 mse 清华_家长们看过来!2020年下半年剑桥MSE考试备考全攻略!
- 熊出没全集光头强的机器人_熊出没:其实光头强早就不想当伐木工了,这些细节足以说明一切...