3.1「Dfinity前端」Front-end概览

Internet Computer区块链允许您通过使用他们的 JavaScript 代理(agent)，为您的 dapps托管 Web 3.0前端。通过使用 dfx 提供的asset canister将静态文件上传到 Internet Computer，您将能够在去中心化技术上运行您的整个应用程序。

这里有一些教程的快速链接，其中包含开发前端 dapp 的不同阶段的示例代码：

• A tutorial on building a React dapp Customize the front-end：构建 React dapp 的教程自定义前端
• Using Candid as a bare-bones interface to expose and test the functions in a canister：使用 Candid 作为一个简单的界面来暴露和测试罐中的功能。
• Using raw HTML and JavaScript to display a simple HTML entry page：使用原始 HTML 和 JavaScript 显示一个简单的 HTML 条目页面。
• Using React and compiled JavaScript to embed HTML attributes and elements directly in a page：使用 React 和编译的 JavaScript 将 HTML 属性和元素直接嵌入到页面中。
• Using React and TypeScript to import CSS properties from an external file：使用 React 和 TypeScript 从外部文件导入 CSS 属性。

如何使用默认模板(templates)？

你可能已经注意到了，项目包括样板文件index.js和webpack.config.js。

默认情况下，index.js文件导入位于src/declarations文件夹中的“代理”(可以看做一个对象，前端通过与代理交互实现和后端的交互)。当您运行dfx deploy时，该目录将由dfx生成，无论是本地部署还是部署到IC。

生成的代码如下所示：

import { Actor, HttpAgent } from "@dfinity/agent";

// Imports candid interface
import { idlFactory } from './hello.did.js';
// CANISTER_ID is replaced by webpack based on node enviroment
export const canisterId = process.env.HELLO_CANISTER_ID;

/**
 *
 * @param {string | Principal} canisterId Canister ID of Agent
 * @param {{agentOptions?: import("@dfinity/agent").HttpAgentOptions; actorOptions?: import("@dfinity/agent").ActorConfig}} [options]
 * @return {import("@dfinity/agent").ActorSubclass<import("./hello.did.js")._SERVICE>}
 */
export const createActor = (canisterId, options) => {
  const agent = new HttpAgent({ ...options?.agentOptions });

  // Fetch root key for certificate validation during development
  if(process.env.NODE_ENV !== "production") agent.fetchRootKey();

  // Creates an actor with using the candid interface and the HttpAgent
  return Actor.createActor(idlFactory, {
    agent,
    canisterId,
    ...options?.actorOptions,
  });
};

/**
 * A ready-to-use agent for the hello canister
 * @type {import("@dfinity/agent").ActorSubclass<import("./hello.did.js")._SERVICE>}
 */
export const hello = createActor(canisterId);

然后，如果返回到index.js，可以看到它接受生成的 actor，并使用它调用 hello canister 的 greet 方法：

import { hello } from "../../declarations/hello";

document.getElementById("clickMeBtn").addEventListener("click", async () => {
  const name = document.getElementById("name").value.toString();
  // Interact with hello actor, calling the greet method
  const greeting = await hello.greet(name);

  document.getElementById("greeting").innerText = greeting;
});

在许多项目中，您可以使用在declarations下的代码而不需要做任何更改，并且可以在 hello_assets/src 中进行一些改动。但是，如果您的项目有其他需求，请阅读Add frontend assets。