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

1、源码文件

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

2、github配置服务

（1）创建仓库

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

（2）填写仓库相关信息

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

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

（3）创建一个测试文件

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

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

（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上的仓库，已经看到上传的文件了，如下图所示：

（5）验证服务

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

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

3、验证Web3功能

（1）解决出现的问题

1）问题描述

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

2）原因

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

3）解决方案

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

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

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

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

 点击“Connect” button

 此时看到状态已变成Connected

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

 （2）验证账户信息

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

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

（此处已调优，未重新截图）

 （3）验证交易

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

需修改：转账单位为Ether，而不是Wei 

（此处已修改，未重新截图）

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

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

 （4）验证合约调用

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

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

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

 

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

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

 

4、遇到的问题

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

解决：科学上网。