广东做淘宝的都在哪里网站西瓜创客少儿编程加盟

当前位置： 首页 > news >正文

广东做淘宝的都在哪里网站,西瓜创客少儿编程加盟,十大拿货网站,触屏版网站源码6-5#xff0c;web3浏览器链接区块链#xff08;react区块链实战#xff09; 6-5 web3浏览器链接区块链#xff08;调用读写合约与metamask联动#xff09; 6-5 web3浏览器链接区块链#xff08;调用读写合约与metamask联动#xff09; 这里就是浏览器端和智能合约的交… 6-5web3浏览器链接区块链react区块链实战 6-5 web3浏览器链接区块链调用读写合约与metamask联动 6-5 web3浏览器链接区块链调用读写合约与metamask联动 这里就是浏览器端和智能合约的交互 两个库 Web3 Truffle contract //truffle在链接前端合约简单包了一层比较好用 来到react项目的根目录下在第一章进行了创建
这里重新创建一个react项目 https://blog.csdn.net/u012118993/article/details/87288516 react创建新项目 使用creat-react-app快速新建一个react项目 1npm install -g create-react-app 全局安装安装到整体 2create-react-app reactproject 新建并对react项目进行命名注:项目名称不能有大写 3cd reactproject 通过命令进入文件夹内部准备运行项目 4npm start 运行项目 E:\truffle\woniu-pet-shop在truffle目录下创建
在react的项目下安装下面的文件 安装web3安装到文件夹下面 npm install web3 –save再安装truffle-contract npm install truffle-contract –saveDemo完成 1.链接合约 2.执行一下合约内部函数 3.添加ant.design ui库支持 4.完成项目 注意新的
App.js中的内容 如下 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 nullthis.Adoption nullthis.init()this.state {//name:woniu}}init(){//如果网页中的web3不是undefinedif(typeof window.web3 ! undefined){}}render(){return button/button//hello,{this.state.name}} }export default App如果浏览器中装入了metamask插件 在浏览器中全局变量就有值
可以手动链接metamask也可以自动连接
进行脚本启动之前web3在浏览器控制台undefined是因为空网页此时 在react项目自建的petshop中启动 Npm start在浏览器打开 http://localhost:3000/ 视频效果
视频安装新的包
自己的有报错原因init函数没有保存 实际成功后如下效果 新加入 init(){//如果网页中的web3不是undefinedif(typeof window.web3 ! undefined){this.web3Provider window.web3.currentProvider; //metamask内置了web3的实例实际可以手动链接}else{alert(请按照metamask)}}更改代码保存后再次访问网络无需关闭重新npm start 此时刷新一下 当然这时无弹窗将metamask钱包删掉之后就有弹窗 这时使用chrome没有钱包的浏览器访问
有弹窗出现但是有些乱码了 又加入代码 所有代码如下 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 nullthis.Adoption nullthis.init()this.state {//name:woniu}}init(){//如果网页中的web3不是undefinedif(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()也可以这里用//调用合约内部函数getAdoptersconst adopters await adoptionInstance.getAdopters.call()console.log(adopters)}render(){return button/button//hello,{this.state.name}} }export default App刷新界面如下
获取到合约的address了
使用上方的变量可以获取本地的地址及metamask的默认账号地址了
https://blog.csdn.net/weixin_41937552/article/details/106990561?utm_mediumdistribute.pc_relevant.none-task-blog-baidujs_title-1spm1001.2101.3001.4242 这里无法获得metamask的地址的原因如上 https://blog.csdn.net/weixin_39421014/article/details/103323245 可以先把metamask的隐私权限关闭 https://www.freesion.com/article/8518937500/ 隐私模式的设置与兼容JS代码
https://blog.csdn.net/JackieDYH/article/details/115380677?utm_mediumdistribute.pc_relevant.none-task-blog-baidujs_title-0spm1001.2101.3001.4242 获取账户信息 经过代码的修改后在初始化的函数部分修改 可以使用metamask链接网站了并且能够打印出当前的metamask地址
接下来进行点击事件的代码更改
此处点击领养会弹出框用来支付的因为要调用写入函数写到链上的此处的领养不用转钱但需要父手续费 本地成功调用需要写入区块链的函数当点击按钮时如下
最终成功运行的所有的代码如下 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 nullthis.Adoption nullthis.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 accountthis.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()也可以这里用//调用合约内部函数getAdoptersconst 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已经成功执行所有的函数读取写入函数 此代码还有一些缺陷若交易失败会报错页面也会报错 点击拒绝或者直接退出时 接下来就是美化ui