初始化钱包
喜欢哪个装哪个，我呢，一直用的都是OKX，所以这里也是推荐下哈OKX
创建项目
在上小节中已经初始化过vue项目了，但是本着每一个小节只做自己的事情（那句话怎么讲的，啊，你一个开发，设计的东西不知道啥叫最小化原则啊，牛皮～），我还是乖乖的自己在建立一个项目吧
- 初始化项目
mkdir s1 && cd s1
vue init webpack .
- 将有关钱包代码写在欢迎文件中
<template>
<div>
<h1>{{ msg }}</h1>
<button :hidden="!displayButton" type="button" @click="connectEthereum" class="connectEthereumButton">Connect to
Ethereum {{ displayButton }}</button>
</div>
</template>
<script>
// 全局变量，用来隐藏/展示钱包授权按钮
let displayButton = true
let accounts = [];
onload = async () => {
// 判断浏览器是否安装了okx钱包插件，如果安装了，我的意思是就把按钮显示出来
if (typeof window.okxwallet !== 'undefined') {
console.log('OKX is installed!');
displayButton = true;
getChainId();
// 以下两种监听公链变更的方式都正常生效哈
window.ethereum.on('chainChanged', (chainId) => {
console.log('window.ethereum', chainId)
});
okxwallet.on('chainChanged', (chainId) => {
console.log('okxwallet', chainId)
})
} else {
console.log('OKX is not installed!');
}
}
// 同步获取公链ID
async function getChainId() {
try {
const chainId = await okxwallet.request({ method: 'eth_chainId' });
console.log(chainId)
} catch(error) {
console.log(error)
}
}
// 暂时未用到，没看出来哪里有问题
async function handleChainChanged() {
// window.location.reload();
// getChainId();
}
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
, displayButton: displayButton
}
},
methods: {
getAccount: async function() {
try {
// 连接钱包，并返回钱包地址（这个地址是个数组，数组中的元素是最近一次的钱包授权地址）
accounts = await okxwallet.request({ method: 'eth_requestAccounts' });
console.log(accounts)
} catch(error) {
console.log(error)
}
},
connectEthereum: function () {
const connectEthereumButton = document.querySelector('.connectEthereumButton');
connectEthereumButton.addEventListener('click', () => {
// Will Start the OKX extension
this.getAccount()
// 新增账户变更监听，当切换账户的时候，就会触发此函数
okxwallet.on('accountsChanged', (accounts) => {
console.log('accountsChanged', accounts)
this.getAccount()
})
});
}
}
}
</script>
