无法在 metamask 移动浏览器中加载 dapp
Posted
技术标签:
【中文标题】无法在 metamask 移动浏览器中加载 dapp【英文标题】：Cant load dapp in metamask mobile browser 【发布时间】：2021-03-16 10:24:10 【问题描述】：我创建了小型以太坊 dapp。这是完美的网络浏览器。
http://slenex.com/slenwallet/
但同样是在手机浏览器中加载但不与手机钱包交互
所以我在 metamask 浏览器中尝试了，但应用没有加载。
这是我的代码：
我必须做些什么才能在移动元掩码浏览器中工作吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.2.11/web3.min.js" integrity="sha512-6lf28FmolQdo4ap44cXw7j+thYEZzS1/kXxDkX1ppO//SHCageBS1HmYdqkkL819WfGtQ+7TE+uXEwsxjJXEKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body class="container">
<h2 class="row col-lg-12" >PAY ETHER USING WALLET THROUGH SMART CONTRACT</h2><div>
<div class="form-group row col-lg-12">
<input class="col-lg-2 form-control" id="pay" type="text" placeholder="Ether to transfer"/>
<button class="col-lg-1 btn btn-success" id="paySm">Pay</button></div>
<div class="alert alert-success success" role="alert"></div>
</div><hr/>
<h3 class="row col-lg-12" >TRANSFER ETHER</h3><div>
<div class="form-group row col-lg-12">
<input class="col-lg-4 form-control" id="addr" type="text" placeholder="Address"/>
<input class="col-lg-2 form-control" id="amt" type="text" placeholder="Ether to transfer"/>
<button class="col-lg-1 btn btn-dark" id="transfer">Transfer</button></div>
<div class="alert alert-dark tx-success" role="alert"></div>
</div><hr/>
<h3 class="row col-lg-12" >CONTRACT BALANCE </h3><div>
<div class="form-group row col-lg-12">
<button class="col-lg-2 btn btn-warning" id="getBal">Get Balance</button></div>
<div class="alert alert-warning bal-success"></div>
</div>
</body>
<script>
var instance;
var web3;
$(document).ready(function()
$(".success").hide(); $(".bal-success").hide(); $(".tx-success").hide();
if (typeof web3 !== 'undefined') // alert("web3 detected");
startApp(web3);
function startApp(web3)
window.ethereum.enable();
web3.eth.defaultAccount = web3.eth.accounts[0];
console.log(web3.eth.defaultAccount)
var rinkebyABI= JSON.parse('["inputs":["internalType":"address payable","name":"addr1","type":"address","internalType":"uint256","name":"amount","type":"uint256"],"name":"fundtransfer","outputs":[],"stateMutability":"nonpayable","type":"function","inputs":[],"name":"payMe","outputs":["internalType":"bool","name":"success","type":"bool"],"stateMutability":"payable","type":"function","inputs":[],"name":"balance","outputs":["internalType":"uint256","name":"","type":"uint256"],"stateMutability":"view","type":"function"]');
EtherContract = web3.eth.contract(rinkebyABI);
var rinkebyInstance = EtherContract.at('0xbB0592720Ed6116dfcda973099E4b484E8D616eB');
// var localABI= JSON.parse('[ "constant":false,"inputs":["name":"addr1","type":"address","name":"amount","type":"uint256"], "name":"fundtransfer","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function","constant":false, "inputs":[],"name":"payMe","outputs":["name":"success","type":"bool"],"payable":true,"stateMutability":"payable", "type":"function","constant":true,"inputs":[],"name":"balance","outputs":["name":"","type":"uint256"],"payable": false,"stateMutability":"view","type":"function"]');
// EtherContract = web3.eth.contract(localABI);
// localInstance = EtherContract.at('0xf40D39645F676367D53819537f449A3228c13D5e');
instance = rinkebyInstance;
)
$(document).on("click", "#paySm", function()
var amt = $("#pay").val();
var wei = parseInt(amt)*1e18;
console.log("Amt: "+ amt);
console.log("Default Account: "+ web3.eth.defaultAccount);
console.log("Wei: "+ wei);
instance.payMe(from: web3.eth.defaultAccount, value: wei,
function(err, transactionHash)
if (!err) console.log("Hash: "+ transactionHash);
$(".success").text("Paid " + amt + " ether to contract");
$(".success").show();
)
);
$(document).on("click", "#transfer", function()
var addr = $("#addr").val();
var amt = $("#amt").val();
var wei = parseInt(amt)*1e18;
console.log("To Address: "+ addr);
console.log("Wei: "+ wei);
instance.fundtransfer(addr,wei,from: web3.eth.defaultAccount,
function(err, transactionHash)
if (!err) console.log(transactionHash);
$(".tx-success").text("Paid " + amt + " ether to " + addr + " Address" );
$(".tx-success").show();
)
);
$(document).on("click", "#getBal", function()
instance.balance(from: web3.eth.defaultAccount, function(err, balance)
if (!err) console.log(balance);
$(".bal-success").text("Available balance in contract: " + balance/1e18 + " Ether");
$(".bal-success").show();
)
);
</script>
</html>
请帮助我。提前谢谢..
【问题讨论】：
【参考方案1】：Metamask 移动应用要求网站具有有效的 ssl 证书。因此，请确保在访问您的 dapp 时使用 https:// 而不是 http://。请参考您的特定服务器配置以启用https://。
【讨论】：
以上是关于无法在 metamask 移动浏览器中加载 dapp的主要内容，如果未能解决你的问题，请参考以下文章
使用 <picture> 元素防止在移动浏览器中加载标题背景图像
使用 react、webpack 和 express 无法在浏览器中加载图像
JS 有时无法在 Chrome 和其他浏览器中加载 [重复]