DQtech专栏 | 跟Dex学PlatON应用开发–JavaScript篇(一)

《跟Dex学PlatON应用开发系列》分为:钱包篇,智能合约篇以及DApp篇。
钱包篇会分别教会大家用Javascript,Android,Flutter构建钱包.
本系列为Javascript篇, 将教会大家构建一个类似Samurai的浏览器插件钱包。

Javascript篇基于Vue+ElementUI开发的,因此需要大家提前准备好相应的知识。

1, 环境准备

官网虽然提供安装的client-sdk-js的方法。但本着学习的目的,笔者直接拉client-sdk-js的源码编译.(注:笔者的所有操作系统都是在windows10上完成的)。

具体步骤如下:

DQtech专栏 | 跟Dex学PlatON应用开发–JavaScript篇(一)
  • c) 在源码目录打开控制台:
微信图片_20211118194533
  • 在地址栏输入cmd,然后回车如下图:
微信图片_20211118194631
  • 在控制台输入: npm install
微信图片_20211118194739
  • 因为这里安装的东西比较多,需要耐心等待一会。如果输入命令后没有反应的话,可以Ctrl+C中断,再次输入npm install
    安装完毕后会出现如下提示:
微信图片_20211118194816
  • d) 包安装完毕后,继续输入命令 npm run build 编译sdk,如下图:
微信图片_20211118194857
  • 编译完成后,在当前目录下会有一个dist目录:
微信图片_20211118194928
  • 打开会就会发现有如下文件:
微信图片_20211118195007
  • 文件web3.js是没有经过压缩的,我们在开发的时候使用这个文件,web.js.map符号映射文件,用来调试的。web3.min.js是经过压缩后的文件,生产环境使用这个文件。

2, 代码编写

新建一个目录,接着创建一个空index.html文件,把刚才编译好的sdk拷贝到这个目录下,拷贝完成后如下:

微信图片_20211118195521

然后我们用代码编辑器打开index.html文件。笔者这里用的vscode。把index.html代码修改如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>
<body>
    <!-- 因为当前是开发状态,因此使用web3.js -->
    <script src="./web3.js"></script>
    <script>
    </script>
</body>
</html>

下面我们调用获取钱包余额的接口,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>

<body>
    <!-- 因为当前是开发状态,因此使用web3.js -->
    <script src="./web3.js"></script>
    <script>
        // 构建web3对象,这里的网址是PlatON的测试链地址
        let web3 = new Web3(new Web3.providers.HttpProvider('http://35.247.155.162:6789'));

        //笔者在测试链的钱包地址
        let walletAddress = "lat1zrq89dhle45g78mm4j8aq3dq5m2shpu56ggc6e";
        // 获取钱包地址
        web3.platon.getBalance(walletAddress).then(res=>{
            console.log(res);
        });

    </script>
</body>
</html>

双击打开index.html,界面显示如下:

微信图片_20211118195851

说明已经获取到钱包的余额,为了更好的阅读数字,可以把数字转换为LAT。代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>

<body>

    <span id="balance"></span>

    <!-- 因为当前是开发状态,因此使用web3.js -->
    <script src="./web3.js"></script>
    <script>
        // 构建web3对象,这里的网址是PlatON的测试链地址
        let web3 = new Web3(new Web3.providers.HttpProvider('http://35.247.155.162:6789'));

        //笔者在测试链的钱包地址
        let walletAddress = "lat1zrq89dhle45g78mm4j8aq3dq5m2shpu56ggc6e";
        // 获取钱包地址
        web3.platon.getBalance(walletAddress).then(res=>{

            let balanceDom = document.getElementById("balance");
            // 把余额转换为LAT
            balanceDom.innerHTML = web3.utils.fromVon(res, "lat");
        });

    </script>
</body>
</html>

修改后我们再次刷新浏览器,显示如下:

微信图片_20211118202737

为了验证我们获取到的余额是否是正确的,我们可以打开PlatON测试链的浏览器查看当前钱包的余额,地址如下:https://devnetscan.platon.network/
输入要查询的钱包地址,如下图,点击查询.

微信图片_20211118200049
微信图片_20211118200049


看到余额和我们通过代码获取的余额是一致的。

好啦本章内容到此结束啦,下一章我们将会基于Vue开始开发我们的浏览器插件啦。

仓库地址: https://github.com/DQTechnology/Platon_DevGuideProject

本文转载自https://forum.latticex.foundation/t/topic/5803

(1)
上一篇 12月 14, 2021 09:59
下一篇 12月 14, 2021 13:55

相关推荐

发表评论

登录后才能评论