版本
"vue": "^3.2.45",
"vite": "^4.0.0",
"@walletconnect/client": "^1.8.0",
"@walletconnect/qrcode-modal": "^1.8.0",
"vite-plugin-compression": "^0.5.1",
在main.ts中加入
// 目的是兼容vite,不然会一下报错,webpack不会出现
// global is not defined
// buffer is not defined
// util is not defined
// exports is not defined
import "walletconnect-vite-patch"
在vite.config.ts修改配置
define: {
globals: {
// 这个是解决打开walletconnect不会提示ws错误
globalThis: 'globalThis',
},
},
build: {
rollupOptions: {
output: {
globals: {
// 这个是解决打包问题
globalThis: 'globalThis',
},
}
}
},
使用walletconnect
import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";
let connector = new WalletConnect({
bridge: "https://bridge.walletconnect.org", // Required
qrcodeModal: QRCodeModal,
})
// Events: connect, disconnect, session_request, session_update, call_request, wc_sessionRequest, wc_sessionUpdate
// Subscribe to connection events
connector.on("connect", (error, payload) => {
// 链接
if (error) {
throw error;
}
// Get provided accounts and chainId
console.log('connect')
console.log(payload)
// address = ...
// Tip localstorage will add walletconnect
});
connector.on("session_update", (error, payload) => {
// 更新
if (error) {
throw error;
}
// Get updated accounts and chainId
console.log('session_update')
console.log(payload)
});
connector.on("session_request", (error, payload) => {
// 请求
if (error) {
throw error;
}
// Get updated accounts and chainId
console.log('session_request')
console.log(payload)
});
connector.on("wc_sessionRequest", (error, payload) => {
if (error) {
throw error;
}
// Get updated accounts and chainId
console.log('wc_sessionRequest')
console.log(payload)
});
connector.on("wc_sessionUpdate", (error, payload) => {
if (error) {
throw error;
}
// Get updated accounts and chainId
console.log('wc_sessionUpdate')
console.log(payload)
});
connector.on("call_request", (error, payload) => {
if (error) {
throw error;
}
// Get updated accounts and chainId
console.log('call_request')
console.log(payload)
});
connector.on("disconnect", (error, payload) => {
// 断开
if (error) {
throw error;
}
// Delete connector
console.log('Delete connector')
console.log(payload)
});
// 触发链接
connector.createSession()
注意:要想测试在手机浏览器链接钱包功能,需要正确上网和在https下才能实现