Web3js 简单示例展示 - 合约调用,并通过github服务访问

1、源码文件

源码文件已上传至github,可参见:https://github.com/tracyzhang1998/tracyzhang1998.github.io

2、github配置服务

(1)创建仓库

登录github,点击右上角加号“+”,选择New Repository

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第1张图片

(2)填写仓库相关信息

注:要想成为服务,仓库名称必须遵守规则,规则为:自己的用户名.gitbut.io

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第2张图片

点击“Create repository”按钮创建仓库

(3)创建一个测试文件

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第3张图片

填写文件名与文件内容,随便写些,之前删除这个测试文件

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第4张图片

仓库中已存在测试文件,同时默认分支为main(之前一直见的是master)

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第5张图片

(4)本地文件上传至github(即源码文件)

# 同步服务器仓库文件至本地
$ git clone https://github.com/tracyzhang1998/web3js-demo.git

# 进入git管理目录
$ cd web3js-demo

# 拉取服务器文件
$ git pull origin main

# 将源码文件放入目录中,同时删除测试文件,然后执行添加命令,即所有变动的文件都加进来
$ git add .

# 提交
$ git commit -m 'init project'

# 上传至服务器中
$ git push origin main

注:以上如操作遇到问题可参见:Git 使用时遇到的问题汇总(目前6个问题)_ling1998的博客-CSDN博客_使用git遇到的问题

查看github上的仓库,已经看到上传的文件了,如下图所示:

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第6张图片

(5)验证服务

嘿嘿,接下来我们来验证一下在浏览器中是否能访问,输入网址:https://tracyzhang1998.github.io/demo.html

出现页面,如下图所示,验证服务已正常访问,成功啦!!!

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第7张图片

3、验证Web3功能

(1)解决出现的问题

1)问题描述

页面虽然显示成功,但是账户信息没有加载,F12,看下页面报错信息: 

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第8张图片

2)原因

经上分析,是因为MetaMask没有连接此链接导致,如下图所示:

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第9张图片

3)解决方案

因此这点也需要再完善下(当链接还没连接MetaMask时给个提示信息,引导用户操作),完善后再补充该文章。现在我们手动连接一下:

点击浏览器导航中的MetaMask插件,选择一个网络,点击账户右侧三个点,选择"Connected sites"

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第10张图片

点击下方链接“Manually connect to current site”

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第11张图片

 选择要连接网址的账户,点击“Next” button

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第12张图片

 点击“Connect” button

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第13张图片

 此时看到状态已变成Connected

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第14张图片

再次刷新页面,已加载账户信息

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第15张图片

 (2)验证账户信息

输入另外一个账户地址,点击“查询余额”,发现账户余额已变更,且与实际账户余额相等,验证成功

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第16张图片

可调优:账户余额不可修改,因此文本框应置为disabled,不可编辑

(此处已调优,未重新截图)

 (3)验证交易

输入转账金额,点击“转账”按钮,弹出MetaMask,点击“Confirm”

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第17张图片

需修改:转账单位为Ether,而不是Wei 

(此处已修改,未重新截图)

此时生成的交易hash并显示出来了

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第18张图片

交易等待上链,生成新区块后,查看余额,转入账户余额已增加,转出账户余额减少,验证成功

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第19张图片

 (4)验证合约调用

1)调用合约函数 - 设置消息

在查询消息文本框中已看到当前消息为“I will sleep...”,现在来设置一个新的消息,输入“Good morning!”,点击“设置消息”按钮,弹出MetaMask,点击“Confirm”

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第20张图片

 交易生成后,交易Hash显示出来了

 Web3js 简单示例展示 - 合约调用,并通过github服务访问_第21张图片

2)调用合约函数 - 查询消息

交易等待上链,生成新区块后,点击“查看消息”,此时消息已变更为“Good morning!”,验证成功!!!

 Web3js 简单示例展示 - 合约调用,并通过github服务访问_第22张图片

4、遇到的问题

很久之后的某一天再次打开浏览器运行此程序,报错

Web3js 简单示例展示 - 合约调用,并通过github服务访问_第23张图片

解决:科学上网。 

你可能感兴趣的:(智能合约,Git,github,智能合约)