没有微信公众号如何在自己微信网页中实现html5扫一扫功能？5行代码就可以实现！

大家都知道微信扫一扫，而且很常用，基本都用来扫码关注微信号，扫码付款，再之外的如果要扫的二维码是链接就直接打开访问，非链接的直接显示文字。

然而有时我们需要在自己的网页上调用扫一扫，然后按照自己的需要对获得结果进行处理该怎么办呢？有些同学觉得很奇怪，怎么会有这样的需求。其实这样的使用场景很多的，例如：

• 扫快递单上的条形码查询它的进度

• 进度系统中可以根据生产单上条形码查询生产进度

• 发货系统出入库扫描

• 扫描url类型的二维码但不打开，只截取url后面一个参数的值

• 扫码领取或者兑换优惠券等等
  

  。。。

  看下面的一个应用效果。

  

  
  

  
  

是不是很方便呢？微信里打开百度也可以测试效果。

如果按照通常的步骤在自己网页中调用微信的扫一扫可不是那么简单的。首先得有微信公众号，公众号还得提交认证。我们都知道不光是注册个微信公众服务号就行，而且还得提交认证，每年交300块大洋，前提还必须是企业身份才能注册和认证。

接下来才是编码，这才是考验你耐心的时刻，各种不行，各种莫名其妙的错误，有些新手可能在域名备案上就被卡了半天，因为想要调用微信的jssdk接口要求访问的域名必须是备案的，设置到微信公众号的js安全域名区，然后还要设置服务器白名单，如果你的是虚拟主机而ip不固定的说不定哪天就扫不了了。调用几个接口，参数，token还有7200秒的失效，定时更新还是访问时检查判断再更新，是不是弄过的人都纠结过？很是麻烦，顿时头大了有么有？水不是一般的深，于是纷纷哭爹喊娘求大神骂张小龙。

我发现我废话太多了，说好的5行代码呢？却写了这么多废话，哈哈哈。其实多了解了解也没坏处的，毕竟也算我的摸索过的心路历程。

上面的gif动画案例是将获取到的单号传递给百度，让百度去搜这个单号，这样就能查到物流结果了：http://www.baidu.com，可以测试下看看。

调用接口的方法有两种，方法如下：

方案一（推荐）：

<a href="https://www.996315.com/api/scan/?redirect_uri=需要接收结果的网址">扫一扫</a>

方案二（不推荐）：

<a href="https://www.996315.com/api/scan/">扫一扫</a>

以上两个方案都可以用，方案一是将扫描结果附加到指定的网址然后打开，方案二是由接口自动获取来路地址，有时会不准确，比如有些https的会获取不到来路网址，以及有些用webpack等各类框架之类的，所以推荐使用方案一。

获取结果主要用从url中的qrresult参数中截取，方法参考：

<script>
if (location.href.indexOf("qrresult=")>-1)
    alert(decodeURIComponent(location.href.split("qrresult=")[1])); //在您的程序中可对此数据进行处理
</script>

将上面代码放到你的网页中，然后上传到服务器或虚机，然后微信中访问这个网址，就能顺利使用扫一扫了，并且你的域名不需要备案，甚至ip地址都可以！

有些同学反映直接点击扫一扫后显示空白，可能是他们用js方法（window.open或者location.href等方式）打开接口的，结果导致接口获取来路网址异常，请使用a标签方法直接链接过去，如果实在不行可以指定redirect_uri来强制使接口将结果返回到指定url，例：

如果即便按照这样做了还是异常，一定是你的url包含“#”了，这个主要是浏览器给截断了导致的，解决方案就是将你的网址urlencode编码后放到redirect_uri=后面就ok了。

以上范例代码除去script标签实际只有3行我们就实现了h5扫一扫，是不是很简单呢？ o(*￣︶￣*)o

不过实力派总是不屑一顾：还要跳转多麻烦。然而在条件缺乏的情况下这不失为一个好的解决方案。如果开发环境各种条件都满足了，对微信开发也熟练了可以直接使用微信jssdk。作者提供的这个方法可以做为临时过渡方案。

声明：
有些同学担心调用这个接口的安全问题，大家可以查看下接口页面里的相关js代码，可以看到扫描二维码的动作完成后就直接带着扫描结果跳转到你之前的网页了，并没有截留或者保存扫描后的内容的相关js代码。这个接口是我自己写的并且自己经常使用的，觉得很好用就贡献出来了。