一文cocos简单入门web3
前置条件
- 1、creator任意版本，目前文章使用的是creator3.8
- 2、全程科学上网(文章使用bsctest链)
- 3、chrome浏览器 添加插件metamask(又名小狐狸) 安装地址: https://metamask.io/download/
- 4、使用metamask创建自己的钱包: Web3开发准备工作 手把手带你创建自己的 MetaMask 账号_-耿瑞-的博客-CSDN博客
- 5、添加bsc测试链: 打开链接：https://testnet.bscscan.com/ 点击最右下角 AddBscNetwork按钮
- 5、后台服务器使用golang1.6
下面的3.8源码工程
web3.zip (214.2 KB)
COCOS中连接钱包(不支持native)
先安装web3的库，推荐使用ethers，因为包小，函数易读。因为此包不支持cocos的npm安装，所以有两种方法
- 注入使用:
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.src = "https://cdn.ethers.io/lib/ethers-5.2.umd.min.js";
head.appendChild(script);
- creator插件使用，把这个 https://cdn.ethers.io/lib/ethers-5.2.umd.min.js 保存到本地，然后放到creator中，设置为插件
然后创场景，添加UI按钮事件，来连接钱包。其本质上就是使用metamask的插件来调用metamask的节点来进行web3相关的操作
const ChainParams = {
ChainId : 97,
ChainName:"BSC Test",
RpcUrl :"https://data-seed-prebsc-1-s3.binance.org:8545/",
ExplorerUrl:"https://testnet.bscscan.com/"
}
async connectWallet(){
var ethereum = window['ethereum']
if (!ethereum) {
console.log("未安装好metamask?")
return null
}
await ethereum.enable()
this.ethereum = ethereum;
this.provider = new ethers.providers.Web3Provider(ethereum);
this.signer = await this.provider && this.provider.getSigner();
const { chainId } = await this.provider.getNetwork()
if(parseInt(chainId) != ChainParams.ChainId){
console.log("链不对")
this.switchChainId()
return null;
} else {
this.address = await this.signer.getAddress();
console.log("链接成功:address:",this.address)
return this.address
}
}
合约调用前序
本章涉及到金额问题，所以我们得获取一些测试的货币(token)。(每个币每个IP地址只能领取一次)
领取测试币地址: BNB Smart Chain: Faucet
领取教程: 4 种办法获得测试 BNB，你一定需要知道_区块链、_加密先生_InfoQ写作社区 ，这边建议需要领取0.1个BNB和10个BUSD
准备合约调用的三要素:
- 1、合约地址: 我们就使用测试的BUSD地址: 0xeD24FC36d5Ee211Ea25A80239Fb8C4Cfd80f12Ee
- 2、abi，这个类似于服务器提供的api的列表，BUSD的api地址:Binance USD (BUSD) Token Tracker | BscScan 拉到下面找到Contract ABI，点击右边的复制按钮:
复制后，在creatro新建ABI.ts，做为常量保存起来，这里命名为TOKEN - 3、读合约使用provider(免费读)，写合约使用signer(需要燃料费TBNB)
Creator调用合约
合约的函数来源请先了解ethers的官方文档: Signers
第一步我们先读取主币(tBNB)的余额，和代币(BUSD)的余额
新建按钮，加回调
async onClickReadBalance(){
//主币
var mainBal = await EthersUtils.signer.getBalance()
this.myblanace.string = "tBNB主币余额: "+ethers.utils.formatUnits(mainBal,18);
// 代币
/**
* new ethers.Contract 三个入参分别为
* 1、合约地址，当前使用BUSD地址
* 2、用前面复制下来的abi
* 3、因为是读取所以直接使用公钥 provider
*/
var contract = new ethers.Contract(EthersUtils.ChainParams.Token_BUSDAddress,ABI.Token,EthersUtils.provider);
var bal = await contract.balanceOf(EthersUtils.address);
this.myblanace.string += "\nBUSD: "+ ethers.utils.formatUnits(bal,18);
}
正常读取后的余额，我的BUSD是0.0，是没有去免费领取。
为什么是0.0而不是0？那是因为返回的都是bignumber，转过来是string，如果要显示number，需要parseFloat
BUSD转账
如果上一步走通了，那么转账就非常简单了，直接用私钥调用transfer即可
async onClickTransfer(){
//跟上面不一样的是，要使用私钥 EthersUtils.signer
var contract = new ethers.Contract(EthersUtils.ChainParams.Token_BUSDAddress,ABI.Token,EthersUtils.signer);
//这里要特别注意单位，一般的代币小数位都是18位，所以我们得把0.1转为18位小数的bignumber
var v1 = await contract.transfer(this.transferAddress.string,ethers.utils.parseUnits("0.1",18));
//操作完成 等待服务器同步完成
var result = await v1.wait(2);
console.log("转账完成:",result)
}
触发函数时metamask会弹出一个确认框
这里因为我没有领取测试的BUSD，所以用的另外一个叫TUSD的币测试的。点击确认后约等10多秒即可完成转账。
- 怎么查看这笔转账？
成功后打开metamask这个界面
点击这条转账，然后点击后续界面上的在"区块浏览器上查看"即可
