孤荷凌寒自学第134天
区块链第47天，Dapp002
【主要内容】
今天继续学习实战，做一个真正的依托于智能合约的DAPP。今天继续学习直接使用Js代码与metaMask钱包来互动完成合约的访问。共耗时30分钟。
（此外整理作笔记花费了约76分钟）
详细学习过程见文末学习过程屏幕录像。
继续参照学习的博文是：
https://www.ucloud.cn/yun/24154.html
提供有效帮助的博文是：
https://www.jianshu.com/p/15ff9da4dd8d
https://www.cnblogs.com/wanghui-garcia/p/9681984.html
https://www.jianshu.com/p/7fabac559eca
【web3.min.js中的web3对象连接并实现访问一个智能合约的方法】
1.多数教程教导的方法是：
```
//多数地方使用了new关键字：
cc =new web3.eth.contract(cryptozombiesABI, cryptoZombiesAddress);
//在有些版本中，不需要使用new关键字，具体完全没有弄明白
cc = web3.eth.contract(cryptozombiesABI, cryptoZombiesAddress);
```
但经昨天与今天的研究发现，这样也许没有连接上合约，并获取合约对象（当然没有报错，我不确定是否成功，但一调用合约内的方法就报这个方法不存在（详细见我的学习过程录屏））
根据这样说明的博文的上下文，发现在本地搭建了完整的Node.js等环境的文章这样的写法比较多。
2.分开连接之使用at关键字连接到合约节点地址
```
var ccc=web3.eth.contract(cryptozombiesABI); cc=ccc.at("0xf89074dcdd8798b7e20b8cd88a9a38f27479411c");
```
这是今天成功测试的连接方法 ，第二步连接的是合约所在的节点所在的地址 。
目前证实这是正确有效的写法。
3.分开连接之使用.options.address
```
myContract.options.address = ‘0x1234FFDD…’;
来自：
https://blog.csdn.net/u012310362/article/details/83048165
```
但我现在没有明确理解，这是否真的是在指定合约地址，还恳请高手指点。
这种写法未经验证。
【调用合约对象中的方法的写法】
1.多数文章是这样的写的：
```
cc.methods.allowance(owneradd,spenderadd).call();
```
上的的对象cc就是一个智能合约对象。
即是说：
合约对象.methods.方法名称(传入此方法需要的实参)
但之前的测试均证明，总是报告找不到要调用的方法的错误。
2.不使用methods方法，而是直接在合约对象后以点语法调用方法名称
（1）不加回调函数的写法：
```
cc. allowance(owneradd,spenderadd).call();
```
直接报错：
```
Error: The MetaMask Web3 object does not support synchronous methods like eth_call without a callback parameter.
```
(2)部分文章写的加上回调函数的写法，今天测试还是失败：
```
cc.allowance(owneradd,spenderadd).call({from:web3.eth.defaultAccount},function(error, result){
if(!error)
{
//$("#info").html(result[0]+' ('+result[1]+' years old)');
alert(result);
}
else{
alert(error);
}});
return "ok"
}catch(err){
return '在尝试调用合约的查询授权节点可用余额时出错 ：' + err;
}
```
报错原因同上。
（3）后来通过试错法，使用下面的写法，受代码中注明的博文提示：
```
cc.allowance(owneradd,spenderadd,function(error, result){ //https://www.jianshu.com/p/15ff9da4dd8d
if(!error)
{
//$("#info").html(result[0]+' ('+result[1]+' years old)');
alert(result);
}
else{
alert(error);
}});
```
这次测试成功，通过异步调用回调函数的方法，收到了返回的值。
但我还没有理解——为什么智能合约中的方法函数【allowance】中只有两个形参，则只需要传入两个实参，但在上面这种写法中，却将回调函数硬作为第三个实参传入其中。
在此恳请高手指点迷津，不胜感激。
【今天最终完成的Html文件内容】
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CryptoZombies front-end</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="web3.min.js"></script>
<!-- 1. Include cryptozombies_abi.js here -->
<script language="javascript" type="text/javascript" src="cryptozombies_abi.js"></script>
<script>
//声明一些钱包地址：
//下面一行定义的是部署合约的节点（创世节点）的信息，公钥
var wallet_address="0x5227C3EF48B5A1bcF784593e46D9579D26a3b592"; //狐狸钱包的公钥，就是钱包地址，是eth网络上的一个节点。
//下面一行定义的是节点2的信息
var w2add="0xe2d6c2f289c53B5aEA44C47293Ba179a3bfa21f0"; //公钥
//下面一行定义的是节点3 的信息
var w3add="0xb40599fB0366DCf0ffe86677b005b3f20Dfa29aE"; //公钥
//下面一行定义的是节点4 的信息
var w4add="0x70c8461366d5368B1E79CBFc2Acf4ba56C745977"; //公钥
// 2. Start code here
var cc;
var web3;
function startApp() {
try {
var cryptoZombiesAddress = "0xf89074dcdd8798b7e20b8cd88a9a38f27479411c"; //要连接的合约地址
var ccc=web3.eth.contract(cryptozombiesABI);
cc=ccc.at("0xf89074dcdd8798b7e20b8cd88a9a38f27479411c"); //https://www.cnblogs.com/tinyxiong/p/9046626.html
//cc =new web3.eth.contract(cryptozombiesABI, cryptoZombiesAddress); //如果是另一个版本可能还得加上new关键字。
alert(typeof cc);
} catch (err) {
alert(err);
}
alert("加载成功");
}
window.addEventListener('load', function() {
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
if (web3.currentProvider.isMetaMask == true) {
$("#env").html("MetaMask可用");
web3.eth.getAccounts(function (err, accounts) {
if (accounts.length == 0) {
$("#account").html("请检查钱包是否解锁");
} else {
$("#account").html("");
startApp();
}
console.log(web3.eth.defaultAccount);
alert(web3.eth.defaultAccount);
});
} else {
$("#env").html("非MetaMask环境");
}
} else {
$("#env").html("No web3? 需要安装<a href='https://metamask.io/'>MetaMask</a>!");
}
});
//----------------下面是自定义的与合约交互的函数-------------------------
//--查询一个节点授权另一个节点可以运用的代币的授权余额数
function getAllowance(owneradd,spenderadd){
try{
//cc.methods.allowance(owneradd,spenderadd).call({from: currentAccount}, function(error, result){
// if(!error) {
// alert(result);
// } else {
// alert(error);
// }
//});
//return "ok";
//return cc.methods.allowance(owneradd,spenderadd).call();
//return cc.methods.balanceOf(owneradd).call();
//return cc.allowance(owneradd,spenderadd).call();
//cc.allowance(owneradd,spenderadd).call({from:web3.eth.defaultAccount},function(error, result){
//上一种写法是错误的，下一行的写法才是对的，而且是异步等待接收结果 ----
cc.allowance(owneradd,spenderadd,function(error, result){ //https://www.jianshu.com/p/15ff9da4dd8d
if(!error)
{
//$("#info").html(result[0]+' ('+result[1]+' years old)');
alert(result);
}
else{
alert(error);
}});
return "ok"
}catch(err){
return '在尝试调用合约的查询授权节点可用余额时出错 ：' + err;
}
}
//--------------------------调用测试---------------------------------------
//--查询节点一向节点二授权的代币余额
function cmdone_click(){
try{
r=getAllowance(wallet_address,w2add);
alert(r);
//getAllowance(wallet_address,w2add)
//.then(function(result) {
// alert("allowbanlanced is: " + JSON.stringify(result));
//});//这儿不管使用then，还是done都报错。
}catch(err){
alert(err)
}
}
</script>
</head>
<body>
<div>
<input type="button" value="查询授权余额" id="cmdone" name="cmdone" onclick="cmdone_click();" />
</div>
</body>
</html>
```
github: https://github.com/lhghroom/Self-learning-blockchain-from-scratch
原文地址：https://www.941xue.com/content.aspx?id=1557
【欢迎大家加入[就是要学]社群】
如今，这个世界的变化与科技的发展就像一个机器猛兽，它跑得越来越快，跑得越来越快，在我们身后追赶着我们。
很多人很早就放弃了成长，也就放弃了继续奔跑，多数人保持终身不变的样子，原地不动，成为那猛兽的肚中餐——当然那也不错，在猛兽的逼迫下，机械的重复着自我感觉还良好地稳定工作与生活——而且多半感觉不到这有什么不正常的地方，因为在猛兽肚子里的是大多数人，就好像大多数人都在一个大坑里，也就感觉不出来这是一个大坑了，反而坑外的世界显得有些不大正常。
为什么我们不要做坑里的大多数人？
因为真正的人生，应当有百万种可能 ；因为真正的一生可以有好多辈子组成，每一辈子都可以做自己喜欢的事情；因为真正的人生，应当有无数种可以选择的权利，而不是总觉得自己别无选择。因为我们要成为一九法则中为数不多的那个一；因为我们要成为自己人生的导演而不是被迫成为别人安排的戏目中的演员。
【请注意】
就是要学社群并不会告诉你怎样一夜暴富！也不会告诉你怎样不经努力就实现梦想！
【请注意】
就是要学社群并没有任何可以应付未来一切变化的独门绝技，也没有值得吹嘘的所谓价值连城的成功学方法论！
【请注意】
社群只会互相帮助，让每个人都看清自己在哪儿，自己是怎样的，重新看见心中的梦想，唤醒各自内心中的那个英雄，然后勇往直前，成为自己想要成为的样子！
期待与你并肩奔赴未来！
QQ群：646854445 （【就是要学】终身成长）
【同步语音笔记】
https://www.ximalaya.com/keji/19103006/331657833
【学习过程屏幕录屏】