纯HTML/CSS/JS构建dApp时zksync-web3导入及调用问题咨询

问题根源 #

1. CDN链接错误：你使用的是unpkg的浏览路径（browse/），无法直接加载可执行的UMD脚本，导致全局zksync对象未定义。
2. ABI获取未解析：fetch返回的是Response对象，未转换为JSON格式的ABI。
3. 顶层await使用不当：直接在脚本顶层使用await会抛出错误，需包裹在异步函数中。

修正后的代码 #

1. index.html（修正CDN链接）

<script type="text/javascript" src="https://cdn.ethers.io/lib/ethers-5.0.umd.min.js"></script>
<!-- 替换为zksync-web3的UMD分发脚本 -->
<script src="https://unpkg.com/zksync-web3@0.14.3/dist/zksync-web3.umd.js"></script>
<script src="./index.js"></script>

2. index.js（修正ABI获取与代码结构）

// 定义全局变量存储合约实例
let gameContract;
const GAME_CONTRACT_ADDRESS = "你的合约地址";

// 用异步函数包裹所有逻辑
async function initZkSyncContract() {
    try {
        // 正确获取并解析ABI
        const abiResponse = await fetch("./game_abi.json");
        const GAME_CONTRACT_ABI = await abiResponse.json();

        // 初始化zkSync Provider
        const zkSyncProvider = new zksync.Provider("https://zksync2-testnet.zksync.dev");
        // 初始化Signer
        const provider = new zksync.Web3Provider(window.ethereum);
        await provider.send("eth_requestAccounts", []); // 请求钱包授权
        const signer = provider.getSigner();

        // 创建合约实例
        gameContract = new zksync.Contract(
            GAME_CONTRACT_ADDRESS,
            GAME_CONTRACT_ABI,
            signer
        );

        console.log("合约初始化成功:", gameContract);
    } catch (error) {
        console.error("初始化失败:", error);
    }
}

// 页面加载完成后执行初始化
window.addEventListener("load", initZkSyncContract);

关键说明 #

• UMD脚本：zksync-web3的UMD包会在全局暴露zksync对象，确保你使用的是dist/路径下的分发文件，而非源码文件。
• ABI解析：必须通过.json()将fetch返回的Response转换为JSON格式的ABI，否则合约创建会失败。
• 钱包授权：添加eth_requestAccounts调用，确保用户授权钱包连接，避免后续交互时的权限问题。
• 错误捕获：用try/catch包裹异步逻辑，便于定位初始化过程中的错误。

内容的提问来源于stack exchange，提问作者TC1211