Vue怒踩微信JS-SDK中配置的坑 - 签名错误

前言

这几天公司需要做微信端h5项目,需要用到微信扫一扫功能,就需要涉及到配置微信JS-SDK的问题,怎么配置怎么生成签名这边就不说了官方文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)都说的比较详细,按照官方使用接口签名校验工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign&token=&lang=zh_CN)一步步检查下来发现并没什么错误,结果还是出现了签名错误,让人蛋疼,经过一段时间摸索才发现了问题所在,话不多说看代码

wx.config({
              debug: false, 
              appId: appId,
              timestamp: timestamp, 
              nonceStr: noncestr, 
              signature: signature,
              jsApiList: ['scanQRCode']
});

上面代码主要是配置JS-SDK的代码文档都有说,下面介绍这些参数的功能,和容易引起出错的注意事项

1、debug : 为true开启调试模式,微信每一步执行的回调信息会自动alert出来,方便调试

2、appId : 这个没啥好说的微信的appId,不要和其他参数弄混就好,开发者工具可以查

3、timestamp : 时间戳,和生成签名时候拼接的时间戳一样

//js获取当前时间戳
new Date().getTime();

4、nonceStr : 随机的字符串,这个倒是比较无所谓可以直接copy官网的Wm3WZYTPz0wzccnW,和时间戳一样要和生成签名时候拼接的一样,而且在提交时候nonceStr变量名S要大写

5、(重点,下面会详细讲)signature : 签名, 由后台返回的jsapi_ticket、刚才的随机字符串noncestr、刚才的时间戳timestamp、以及当前页面的url拼接之后通过SHA1方式加密(js的SHA1加密网上一搜很多)

6、jsApiList : 要调用的SDK方法,官网可以查,这里用的是扫码功能

jsApiList: ['scanQRCode']

上面说的签名是最容易出错的地方,大部分出错的地方在拼接的url上,不要误解成回调地址,这边填写的是当前页面的地址这里分为Android和IOS的url规则,附上js代码

//Android的url
let url = location.href;

//IOS的url(IOS比较坑需要去掉锚点)
let url = location.href.replace(location.hash, '');

 


http://www.niftyadmin.cn/n/764544.html

相关文章

python 判断是否是缺失值_python缺失值可视化处理--missingno

##缺失值 empty_column [] for e, c in enumerate(df.columns):if sum(pd.isnull(df[c]))!0:empty_column.append(c)print("feature_no:%d t feature_name:%s t null_num:%d t null_rate: %.2f%%"% (e, c , sum(pd.isnull(df[c])), 100*sum(pd.isnull(df[c]))/len(d…

Vue单页面应用优化SEO之预渲染

这里优化SEO重点说vue-cli框架,毕竟是spa项目,所以SEO十分不友好,原因在于它自身并不是静态html,而是由js动态生成的(通过文档碎片劫持的方式以及Object.defineProperties等方法,有兴趣可以去研究研究vue的原理)&#…

后端如何发出请求_后端同学的前端学习之路

前言为什么需要前端学习:需要搭建一个完整的流程工具系统,而组内前端资源比较匮乏,因此前端的学习是必须的。总的来说,需要学习这三个基本的方面 第一章: 总体概述与概览 HTML 定义了网页的内容CSS 定义了网页的布局Ja…

微信移动端开发 - 账号登录授权

登录授权获取openid 过程: 通过appid以及一些其他参数拼接微信公众号的登录授权链接,通过所填写的回调地址会返回一个code参数回来,通过code向后台发起请求获取openid,此code只能使用一次,即获取一次openid后该code作…

python在浏览器运行_在web浏览器中执行脚本(python selenium)

网页中有一个脚本,允许您查看视频和其他内容。在 使用python和selenium不能在鼠标点击后运行脚本。使用此代码的当前am的:videoGemPath ".//*[idbrandconnect]/a/img" scriptPath ".//*[idcontent]/script" elementScript "…

python递归算法_【Python算法】递归与递归式

该树结构显示了从1(根节点)到n(n个叶节点)的整个倍增过程。节点下的标签表示从n减半到1的过程。 当我们处理递归的时候,这些级数代表了问题实例的数量以及对一系列递归调用来说处理的相关工作量。 当我们需要找出全部的工作量时,我们需要用到树的高度以及…

实现vue数据双向绑定

关注公众号&#xff0c;每天都能领外卖红包 关于vue数据双向绑定也是面试很喜欢问的题目了&#xff0c;这里讲下实现方式&#xff0c;效果图、源码、demo在文章末尾 首先看下vue的基本结构 <div id"app"> <div>{{a.b.c}}</div></div> n…

python dataframe行数_python – 如何在DataFrame中增加groupby中的行数

groupby是正确的想法,但正确的方法是cumcount&#xff1a; >>> product_df[month_num] product_df.groupby(product_desc).cumcount() >>> product_df product_desc activity_month prod_count pct_ch month_num 0 product_a 2014-01-01 53 NaN 0 3 product…