H5网页如何调用微信扫一扫功能？

Question

我尝试用过ZXING 库和QuaggaJS库，但都反应很慢，而且不够灵敏
本人用的腾讯服务器，布置了HTTPS环境
后端用的python语言和flash框架
请有经验的人，能够全程指导我一下，谢谢！

Answer 1

要在H5网页中调用微信的扫一扫功能，最推荐的方法是使用微信公众平台提供的微信JS-SDK。这个SDK允许你调用微信提供的各种功能，包括扫一扫。以下是全程指导的步骤：

1. 注册微信公众号

首先，你需要一个微信公众号（可以是服务号或订阅号），并且需要获得公众号的AppID和AppSecret。

2. 配置微信JS-SDK

在公众号管理后台中，配置JS接口安全域名。确保你的H5网页的域名在这里进行配置。

3. 获取Access Token和JSAPI Ticket

微信JS-SDK的使用需要Access Token和JSAPI Ticket。你需要在服务器端通过微信公众平台的API获取它们。使用Python可以这样实现：

获取Access Token

import requests

APPID = 'your_appid'
APPSECRET = 'your_appsecret'

def get_access_token():
    url = f'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={APPID}&secret={APPSECRET}'
    response = requests.get(url)
    data = response.json()
    return data['access_token']

获取JSAPI Ticket

def get_jsapi_ticket(access_token):
    url = f'https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={access_token}'
    response = requests.get(url)
    data = response.json()
    return data['ticket']

4. 生成签名

在使用JS-SDK时，需要对配置进行签名。签名过程如下：

import hashlib
import time
import random
import string

def generate_signature(jsapi_ticket, nonce_str, timestamp, url):
    string1 = f'jsapi_ticket={jsapi_ticket}&noncestr={nonce_str}&timestamp={timestamp}&url={url}'
    signature = hashlib.sha1(string1.encode('utf-8')).hexdigest()
    return signature

def get_js_sdk_config(url):
    access_token = get_access_token()
    jsapi_ticket = get_jsapi_ticket(access_token)
    nonce_str = ''.join(random.choices(string.ascii_letters + string.digits, k=16))
    timestamp = int(time.time())
    signature = generate_signature(jsapi_ticket, nonce_str, timestamp, url)
    
    return {
        'appId': APPID,
        'timestamp': timestamp,
        'nonceStr': nonce_str,
        'signature': signature,
    }

5. 前端配置JS-SDK

在前端引入微信JS-SDK的脚本，并进行配置：

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  // 获取后端生成的签名配置
  fetch('/api/wechat-config?url=' + encodeURIComponent(window.location.href.split('#')[0]))
    .then(response => response.json())
    .then(config => {
      wx.config({
        debug: false,
        appId: config.appId,
        timestamp: config.timestamp,
        nonceStr: config.nonceStr,
        signature: config.signature,
        jsApiList: ['scanQRCode']
      });

      wx.ready(function () {
        document.getElementById('scanQRCodeButton').onclick = function () {
          wx.scanQRCode({
            needResult: 1,
            scanType: ["qrCode","barCode"],
            success: function (res) {
              var result = res.resultStr;
              alert(result);
            }
          });
        };
      });

      wx.error(function (res) {
        console.error('wx error: ', res);
      });
    });
</script>

<!-- 一个按钮来触发扫一扫 -->
<button id="scanQRCodeButton">扫一扫</button>

6. 创建API来获取配置

在你的Flask后端，创建一个API来生成并返回JS-SDK配置：

from flask import Flask, request, jsonify
from your_module import get_js_sdk_config  # 把之前的签名代码放在your_module.py里

app = Flask(__name__)

@app.route('/api/wechat-config')
def wechat_config():
    url = request.args.get('url')
    config = get_js_sdk_config(url)
    return jsonify(config)

if __name__ == '__main__':
    app.run(ssl_context='adhoc')  # 确保HTTPS环境

总结

1. 注册和配置公众号：确保你的域名在公众号管理后台配置了JS接口安全域名。
2. 获取Token和Ticket：通过公众号的API获取Access Token和JSAPI Ticket。
3. 生成签名：根据微信的要求生成签名，并通过API返回给前端。
4. 前端配置JS-SDK：引入微信JS-SDK，配置并调用扫一扫功能。

这样就能在H5网页中调用微信的扫一扫功能，实现扫码的需求。确保整个过程在HTTPS环境下进行，以保证JS-SDK的正常工作。