這里分享下相關(guān)文檔
1.web3.js中文文檔 https://learnblockchain.cn/docs/web3.js/getting-started.html
2.metamask官方文檔：https://docs.metamask.io/
第一種方法:連接錢包
// 參考網(wǎng)址:https://blog.csdn.net/cjy_win/article/details/117248919?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&utm_relevant_index=2
// 1.先確認自己的瀏覽器安裝了metaMask插件,建議谷歌瀏覽器
// 2.Vue項目安裝web3.js,使用npm安裝web3js依賴
//在vue中安裝web3
npm install web3 --save
//在main.js引入
import Web3 from 'web3'
Vue.prototype.Web3 = Web3
自己創(chuàng)建一個getWeb3.js文件把下面代碼放入里面,需要用到的頁面直接引入即可
import Web3 from "web3";
const getWeb3 = () =>
new Promise((resolve, reject) => {
// Wait for loading completion to avoid race conditions with web3 injection timing.
window.addEventListener("load", async () => {
// Modern dapp browsers...
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
try {
// Request account access if needed
await window.ethereum.enable();
// Acccounts now exposed
resolve(web3);
} catch (error) {
reject(error);
}
}
// Legacy dapp browsers...
else if (window.web3) {
// Use Mist/MetaMask's provider.
const web3 = window.web3;
console.log("Injected web3 detected.");
resolve(web3);
}
// Fallback to localhost; use dev console port by default...
else {
const provider = new Web3.providers.HttpProvider(
"http://127.0.0.1:9545"
);
const web3 = new Web3(provider);
console.log("No web3 instance injected, using Local web3.");
resolve(web3);
}
});
});
export default {
getWeb3
};
3.上面是一個js方法,根據(jù)當(dāng)前頁面來初始化web3對象,在對應(yīng)頁面 通過 const Web3= require('../common/getWeb3') 引入,然后通過下面方法使用
注意:加web3前面必須有window : window.web3
Web3.default.getWeb3().then((res) => {
window.web3 = res;
console.log("getWeb3", res);
});
源碼：
<template>
<div>
<button @click="get()">連接錢包</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {},
methods: {
get() {
// web3前面必須有window
const Web3 = require("../common/getWeb3");
Web3.default.getWeb3().then((res) => {
window.web3 = res;
console.log("getWeb3", res);
});
}
},
};
</script>
第二種方法: 連接錢包 安裝依賴直接可以使用
參考網(wǎng)址:https://blog.csdn.net/qq_16137795/article/details/120239103?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-120239103.pc_agg_new_rank&utm_term=web3+%E8%B0%83%E7%94%A8MetaMask%E9%92%B1%E5%8C%85%E8%BD%AC%E8%B4%A6eth&spm=1000.2123.3001.4430
// 1.先確認自己的瀏覽器安裝了metaMask插件,建議谷歌瀏覽器
// 2.Vue項目安裝web3.js,使用npm安裝web3js依賴
//在vue中安裝web3
npm install web3 --save
//在main.js引入
import Web3 from 'web3'
Vue.prototype.Web3 = Web3
注意:ethereum 和 web3 前必須有window: window.ethereum window.web3
if (window.ethereum) {
window.ethereum.enable().then((res) => {
alert("當(dāng)前錢包地址:" + res[0]);
});
} else {
alert("請安裝MetaMask錢包");
}
源碼：
<template>
<div class="home">
<button @click="get">連接錢包</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {},
methods: {
get() {
if (window.ethereum) {
window.ethereum.enable().then((res) => {
alert("當(dāng)前錢包地址:" + res[0]);
});
} else {
alert("請安裝MetaMask錢包");
}
},
},
};
</script>
其他功能:
1、在 mounted 中自動檢測瀏覽器是否安裝MetaMask錢包
mounted () {
if (window.ethereum) {
window.ethereum.enable().then((res) => {
//alert("當(dāng)前錢包地址："+res[0])
})
}else{
alert("請安裝MetaMask錢包")
}
}
2、查詢錢包ETH余額
let web3 = new Web3(window.web3.currentProvider)
let fromAddress = web3.eth.accounts[0];
web3.eth.getBalance(fromAddress,(err, res) => {
if (!err) {
console.log("ETH余額==",res.toNumber()/Math.pow(10,18));
}
})
3、查詢代幣余額
let web3 = new Web3(window.web3.currentProvider)
let fromAddress = web3.eth.accounts[0];
let ethContract = web3.eth.contract("代幣合約Abi")
let functionInstance = ethContract.at("代幣合約地址")
functionInstance.balanceOf(fromAddress,(err, res) => {
if (!err) {
//代幣精度根據(jù)所發(fā)行的代幣合約精度換算
console.log("代幣余額==",res.toNumber()/Math.pow(10,18));
}
})
4、ETH轉(zhuǎn)賬
let web3 = new Web3(window.web3.currentProvider)
let fromAddress = web3.eth.accounts[0];
//轉(zhuǎn)賬數(shù)量
let amount = 1*Math.pow(10,18);
//收款地址
let toAddress = "0x40141cF4756A72DF8D8f81c1E0c2ad403C127b9E";
web3.eth.sendTransaction({
gas: 21000,
gasPrice: 5000000000,
from: fromAddress,
to: toAddress,
value: amount
}, (err, result) => {
console.log("轉(zhuǎn)賬Hash=",result)
})
5、代幣轉(zhuǎn)賬
let web3 = new Web3(window.web3.currentProvider)
let ethContract = web3.eth.contract("代幣Abi")
let functionInstance = ethContract.at("代幣地址")
//當(dāng)前錢包地址
let fromAddress = web3.eth.accounts[0];
//轉(zhuǎn)賬數(shù)量
let amount = 100*Math.pow(10,18);
//接收地址
let toAddress = "0x40141cF4756A72DF8D8f81c1E0c2ad403C127b9E";
functionInstance.transfer(toAddress,amount,{
gas: 21000,
gasPrice: 5000000000,
from: fromAddress
}, (err, result) => {
console.log("轉(zhuǎn)賬Hash:",result)
})
6、代幣授權(quán)
let web3 = new Web3(window.web3.currentProvider)
let abiContract = web3.eth.contract("代幣合約Abi")
let contractInstance = abiContract.at("代幣合約地址")
//當(dāng)前錢包地址
var fromAddress = web3.eth.accounts[0];
//授權(quán)數(shù)量
var amount = 1000 * Math.pow(10,18);
contractInstance.approve("授權(quán)地址",amount,{
gas: 80000,
gasPrice: 1500000000,
from: fromAddress
}, (err, result) => {
console.log("交易Hash：",result)
})
7、查詢授權(quán)數(shù)量文章來源：http://www.zghlxwxcb.cn/news/detail-508566.html
let web3 = new Web3(window.web3.currentProvider)
let abiContract = web3.eth.contract("代幣合約Abi")
let contractInstance = abiContract.at("代幣合約地址")
contractInstance.allowance("授權(quán)的用戶錢包地址","授權(quán)的地址",(err, res) => {
if (!err) {
console.log("授權(quán)數(shù)量==",res.toNumber());
}
})
8、查詢?nèi)ブ行幕灰姿鵏P地址數(shù)量 計算價格文章來源地址http://www.zghlxwxcb.cn/news/detail-508566.html
let web3 = new Web3(window.web3.currentProvider)
let ethContract = web3.eth.contract("LP合約Abi")
let functionInstance = ethContract.at("LP合約地址")
functionInstance.getReserves((err, res) => {
if (!err) {
// 代幣數(shù)量1 res[0].toNumber()
// 代幣數(shù)量2 res[1].toNumber()
//根據(jù)先后順序 2個相除可以得到價格
}
})
到了這里，關(guān)于前端Vue項目調(diào)用頁面web3.js:連接metaMask錢包,(查詢錢包ETH余額,查詢代幣余額,ETH轉(zhuǎn)賬,代幣轉(zhuǎn)賬,代幣授權(quán),查詢授權(quán)數(shù)量,計算價格)等功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
