文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么使用Meteor开发以太坊Dapp

2023-06-02 18:10

关注

本篇内容介绍了“怎么使用Meteor开发以太坊Dapp”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

常问问题

Meteor不是一个完整的堆栈框架,它是如何适应Ðapp开发的

是的,Meteor是一个完整的堆栈框架,它的主要改进是实时Web应用程序,但Meteor也是第一个框架(我知道),它完全支持了单页app(SPA)开发并提供了所有必要的工具。

Meteor非常适合的5个理由:

我是否需要在服务器上托管我的Ðapp?

不,使用meteor-build-client,你可以在没有服务器的情况下运行Ðapp的所有静态资源,但是如果你使用像ironflow-router这样的路由器 ,则需要使用hash(index.html#!/mypath)路由而不是干净的HTML5 pushstate路由。

创建你的Ðapp

如果还没有安装Meteor:

$ curl https://install.meteor.com/ |  SH

然后创建一个app:

$ meteor create myDapp$ cd myDapp

接下来添加web3包:

$ meteor add ethereum:web3

我还建议添加以下包:

启动你的Ðapp

游览Meteors文件夹结构

Meteor不会强制你拥有特定的文件夹结构,尽管某些文件夹具有特定含义,并且在绑定/运行你的应用程序时将被区别对待。

具有特定处理的文件夹

因此,为了构建Ðapp,我们理想状况下是在myDapp文件夹中创建以下文件夹结构:

- myDapp   - client      - lib      - myDapp.html      - myDapp.js      - myDapp.css   - public

注意社区还提供了像Nick Dodson这样的Meteor Ðapp Boilerplates:https://github.com/SilentCicero/meteor-dapp-boilerplate

连接你的Ðapp

要连接我们的dapp,我们需要在另一个终端中使用正确的CORS头开始geth

$ geth --rpc --rpccorsdomain "http://localhost:3000"

我们还需要设置provider。理想情况下,我们在lib文件夹中创建一个名为init.js的文件,并添加以下行:

if(typeof web3 === 'undefined')    web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

运行你的Ðapp

现在我们可以通过简单运行来运行我们的Ðapp:

$ meteor

如果我们转到http://localhost:3000,我们应该看到一个网站出现,如果我们打开浏览器控制台,我们可以使用web3对象来查询geth节点:

> web3.eth.accounts['0xfff2b43a7433ddf50bb82227ed519cd6b142d382']

添加Ðapp样式

如果你希望你的Ðapp很好地适应Mist并且遵循官方的外观,请使用dapp-styles css css/less框架。

请注意,它们正在大量开发中,类名称和元素可能会发生变化。

要添加它,请将以下包添加到Ðapp:

$ meteor add less$ meteor add ethereum:dapp-styles

现在将myDapp.css重命名为myDapp.less并在其中添加以下行:

// libs@import '{ethereum:dapp-styles}/dapp-styles.less';

现在,你可以使用所有dapp-styles类,也可以覆盖框架的所有变量。你可以在回调中找到它们。通过将它们复制到myDapp.less文件并设置不同的值来覆盖它们。

使用以太坊包

为了让你的Ðapp开发人员更轻松,我们提供了一些帮助你更快地构建Ðapp的软件包。

如果你添加上面推荐的软件包,你应该使用以太坊:ethereum:toolsethereum:accountsethereum:blocks

这3个包为你提供了EthToolsEthAccountsEthblocks对象,它们为你提供格式化程序功能,包含来自web3.eth.accounts(具有自动更新余额)的帐户的集合以及最近50个块的集合。

大多数这些功能都是响应式的,因此它们应该使构建界面变得轻而易举。

用法示例

如果你看看myDapp.html你会发现hello模板。只需在<template name="hello">..</template>标签之间添加一个名为{{currentBlock}}helper

现在打开myDapp.js并在counter() {..}之后添加currentBlock helper:

Template.elements.helpers({    counter() {      ...    },    currentBlock() {        return EthBlocks.latest.number;    }  });

然后通过添加EthBlocks.init();初始化EthBlocks EthBlocks.init();在this.counter = new ReactiveVar(0)

如果你现在在浏览器中检查Ðapp,你应该会看到最新的块号,一旦你开采,它将会增加。

有关更多示例,请查看软件包的readme文件和演示 (源代码)以获取更多信息。

Ðapp代码结构

本教程不会用Meteor构建应用程序。有关这方面的信息,请参阅Meteor的教程,优秀资源列表 或使用Meteor或Discover Meteor构建单页Web应用程序等书籍。

TODO:

有关示例,请参阅以太坊钱包。

绑定你的Ðapp

要将Ðapp绑定到本地独立文件,请使用meteor-build-client

$ npm install -g meteor-build-client$ cd myDapp$ meteor-build-client ../build --path ""

这会将你的Ðapps静态文件放入myDapp文件夹上方的build文件夹中。

最后一个选项--path将使所有文件相对链接,允许你通过单击build/index.html启动应用程序。

“怎么使用Meteor开发以太坊Dapp”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯