EOS [从零开始 DAPP 开发] 12 - DAPP 前端开发、安装 scatter-js

pendingauth · 2019年07月11日 · 12 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1817635278

上一篇文章中,weiwendappss智能合约已经开发完成,并部署到了Jungle测试网,这篇文章开始进行前端界面的开发。

简化React项目结构

打开之前创建的frontend目录,这是一个使用create-react-app创建的React项目,目录结构如下:

可以看到,React项目结构有如下目录和文件:

  • node_modules目录:保存node依赖的第三方模块,是自动生成的,编程不用管它;

  • public目录:存放外部资源、入口文件(index.html)、移动端配置文件(manifest.json),也不用修改;

  • src目录:我们要编写的代码都保存在这里;

  • package.json:node项目的描述文件,会在这里做一些配置;

  • package-lock.json:可以锁定安装的第三方包的版本号,上传到git上,使其他人install时候依赖版本相同,自动生成的不用管它;

  • README.md:项目说明文档;

另外还有一个.gitignore文件,用于配置代码上传到Git时要忽略的目录和文件,已经被移动到上层目录weiwen-dapp中了。

为了项目代码的精简,可以先删除现在用不上的文件,在src目录下:

  • 删除App.test.js

  • 删除index.css

  • 删除logo.svg

  • 删除serviceWorker.js

另外README.md也可以移动到外层目录weiwen-dapp中。

现在src目录下只剩下3个文件了: App.css、App.js、index.js

  • index.js:react项目的入口文件,先删除代码中不需要的引用,代码看起来是这样的:

  • App.css:css文件暂时用不上,也可以先删除里面的样式;

  • App.js:App组件的代码,它是一个类,只有一个render函数,返回就是App组件的具体内容,先删除不需要的代码,然后写上“Hello EOS”,代码看起来是这个样子:

现在到frontend目录使用 npm start 命令启动项目,在localhost:3000就可以看到输出了:

到这里,完成了EOS DAPP前端开发的第一步。

安装scatter-js

Scatter是一款EOS钱包,DAPP和EOS账户间的交互几乎都是通过Scatter进行的,到官网下载桌面版软件即可使用,安装和使用Scatter的方法可以查看之前的文章: 创建EOS账户和使用Scatter

scatter-js用于DAPP前端和本地Scatter间的交互,它已经被打包成nodejs第三方模块,在项目目录中使用npm install安装,同时还要安装EOS的js库:eosjs,命令如下:

cd weiwen-dapp/frontend
npm i -S scatterjs-core scatterjs-plugin-eosjs2 eosjs

安装好后,在package.json的dependencies中检查以上依赖:

Tips

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册