您的位置：首页 > Web前端 > JavaScript

js原生操作taiweb3js实现简单上链、查询

2020-06-04 07:20 344 查看

泰岳联盟链，提供了一个对外开放的npm包Web3tai.js，该包保留了web3原有接口的情况下，增加了兼容TaiyueChain主网的设置和新的接口。代码陆续开源中… …

地址说明：
npm包：https://www.npmjs.com/package/taiweb3js
TaiWeb3js项目开源代码： https://github.com/taiyuechain/TaiWeb3js

本文目的旨在，让前端开发者了解如何在链上存储或者查询：

代码结构如下：

说明：
index.html 入口执行文件，可以网页直接打开
main.js js执行文件，包含如何完成上链、查询的代码逻辑
abi.js 将Solidity合约编译完成的abi赋值给abi常量，它在main.js中被使用
web3tai.js 保留web3原有接口情况下，增加对TaiyueChain的支持与新接口扩展文件。

了解：
JiaSimple.sol 为本次使用到的Solidity合约源码，在【Stellar】 https://publicstellar.taiyuechain.com/ 上进行编译、部署等，具体如何操作等待后续文章进行更新，本次不做说明。

源码解析：

1、index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<h1>Web3tai使用Demo</h1>
<div>
<label for="set">设置储存内容</label>
<input id="set" type="text" placeholder="输入要上链存储的内容">
<button id="set-button">确认</button>
<span id="set-states"></span>
</div>
<div>
<span onclick="getValue">查看储存内容</span>
<button id="get-button">确认</button>
<span id="get"></span>
</div>
</body>
<script src="./web3tai.js"></script>
<script src="./abi.js"></script>
<script src="./main.js"></script>
</html>

效果截图：

2、abi.js

const abi = [
{
"constant": false,
"inputs": [
{
"name": "_input",
"type": "string"
}
],
"name": "set",
"outputs": [

],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [

],
"name": "get",
"outputs": [
{
"name": "",
"type": "string"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]

3、main.js

'use strict'

// 连接区块链节点，初始化web3对象
const web3 = new Web3tai('https://publicrpc.taiyuechain.com', 'tai')

// 根据合约接口ABI配置和合约地址，初始化智能合约对象
const contractAddress = '请见下面附录1'
const contractObj = new web3.eth.Contract(abi, contractAddress)

// 导入账户，用于支付交易产生的手续费
const privateKey = '请见下面附录2'
const account = web3.eth.accounts.privateKeyToAccount(privateKey)
web3.eth.accounts.wallet.add(account)

async function get () {
// 智能合约的查询方法，不需要指定手续费
return contractObj.methods.get().call()
}

async function set (input) {
// 智能合约的查询方法，需要指定发起地址和手续费相关设置
return contractObj.methods.set(input).send({
from: account.address,
gas: 300000,
gasPrice: 1200000000
})
}

document.querySelector('#set-button').onclick = function setValue () {
const input = document.querySelector('#set').value
const stateBox = document.querySelector('#set-states')
stateBox.innerHTML = '发送中...'
set(input).then(res => {
console.log(res)
stateBox.innerHTML = '上链完成'
})
}

document.querySelector('#get-button').onclick = function getValue () {
const getBox = document.querySelector('#get')
get().then(res => {
console.log(res)
getBox.innerHTML = res
})
}

附录：
1、初始化合约时，需要传递合约地址，该合约地址是通过有Tai币的账户在泰岳链的 Stellar部署（https://publicstellar.taiyuechain.com/）生成的。
2、对于账户的申请，可以去泰岳链对应的开发者平台（https://publicdev.taiyuechain.com/）操作。

Stellar截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航