上一篇星云链js通过RPC接口与星云链交互(1)介绍了如果通过js创建一个账户。查询账户信息、发送交易可以查看https://github.com/nebulasio/neb.js 这个demo里的方法,很简单,直接调用就可以了。这篇博客介绍通过js调用自己上传的合约中的方法。
首先下载一个星云提供的一个DappDemo super-dictionary,super-dictionary是一个字典应用,可以根据用户输入,输出一个结果,如果没有对应结果,用户可以自己添加一个结果。
下载完成双击index.html
可以看到
这里需要用Google浏览器打开,并且需要安装星云钱包插件否则会出现
NOTE: Please install WebExtensionWallet to use SUPER DICTIONARY
错误,如下图
要求WebExtensionWallet钱包,下面在Google浏览器中安装它
-
1、下载 WebExtensionWallet
-
2、打开Google浏览器 :->更多工具->扩展程序
-
3、使用
开发者模式
,将刚才下载好的WebExtensionWallet拖拽进来 -
4、添加进来以后是这样
-
5、打开WebExtensionWallet -> 选择测试链,因为super-dictionary部署在测试链上
-
6、新建一个钱包,或者在Send-Tx导入一个钱包,不需要进行交易,点取消就可以,就是为了给WebExtensionWallet导入一个钱包,否则运行demo时会弹出提示框
import Wallet
现在打开index.html
输入“你是谁”,结果是这样的
输入”你在哪”
点add按照提示,选择自己私钥,付钱,等待挖矿交易成功,就可以了
调用合约方法
使用webStorm打开super-dictionary项目,在查看index.html
找到search
按钮点击事件
$("#search").click(function(){
// $("#search_value").val() 搜索框内的值
var to = dappAddress;
var value = "0";
var callFunction = "get";
var callArgs = "[\"" + $("#search_value").val() + "\"]"; //in the form of ["args"]
console.log(callArgs);
nebPay.simulateCall(to, value, callFunction, callArgs, { //使用nebpay的simulateCall接口去执行get查询, 模拟执行.不发送交易,不上链
listener: cbSearch //指定回调函数
});
nebPay.simulateCall
就是我们需要的交互方法
simulateCall: function (to, value, func, args, options)
- to:合约地址
- value: 传”0”就好
- func:要调用的合约中的方法名
- args: 方法传的参数(无参数-“”,有参数-json数组)
- options:一个字典
listener
可以指定回调函数
OK,现在用这个方法调用自己的合约,创建一个简单的demo,demo地址
- 1、将super-dictionary项目中的lib文件夹中所有东西添加到自己的demo中
- 2、上传自己的合约,我的合约是这样的,有一个sum求和方法
'use strict';
//定义一个合约
var TestProtocal = function () {
};
TestProtocal.prototype = {
//合约初始化方法
init:function () {
return "hello world";
},
//无参数的合约方法
printTest:function () {
return "printTest";
},
//一个参数的合约方法
argTest:function (arg) {
return arg;
},
//多个参数合约方法
argTest2:function (arg1, arg2) {
return "arg1:"+arg1+" arg2:"+arg2;
},
sum:function (arg1, arg2) {
return parseInt(arg1)+parseInt(arg2);
}
};
module.exports = TestProtocal;
- 部署合约时要注意部署到哪条链上WebExtensionWallet就选择哪条链,比如我的部署到测试链,WebExtensionWallet就选择测试链,否则找不到合约,返回结果为
undefined
- 我的合约部署在测试链,合约地址
n1jb79jgi44ukKhcs2h6PPZTvZqQASKV6T7
调用合约方法,我就直接上代码了
index.html
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<div style="height: 40px;font-size: 14px; width: 100px;text-align: center;line-height: 40px;border-radius: 20px; background: red ;color:white"
onclick="clickAction()">
无参数printTest
</div>
</div>
<div style="display: flex;margin-top: 40px">
<div style="margin-left: 10px">
arg1:<input style="height: 40px;font-size: 14px; width: 100px;" type="text" id="arg1" >
</div>
<div style="margin-left: 10px">
arg2:<input style="height: 40px;font-size: 14px; width: 100px;" type="text" id="arg2" >
</div>
<div style="height: 40px;font-size: 14px; width: 100px;text-align: center;line-height: 40px;border-radius: 20px; background: red ;color:white"
onclick="clickAction2()">
求和sum
</div>
</div>
<div id="result" style="margin-top: 40px">
运行结果:
</div>
<!--导入与包-->
<script src=lib/jquery-3.3.1.min.js></script>
<script src=lib/nebPay.js></script>
<script src=lib/bootstrap-4.0.0-dist/js/bootstrap.min.js></script>
<script type="text/javascript">
var NebPay = require("nebpay");
var nebPay = new NebPay();
//要调用的合约地址
var dappAddress = "n1jb79jgi44ukKhcs2h6PPZTvZqQASKV6T7";
var to = dappAddress;
var value = "0";
function clickAction(e) {
//要到用的合约方法
var callFunction = "printTest";
//执行合约方法
nebPay.simulateCall(to, value, callFunction, "", {
listener: parseResult //指定回调函数
});
}
function clickAction2(e) {
//要到用的合约方法
var callFunction = "sum";
//字符串转json数组
var callArgs = "[\"" + $("#arg1").val() + "\",\"" + $("#arg2").val() + "\"]"; //in the form of ["args"]
console.log(callArgs);
//执行合约方法
nebPay.simulateCall(to, value, callFunction, callArgs, {
listener: parseResult //指定回调函数
});
}
function parseResult(res) {
var result = res.result;
$("#result").text("运行结果:"+result)
}
</script>
</body>
</html>
代码说明:两个按钮”无参数”按钮,”求和sum”按钮,分别触发clickAction和clickAction2方法,clickAction调用合约中的printTest方法,clickAction2调用合约中的sum方法,合约执行完回调parseResult方法,对返回结果解析,并输出到运行结果的<div>
标签上