PolkadotJS 开发教程 – 实现 Substrate 画

本文通过给 Substrate 画布应用实现前端界面，具体讲解使用 PolkadotJS 发送交易的方法

Substrate 画布应用通过system.remark交易，每次发送交易会被解析成画布上特定坐标的一个像素点，类似之前EOS上很火的 PixelMaster的极简版。

Screen Shot 2020-03-30 at 13.45.52

启动本地配置 Substrate 2.0 node template 以及画布应用

具体方法查看：
http://blog.boka.network/2020/02/29/subtrate-xue-xi-bi-ji-ben-de-pei-zhi-substrate-20/

测试钱包配置

安装以下插件版本（为保持与 Node 的PolkadotJS 一致，必须使用该版本的插件）
http://medishares-cn.oss-cn-hangzhou.aliyuncs.com/extension/mathwalletplus-v2.1.2.zip

按照下文完成插件钱包配置，并创建一个测试钱包
http://blog.boka.network/2020/03/30/polkadotjs-kai-fa-jiao-cheng-ce-shi-cha-jian-qian/

打开 http://app2.substrate.cc/#/accounts
从默认的 Alice 账号，转100个Token到测试钱包

安装第三方库

下载
https://github.com/ericfish/Substrate-Dev-Book

进入目录 01-remarks-ui

使用下面的命令安装第三方库依赖

npm install

完成交易的js方法

index.js 中首先导入与API和插件交互的对象

const { ApiPromise, WsProvider } = require('@polkadot/api');
import {
    isWeb3Injected,
    web3Accounts,
    web3Enable,
    web3FromAddress
} from "@polkadot/extension-dapp";
web3Enable('polkadot-js/apps');

然后在 index.js 中编写了 login, transfer, remark 三个方法，分别完成登录、转账和发送 system.remark 交易

使用下面的命令进行编译

npm run webpack

完成前端界面

index.html 中分别测试了登录和转账操作

remark.html 中完成了坐标输入、颜色拾取，和发起 remark 交易

测试

访问 http://localhost:8888/index.html
即可测试登录和调用插件钱包进行转账签名

访问 http://localhost:8888/remark.html
即可测试在画布上输出指定颜色的像素点