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

调用范例完整代码下载:

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

<a href="http://sao315.com/w/api/saoyisao">扫描</a>

然后下面的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 unescape(r[1]);
}

 

然后放到虚拟主机上就行,而且不用管你域名是否备案,甚至ip都没关系,都能调用扫描并且获得结果,其实懂的人一下子就明白了,就是自己做了一个接口,扫描获取到内容后回到给之前的网页。

 

 

 

调用范例代码下载:
https://download.****.net/download/sysdzw/10502155

测试地址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扫一扫最简便的办法

 

 

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