Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Analyse der EOS-Blockchain-Grapefruit-Wallet-Front-End-Plugin-Scatter-Entwicklung (Teilen)

奋力向前
Freigeben: 2021-09-14 11:35:52
nach vorne
2584 Leute haben es durchsucht

Im vorherigen Artikel „Ein Trick, um Ihnen beizubringen, wie Sie Knoten mithilfe von iis in Node.js (mit Code) bereitstellen und ausführen“ habe ich Ihnen vorgestellt, wie Sie iis zum Bereitstellen und Ausführen von Knoten verwenden. Der folgende Artikel stellt Ihnen die Entwicklung des EOS-Blockchain-Grapefruit-Wallet-Frontend-Plug-Ins Scatter vor.

Eine kurze Analyse der EOS-Blockchain-Grapefruit-Wallet-Front-End-Plugin-Scatter-Entwicklung (Teilen)

Basierend auf der Installation und Verwendung des Blockchain-EOS-Wallet-Frontend-Plugins

Installation und Verwendung

npm i scatterjs-core scatterjs-plugin-eosjs eosjs -D

//main.js
import ScatterJS from "scatterjs-core";
import ScatterEOS from "scatterjs-plugin-eosjs";
import Eos from "eosjs";
ScatterJS.plugins(new ScatterEOS());
Nach dem Login kopieren

Netzwerkkette

// EOS公链(正式环境)
let main = {
  protocol: "https",
  blockchain: "eos",
  host: "nodes.get-scatter.com",
  port: 443,
  chainId: "aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906",
};

// 测试链 (就是用来测试的)
let jungle2 = {
  protocol: "http",
  blockchain: "eos",
  host: "jungle2.cryptolions.io",
  port: 80,
  chainId: "e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473",
};
Nach dem Login kopieren

Debugging und Konfiguration

Über die Mauer herunterladen < code>scatter Plug-in-Installation. scatter插件安装。

1、打开scatter---setting--network---新建把jungle2的信息填到对应的位置,(取名随便取,jungle2)--保存

2、生成秘钥对,一键生成私钥和公钥

生成秘钥对的地址https://eostea.github.io/eos-generate-key/

3、新建测试账号,需要填入刚才的公钥,账号名是z-a,1-5长度 12 位组合

新建测试账号的地址https://monitor.jungletestnet.io/#account

4、充值,账号建立成功之后莫有钱, 可以先充值 100 块。测试的时候省着点用

充值的地址http://monitor.jungletestnet.io/#faucet

5、测试链上的账号建好之后,打开scatter---身份---新建,选择刚才建立的network => jungle2,然后选择对应的账号。点导入---保存

这样scatter

1. Öffnen Sie scatter---setting--network---new und geben Sie die Informationen von jungle2</ ein. code> Gehen Sie zum entsprechenden Ort (benennen Sie ihn nach Belieben, <code>jungle2) --Speichern

2 Generieren Sie ein geheimes Schlüsselpaar, generieren Sie einen privaten Schlüssel und einen öffentlichen Schlüssel mit einem Klick

The Adresse zum Generieren des geheimen Schlüsselpaars https://eostea.github.io/eos-generate-key/
3 Um ein neues Testkonto zu erstellen, müssen Sie jetzt den öffentlichen Schlüssel eingeben z-a,1-5 12-stellige Kombination

Die Adresse des neuen Testkontos https://monitor.jungletestnet.io/#account

4. Wenn Sie nach erfolgreicher Kontoeröffnung kein Geld mehr haben, können Sie zunächst 100 Yuan aufladen. Sparen Sie beim Testen die Verwendung der
Aufladeadresse http://monitor.jungletestnet.io/#faucet

5 Nachdem das Konto in der Testkette erstellt wurde, öffnen Sie scatter--. -Identität---Neu, wählen Sie das soeben erstellte Netzwerk => Jungle2 und dann das entsprechende Konto aus. Klicken Sie auf „Importieren---Speichern“.

Das scatter-Plug-in ist jetzt konfiguriert. Du kannst dich glücklich weiterentwickeln.

Scatter erstellen

ScatterJS.scatter.connect("app").then((connected) => {
  if (!connected) return false;
  let scatter = ScatterJS.scatter; //这里就是
  window.ScatterJS = null;
  window.scatter = null;
  //通过两种方式拿到eos 对象
  // this.eos = Eos({ httpEndpoint: &#39;&#39;, signatureProvider: ScatterJS.scatter.eosHook(jungle2) });
  this.eos = scatter.eos(jungle2, Eos, { expireInSeconds: 60 });
  //如果授权成功,则可以拿到用户相关信息
  if (scatter.identity) {
    this.account = scatter.identity.accounts.find(
      (x) => x.blockchain === "eos"
    );
  }
});
Nach dem Login kopieren

Autorisierung und Deautorisierung

🎜
//授权
const requiredFields = { accounts: [jungle2] };

scatter
  .getIdentity(requiredFields)
  .then(() => {
    //分别拿到用户信息 和 eos 对象
    this.account = scatter.identity.accounts.find(
      (x) => x.blockchain === "eos"
    );
    this.eos = scatter.eos(jungle2, Eos, { expireInSeconds: 60 }, "https");
  })
  .catch((res) => {});

//退出
scatter.forgetIdentity().then((id) => {
  this.account = null;
  this.eos = null;
});
Nach dem Login kopieren
🎜🎜Transaktionsteil übertragen🎜🎜
//取币种相关信息
let config = {
  account: "xxx", //账号名称
  code: "eosio.token", //合约名称
  symbol: "ETH", //币种
};
eos.getCurrencyBalance(config).then((e) => {
  console.log(e);
});

//取用户相关信息
eos.getAccount({ account_name: "xxx" }).then((res) => {
  // console.log(res)
  let totoal = res.core_liquid_balance; //余额
  let cpu = res.cpu_limit; //CPU
  let net = res.net_limit; //NET
});

//发起转账
// eos.transfer(&#39;发送方帐号&#39;, &#39;接收方帐号&#39;, &#39;0.3000 DEV&#39;,&#39;memo&#39;, options, callback)

eos
  .transfer(account.name, user, `${coin} EOS`, memo, transactionOptions)
  .then((trx) => {
    // That&#39;s it!
    console.log(`Transaction ID: ${trx.transaction_id}`);
    //有transaction_id 就代表转账成功了
  })
  .catch((res) => {});

//还可以使用对象
eos.transfer({
  from: "发送方帐号",
  to: "接收方帐号",
  quantity: "0.1000 DEV",
  memo: "备注",
  callback,
});
Nach dem Login kopieren
🎜🎜Interaktiver Teil🎜🎜🎜
// 获取Table行数据
eosjs.getTableRows({"scope":&#39;合约名字&#39;, "code":&#39;合约名字&#39;, "table":"game", "json": true},callback)

//执行合约上的函数

eos.contract("合约名字").then(actions => {       //actions随便起的变量名
    actions.test(&#39;hello&#39;, {                     //test是方法名, &#39;hello&#39;是该actions合约test方法的参数
    	authorization: [{actor:&#39;lilei&#39;}]           //lilei是建立该合约的用户
    }).then(result => {
        console.log(result);
    });
Nach dem Login kopieren
🎜 🎜Natürlich hat die EOS-API viele Adressen: https:// eos .io/eosio-nodeos/v1.6.0/reference#get_block Aber für das Frontend reicht das oben Gesagte aus, um ein Online-Glücksspiel zu entwickeln. 🎜🎜🎜Für die Ausgabe von Token sind die Bereitstellung von Verträgen, das Abstecken, Bieten, Verkaufen, Kaufen und Erstellen von Konten nicht erforderlich und können an das Backend übertragen werden. 🎜🎜【Ende】🎜🎜🎜Empfohlenes Lernen: 🎜JS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der EOS-Blockchain-Grapefruit-Wallet-Front-End-Plugin-Scatter-Entwicklung (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:chuchur.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage