16、去中心化社交音乐DApp开发指南

去中心化社交音乐DApp开发指南

1. 与智能合约交互的准备工作

要让应用与智能合约交互，需在Ropsten网络上创建已部署合约的新实例。这需要合约地址和ABI接口，可在Truffle部署合约时创建的 build/contracts/ 文件夹中找到。为方便访问，将 SocialMusic.json 复制到 src/ 文件夹。若扩展合约功能，需用新的ABI版本替换该文件。

在React应用中导入JSON文件，若使用webpack 2.0或更高版本，可直接导入；若为早期版本，需添加 json-loader 。示例代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import web3 from 'web3'
import './index.css'
import ABI from './SocialMusic.json'

创建智能合约地址和ABI接口的变量，并部署合约。由于MetaMask注入的web3版本过时，我们创建自定义的web3实例：

import React from 'react'
import ReactDOM from 'react-dom'
import myWEB3 from 'web3'
import './index.css'
import ABI from './So