如果开发环境安装了 node.js,那么项目中会包含一个简单的前端示例,示例中的JavaScript模板脚本index.js会在浏览器中对接explore_hello程序。
前端模板部署步骤:
打开src/explore_hello_assets/src/index.js文件,查看代码。
import { Actor, HttpAgent } from '@dfinity/agent';import { idlFactory as explore_hello_idl, canisterId as explore_hello_id } from 'dfx-generated/explore_hello';const agent = new HttpAgent();const explore_hello = Actor.createActor(explore_hello_idl, { agent, canisterId: explore_hello_id });document.getElementById("clickMeBtn").addEventListener("click", async () => { const name = document.getElementById("name").value.toString(); const greeting = await explore_hello.greet(name); document.getElementById("greeting").innerText = greeting;});
模板index.js文件使用两个import语句为dfx生成的explorer_hello canister显式创建代理实例和actor。
此文件与模板 index.html 文件结合使用,以显示带有图像、输入和greet方法按钮的 HTML 页面。
示例文件倒入创建的Canister并在一个提示框中调用greet函数。
查看自动创建的前端资源文件 。ls -l .dfx/local/canisters/explore_hello_assets/
命令输出示例
drwxr-xr-x 9 pubs staff 288 Apr 6 14:25 assets-r--r--r-- 1 pubs staff 2931 Dec 31 1969 assetstorage.did-r--r--r-- 1 pubs staff 265823 Dec 31 1969 assetstorage.wasm-rw-r--r-- 1 pubs staff 3651 Apr 6 14:25 explore_hello_assets.d.ts-rw-rw-rw- 1 pubs staff 2931 Dec 31 1969 explore_hello_assets.did-rw-r--r-- 1 pubs staff 4236 Apr 6 14:25 explore_hello_assets.did.js-rw-r--r-- 1 pubs staff 149 Apr 6 14:25 explore_hello_assets.js-rw-rw-rw- 1 pubs staff 265823 Dec 31 1969 explore_hello_assets.wasm
这些文件是使用node模块和index.js文件由 dfx build命令自动生成的。
打开浏览器,进入在dfx.json中配置的网址127.0.0.1:8000 按下面到格式添加canisterId 参数和explore_hello_assets 容器识别码到URL。
?canisterId=<YOUR-CANISTER-IDENTIFIER>
完整路径示例
http://127.0.0.1:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai
7. 点击Click Me来调用greet函数。