Vue3 项目中使用微信 SDK 开发微信网页

npm install weixin-js-sdk

import wx from 'weixin-js-sdk';

import wx from 'weixin-js-sdk';
import {getWxConfig} from "@/api/wxConfig.js";

console.log("微信 JS-SDK 配置开始...")

// 微信 API 全局配置
getWxConfig(location.href.split('#')[0]).then(res => {
    console.log(res)
    const {appId, timestamp, nonceStr, signature} = res;
    wx.config({
        debug: process.env.NODE_ENV === 'development',
        appId,
        timestamp,
        nonceStr,
        signature,
        jsApiList: []
    });
});

wx.ready(function(){
    // config 信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，
    // config 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
    // 则须把相关接口放在 ready 函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
    console.log("微信 JS-SDK 配置成功！")
});

wx.error(function(err){
    console.log("微信 JS-SDK 配置失败：", err);
});

import ins from "@/api/request.js";

export function getWxConfig(url) {
    return ins.get("/wxconfig/get",{
        params: {
            url
        }
    })
}

// 配置微信 API
import "@/util/wx-api-config.js";

wx.config({
        debug: true,
        appId,
        timestamp,
        nonceStr,
        signature,
        jsApiList: []
    });

wx_app_cfg = {
    'appid': 'xxxxxxxxxxxxxxxxxx',
    'secret': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
}

def get_access_token(appid: str, appsecret: str) -> str:
    """调用微信API获取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.get("access_token")

def get_jsapi_ticket(access_token: str) -> str:
    """调用微信API使用access_token获取jsapi_ticket"""
    url = f"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={access_token}&type=jsapi"
    response = requests.get(url)
    data = response.json()
    return data.get("ticket")

def generate_nonce_str(length: int = 16) -> str:
    """生成随机字符串，用于签名"""
    characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    return ''.join(random.choice(characters) for _ in range(length))


def generate_signature(ticket: str, noncestr: str, timestamp: int, url: str) -> str:
    """使用sha1生成签名"""
    string1 = f"jsapi_ticket={ticket}&noncestr={noncestr}&timestamp={timestamp}&url={url}"
    return hashlib.sha1(string1.encode('utf-8')).hexdigest()

def save_and_expire_handle(force=False):
    """
    每次调用的时候，首先检查 mongo 中是否有缓存（mongoengine），如果有，检查是否过期，如果过期，重新获取并且存储，如果没有，直接获取
    """
    current_time = int(time.time())
    config = WXConfig.objects().first()  # 因为只会有一条记录，所以直接获取第一条应该就可以了

    if config and config.expires_at > current_time and not force:
        # 如果配置存在且未过期，直接返回
        return {
            "access_token": config.access_token,
            "jsapi_ticket": config.jsapi_ticket
        }
    else:
        # 如果配置不存在或已过期，重新获取并存储
        appid = wx_app_cfg['appid']
        appsecret = wx_app_cfg['secret']
        print("==重新调用微信API获取access_token和jsapi_ticket==")
        access_token = get_access_token(appid, appsecret)
        jsapi_ticket = get_jsapi_ticket(access_token)
        expires_at = current_time + 7000  # 这里过期时间应该是 7200 秒，但是为了保险起见，提前 200 秒过期并重新获取

        if config:
            # 更新现有记录
            config.update(access_token=access_token, jsapi_ticket=jsapi_ticket, expires_at=expires_at)
        else:
            # 创建新记录
            WXConfig(access_token=access_token, jsapi_ticket=jsapi_ticket, expires_at=expires_at).save()

        return {
            "access_token": access_token,
            "jsapi_ticket": jsapi_ticket
        }

def get_wx_config(appid: str, appsecret: str, url: str, force=False) -> Dict[str, str]:
    """获取微信JS-SDK配置"""
    # 首先从数据库或者新获取 access_token 和 jsapi_ticket
    # 这里就一个需要 force 即可，因为 access_token 和 jsapi_ticket 是一起获取的
    access_token = save_and_expire_handle(force)['access_token']
    jsapi_ticket = save_and_expire_handle()['jsapi_ticket']
    # 生成签名所需的参数
    noncestr = generate_nonce_str()
    timestamp = int(time.time())
    # 生成签名
    signature = generate_signature(jsapi_ticket, noncestr, timestamp, url)

    return {
        "appId": appid,
        "timestamp": timestamp,
        "nonceStr": noncestr,
        "signature": signature
    }

@wxconfig_route.get('/get')
async def return_wx_config(url: str):
    """
    获取微信 JS-SDK 配置
    """
    # 生成微信 JS-SDK 配置
    wx_config = get_wx_config(wx_app_cfg['appid'], wx_app_cfg['secret'], url)

    return trueReturn(wx_config)


@wxconfig_route.get('/flush')
async def flush_wx_config(url):
    """
    这里保留了一个接口用于特殊情况，强制刷新微信 JS-SDK 配置
    """
    # 生成微信 JS-SDK 配置
    wx_config = get_wx_config(wx_app_cfg['appid'], wx_app_cfg['secret'], url, force=True)

    return trueReturn(wx_config)