教你制作NFT预售网站支持网页Mint作品

文章目录

教你制作NFT预售网站支持网页Mint作品
开发前准备
一、合约ABI是什么？
二、开发步骤
- 1.引入Web3.js库
- 2.引入合约ABI以及合约地址
- 3.连接钱包Connect按钮功能方法编写
- 4.获取合约实例从合约中读取发售价格
- 4.模拟用户Mint
总结

开发前准备

在上一篇教程中我们已经介绍如何使用API来创建NFT智能合约，在创建部署完成智能合约之后我们需要拿到合约的ABI也就是合约的字节码以及合约地址用来将合约与网站交互使用。
本教程仅为开发学习，如需开发商业项目可直接与作者联系 V: Block-dev

提示：以下是本篇文章正文内容，下面案例可供参考

一、合约ABI是什么？

ABI是智能合约的字节码文件，用来提供接口使网页能够调用合约方法与合约交互。

二、开发步骤

1.引入Web3.js库

代码如下（下载链接）：https://www.cdnpkg.com/web3/file/web3.min.js/

web3.js下载链接

<script src="web3.min.js"></script>

2.引入合约ABI以及合约地址

代码如下（示例）：

 const abi =const address = "0xFd17DE2A92B306AeC5eff34f2149bc2D8B3d29CA";

合约ABI可在开源文件处最底部得到。

3.连接钱包Connect按钮功能方法编写

代码如下：

 //连接钱包async function connect() {//Allows the user to connect to a wallet like MetaMaskif (window.ethereum) {const accounts = await window.ethereum.request({method: "eth_requestAccounts",});window.address = accounts[0];document.getElementById("address").textContent = accounts[0];window.web3 = new Web3(window.ethereum);window.contract = new web3.eth.Contract(abi, address);loadInfo();return true;}return false;}

4.获取合约实例从合约中读取发售价格

在此步骤中即是所用到合约ABI的方法

//获取Mint价格async function loadInfo() {// window.info = await window.contract.methods.getInfo().call();// console.log(info)document.getElementById("price").innerText = await window.contract.methods.cost().call() + " wei";// console.log(contract.methods.cost().call())document.getElementById("price").href = "https://etherscan.io/unitconverter?wei=" + await contract.methods.cost().call();document.getElementById("maxAmount").innerText =await contract.methods.maxMintAmount().call();}

4.模拟用户Mint

async function mint() {const amount = parseInt(document.getElementById("amount").value);const value = BigInt(await contract.methods.cost().call()) * BigInt(amount);// 调用合约ABI mint NFTsawait contract.methods.mint(amount).send({ from: window.address, value: value.toString() });}

总结

最后效果如下（仅作为基础功能展示）：

以上就是今天要讲的内容，所做功能也仅为基础功能无产品设计UI设计稿，作为技术分享如果对您有用欢迎点赞收藏，教程中如有不详细的地方还请指正，最后如有商业项目需求可直接与作者联系。

【NFT网站】教你制作开发NFT预售网站官网Mint作品相关推荐

【教你如何开发一个OnlineJudge网站】第一章如何实现OnlineJudge判题
[教你如何开发一个OnlineJudge网站]系列文章目录第一章如何实现OnlineJudge判题第二章实现OnlineJudge的后端第三章实现OnlineJudge的前端文章目录 [ ...
HTML5期末大作业：直播网站设计——仿在线媒体歪秀直播官网模板html源码(11个页面) HTML+CSS+JavaScript 期末作业HTML代码
HTML5期末大作业:直播网站设计--仿在线媒体歪秀直播官网模板html源码(11个页面) HTML+CSS+JavaScript 期末作业HTML代码临近期末, 你还在为HTML网页设计结课作业, ...
业务展示类网站高保真原型模板库、企业品牌官网、公司业务介绍、产品展示及营销、首页模板、内页模板、单页模板、整站模板、导航、轮播、横幅、列表、客户、案例、页脚、动态面板、母版、页面事件、窗口函数
本作品是一套专为业务展示类网站而推出的原型模板库,适用于制作企业品牌官网.公司业务介绍.产品展示及营销等各类网站.作品中包含了符合目前主流展示类网站设计风格的丰富模板及素材,并以UI设计稿级别的高保真 ...
企业网站+Axure企业官网通用模板+公司官网通用模板+web端高保真原型+门户官网+物流企业+门户网站+服务中心+产品中心+新闻中心+帮助中心+企业官网+公司官网+公司网站+登录注册+高保真交互
企业网站+Axure企业官网通用模板+公司官网通用模板+web端高保真原型+门户官网+物流企业+门户网站+服务中心+产品中心+新闻中心+帮助中心+企业官网+公司官网+公司网站+Axure原型+rp原型 ...
快速开发像vue elementui官网一样的api查询网站
推荐vuepress 附官网VuePress 中文文档 | VuePress 中文网前言一直想做公司的api封装查询网站,百度寻找工具返回结果大多是 gitbook 于是开始各种查询GitBook ...
织梦html地图源码,织梦网站XML地图制作_织梦网站HTML地图制作
XML网站地图制作在织梦后台管理目录核心 > 频道模型 > 单页文档管理中即可实现. 先做好网站地图模板页,注意:如果网站启用了绝对地址直接使用[field:arcurl/]或者 h ...
hbuilder前端需要的插件_初学Web前端会用到开发工具（附官网下载地址）
目前市面上比较流行的前端开发工具主要有WebStorm.Vscode.Sublime.HBuilder.notepad++.EditPlus.记事本等,今天介绍一下这些开发工具,并且给出了下载地址. ...
使用Django1.7开发熙鱿记官网
Django升级1.7了,根据业务的需求,我们也准备开发新版的网站,新加入会员管理,订单查看等新功能,界面也会重新调整.官网: http://www.youyutiao.com 熙鱿记是一个什么样的站 ...
初学Web前端会用到开发工具（附官网下载地址）
目前市面上比较流行的前端开发工具主要有WebStorm.Vscode.Sublime.HBuilder.notepad++.EditPlus.记事本等,今天介绍一下这些开发工具,并且给出了下载地址. ...

【NFT网站】教你制作开发NFT预售网站官网Mint作品