微信网页开发的一些感想,顺便附上微信中调用扫一扫史上最简便的方法 5行代码实现H5扫一扫 HTML5扫一扫最简便的办法

调用范例完整代码下载:

https://download.csdn.net/download/sysdzw/10550117

 

csdn的这个博文写的有点啰嗦,建议移步这里:

https://www.imooc.com/article/42734

 

在网页上点一个按钮或者链接调用微信扫一扫然后返回结果我们继续处理,很多人应该都会有这样的需求,不过微信对这个空子比较严格,需要你的网页有签名,而签名生成需要有一个微信公众号的appkey和APPsecret,然而要有这两项得注册个微信公众号,并且公众号还需要认证,认证的话每年300元,马化腾赚死了,认证下就要这么多少钱!

微信网页开发的一些感想,顺便附上微信中调用扫一扫史上最简便的方法 5行代码实现H5扫一扫 HTML5扫一扫最简便的办法_第1张图片

 

经过了上面这些操作已经累得差不多了吧,你以为交钱就完了吗?nonono这些都搞完了后还要进行一系列的设置,比如服务器白名单,回调域名,域名还得备案,如果你的是虚拟主机ip不定的话就麻烦大了,要稳定还得准备一台服务器可以是vps或者云主机,接下来才是编程!

对照微信开发文档调用几个接口,按照要求配置wx.config,那个该死的token还有jsspi这两个参数还会过期,7200秒后就失效,那么你就得考虑,我是在服务器上后台弄个程序定时刷新呢还是程序触发呢?如果是虚拟主机,那么我在哪儿弄个网页定时执行下这个网址呢?顿时头大了有么有?! 发现定时执行有弊端,有时挂了没执行没刷新呢,于是换另外一个方案,用户触发时候检查之前获取的参数有没有过期,硬着头皮按照文档一项项处理,结果一运行,wfk!一行行检查,修改,没问题了呀,可是为什么还是不行??!

微信网页开发的一些感想,顺便附上微信中调用扫一扫史上最简便的方法 5行代码实现H5扫一扫 HTML5扫一扫最简便的办法_第2张图片

 

于是你对微信开发产生了满满的恶意,微信开发是反人类的么?反程序员的么?不,这就是学习成本,其实大家都是这么过来的,所以呀,大家接项目别在白菜价了,你熬夜看视频看教程器敲代码练习、厚脸皮问大神各种问题大神让你百度、你不得不打发点红包。。。各种屈辱的难忘学习经历都忘了吗?这都是成本呀!

微信网页开发的一些感想,顺便附上微信中调用扫一扫史上最简便的方法 5行代码实现H5扫一扫 HTML5扫一扫最简便的办法_第3张图片

 

好了,吐槽完了。说好的棒棒糖呢?下面附上啦。

 

在你的网页中总加入代码:

扫描

然后下面的script块中用下面代码来获取扫描结果:

var qr=GetQueryString("qrresult");
if(qr){
    //alert(qr);
    $("#result").html(qr);
}

function GetQueryString(name)
{
    var reg = new RegExp("\\b"+ name +"=([^&]*)");
    var r = location.href.match(reg);
    if (r!=null) return decodeURIComponent(r[1]);
}

 

然后放到虚拟主机上就行,而且不用管你域名是否备案,甚至ip都没关系,都能调用扫描并且获得结果



测试地址1(测试需要在微信里打开):
http://www.jiujiujin.net/testsaoyisao.htm
此项适合在自己网页中加入扫一扫,比如表单中需要录入快递单号。

测试地址2(测试需要在微信里打开):
http://sao315.com/w/api/saoyisao?redirect_uri=http://www.jiujiujin.net/wuliu.htm
这个适合在微信菜单里设置“扫一扫”,然后url指向到上面这样的网址,其中redirect_uri可以改成您需要接收二维码数据的地址,上面例子是扫描快递单号然后显示物流信息。

 

微信网页开发的一些感想,顺便附上微信中调用扫一扫史上最简便的方法 5行代码实现H5扫一扫 HTML5扫一扫最简便的办法_第4张图片

 

 

 

 

声明:
有些同学担心调用这个接口的安全问题,以及不知道能使用多久,我要说的是安全是安全的,使用多久我也不确定,这只是我自己写的并且自己使用的,觉得很好用就贡献出来的一个方法。建议大家后期有条件的还是自己用微信公众号对照微信jssdk进行开发,难度也不大的我之前做过asp实现的详细说明,请移步:https://blog.csdn.net/sysdzw/article/details/50756015

相关开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

asp实现扫一扫的步骤:https://blog.csdn.net/sysdzw/article/details/50756015

 

其他问题摘要:

1.用于vue,地址里含有#导致接口返回的URL丢失部分内容怎么办?

答:这是浏览器自身问题决定的。参数如果有#会被自动隔断,导致目标页面获取不到。解决方案是:1)用redirect_uri=方式调用接口  2)将#改为%23

2.经常提示无法获取URL来路怎么办?

答:经过测试确实会偶尔发生这样的问题。原因未知。如果发生这样的问题请使用另外一种调用方式,即可redirect_uri=的方式,即直接指定返回路径。

 

你可能感兴趣的:(作品,学习,工作)