Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

6-5 Browser web3 terhubung ke blockchain (memanggil kontrak baca-tulis untuk terhubung dengan metamask)

Berikut interaksi antara browser dan kontrak pintar

Dua perpustakaan

Web3
Kontrak truffle //truffle hanya membungkus kontrak front-end di tautan, yang lebih mudah digunakan.

datangproyek reaksidi direktori root (dibuat di Bab 1),

Buat ulang proyek reaksi di sini
https://blog.csdn.net/u012118993/artikel/detail/87288516
reactBuat proyek baruGunakan aplikasi creat-react untuk membuat proyek reaksi dengan cepat

（1）npm install -g create-react-app Instalasi global (instal keseluruhan)

（2）create-react-app reactproject Buat proyek reaksi baru dan beri nama (catatan: nama proyek tidak boleh menggunakan huruf kapital)

（3）cd reactproject Masuk ke folder melalui perintah dan bersiap untuk menjalankan proyek

（4）npm start Jalankan proyek

E:trufflewoniu-pet-shop
1

Dibuat di direktori truffle

Instal file berikut di bawah proyek reaksi
Instal web3 (instal ke folder di bawah)

npm install web3 --save
1

Kemudian instal kontrak truffle

npm install truffle-contract --save
1

Demo selesai

1. Tautan kontrak
2. Melaksanakan fungsi internal kontrak
3. Tambahkan dukungan perpustakaan ant.design ui
4. Selesaikan proyek

catatan baru

Konten di App.js
sebagai berikut

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件





class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
		}
	}

	render(){
		return <button></button>//hello,{this.state.name}
	}
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Jika plugin metamask diinstal di browser

Variabel global memiliki nilai di browser

Metamask dapat dihubungkan secara manual atau otomatis

Mulai skrip. Sebelumnya web3 tidak terdefinisi di konsol browser karena saat ini halaman web kosong

Mulailah di petshop yang dibangun oleh proyek reaksi

Npm start
1

Buka di browser
http://host lokal:3000/

efek video

Video untuk menginstal paket baru

Saya mendapat kesalahan karena fungsi init tidak disimpan.

Efek sebenarnya setelah sukses adalah sebagai berikut:

baru bergabung

init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
			this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		}else{
			alert('请按照metamask')
		}
	}
1
2
3
4
5
6
7
8

Setelah menyimpan kode yang diubah, akses jaringan lagi tanpa menutup dan npm mulai ulang

Segarkan sekarang
Tentu saja, tidak ada jendela pop-up saat ini. Akan ada jendela pop-up setelah menghapus dompet metamask.

Saat ini, gunakan browser chrome tanpa dompet untuk mengakses

Jendela pop-up muncul, namun beberapa karakter kacau

Tambahkan kode lagi

Semua kode adalah sebagai berikut

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件

//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
			this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		}else{
			alert('please install metamask')
		}
		
		this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来
		this.initAdoption()

	}

	initAdoption(){
		this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数
		this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约
		return this.markAdopted()
	}
	
	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
	//this.markAdopted(){
		//部署链接一下
	//	const adoptionInstance = this.Adoption.deployed().then()	

	//}

	async markAdopted(){
		//部署链接一下
		//await同步方式获取异步数据
		const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
		//调用合约内部函数getAdopters
		const adopters = await adoptionInstance.getAdopters.call()
		console.log(adopters)
	}

	render(){
		return <button></button>//hello,{this.state.name}
	}
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

Segarkan antarmuka sebagai berikut

Memperoleh alamat kontrak

Gunakan variabel di atas untuk mendapatkan alamat lokal dan alamat akun default metamask.

https://blog.csdn.net/weixin_41937552/artikel/detail/106990561?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

Alasan kenapa alamat metamask tidak bisa didapatkan disini adalah seperti di atas
https://blog.csdn.net/weixin_39421014/artikel/detail/103323245

Anda dapat mematikan izin privasi metamask terlebih dahulu.
https://www.freesion.com/article/8518937500/
Pengaturan mode privasi dan kode JS yang kompatibel

https://blog.csdn.net/JackieDYH/artikel/detail/115380677?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
Dapatkan informasi akun

Setelah memodifikasi kode, ubah bagian fungsi inisialisasi.

Anda dapat menggunakan metamask untuk menautkan ke situs web dan mencetak alamat metamask saat ini.

Selanjutnya, lakukan perubahan kode untuk event klik

Mengklik adopsi di sini akan memunculkan kotak pembayaran, karena fungsi tulis perlu dipanggil dan ditulis ke rantai. Tidak perlu mentransfer uang untuk adopsi di sini, tetapi diperlukan biaya penanganan orang tua.

Berhasil memanggil fungsi yang perlu ditulis ke blockchain secara lokal (sebagai berikut ketika tombol diklik)

Seluruh kode yang akhirnya berhasil dijalankan adalah sebagai berikut:

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件

//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	async init(){
		//如果网页中的web3不是undefined
		//if(typeof window.web3 != 'undefined'){
		//	this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		//}else{
		//	alert('please install metamask')
		//}
		
		//this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来
		//this.initAdoption()
		
		/* 新版的方式 */
	  //var web3Provider;
	  if (window.ethereum) {
		this.web3Provider = window.ethereum;
		try {
		  // 请求用户授权
		  await window.ethereum.enable();
		} catch (error) {
		  // 用户不授权时
		  console.error("User denied account access")
		}
	  } else if (window.web3) {   // 老版 MetaMask Legacy dapp browsers...
		this.web3Provider = window.web3.currentProvider;
	  } else {
		this.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
	  }
	  this.web3 = new Web3(this.web3Provider);//web3js就是你需要的web3实例
	  

	  this.web3.eth.getAccounts(function (error, result) {
		if (!error)
		  console.log(result)//授权成功后result能正常获取到账号了
		  //this.account = result
	  });
	  //this.account =result
	  //this.account =account
	  this.initAdoption()
	}

	initAdoption(){
		this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数
		this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约
		return this.markAdopted()
	}
	
	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
	//this.markAdopted(){
		//部署链接一下
	//	const adoptionInstance = this.Adoption.deployed().then()	

	//}

	async markAdopted(){
		//部署链接一下
		//await同步方式获取异步数据
		const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
		//调用合约内部函数getAdopters
		const adopters = await adoptionInstance.getAdopters.call()
		console.log(adopters)
	}
	
	async adopt(petId){
		//const account = window.web3.eth.defaultAccount		//获取metamask中默认的账户
		// 授权获取账户
	    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const myAccount = accounts[0];	//获取当前metamask的地址

		const adoptionInstance = await this.Adoption.deployed()		//再次进行部署
		await adoptionInstance.adopt(petId,{from:myAccount})	//调用adopt只传递唯一一个参数，以及来源之前获取的地址，进行写入函数
		this.markAdopted()
	}

	render(){
		//onclick点击事件，调用领养函数
		return <button onClick={()=>this.adopt(2)}>领养第二个</button>//hello,{this.state.name}
	}
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

Semua fungsi telah berhasil dijalankan, termasuk fungsi membaca dan menulis.

Kode ini masih memiliki beberapa kekurangan. Jika transaksi gagal, kesalahan akan dilaporkan, dan halaman juga akan melaporkan kesalahan.
Bila sudah klik tolak atau langsung keluar

Langkah selanjutnya adalah mempercantik UI