星云链js通过RPC接口与星云链交互(2)

上一篇星云链js通过RPC接口与星云链交互(1)介绍了如果通过js创建一个账户。查询账户信息、发送交易可以查看https://github.com/nebulasio/neb.js 这个demo里的方法,很简单,直接调用就可以了。这篇博客介绍通过js调用自己上传的合约中的方法。

首先下载一个星云提供的一个DappDemo super-dictionary,super-dictionary是一个字典应用,可以根据用户输入,输出一个结果,如果没有对应结果,用户可以自己添加一个结果。

下载完成双击index.html可以看到

调用合约1

这里需要用Google浏览器打开,并且需要安装星云钱包插件否则会出现NOTE: Please install WebExtensionWallet to use SUPER DICTIONARY错误,如下图

调用合约4

要求WebExtensionWallet钱包,下面在Google浏览器中安装它

  • 1、下载 WebExtensionWallet

  • 2、打开Google浏览器 :->更多工具->扩展程序

    调用合约5

  • 3、使用开发者模式,将刚才下载好的WebExtensionWallet拖拽进来 调用合约6

  • 4、添加进来以后是这样 调用合约7

  • 5、打开WebExtensionWallet -> 选择测试链,因为super-dictionary部署在测试链上

    调用合约8

  • 6、新建一个钱包,或者在Send-Tx导入一个钱包,不需要进行交易,点取消就可以,就是为了给WebExtensionWallet导入一个钱包,否则运行demo时会弹出提示框 import Wallet

现在打开index.html输入“你是谁”,结果是这样的 调用合约2

输入”你在哪” 调用合约3

点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中

调用合约9

  • 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>标签上

参考资料

DappDemo super-dictionary

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦