基于FISCO BCOS的小程序设计（二）

1. 小程序设计
   

2. wxml代码

<!--pages/block/block.wxml-->
<button bindtap="getBlockNumber">查询当前块高</button>
<view class="divLine"></view>
<view>
    <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="通过区块号获取区块hash"
                        bindinput="inputNumber" />
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap="getBlockHashByNumber">查询</view>
        </view>
    </view>
</view>
<!-- 分割线 -->
<view class="divLine"></view>
<view>
    <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="通过区块号获取区块"
                        bindinput="inputBlockNumber" />
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap="getBlockByNumber">查询</view>
        </view>
        <!-- <view>{{blockInfo}}</view> -->
        <view class="divLine"></view>
        <view>查询区块如下：</view>
        <view wx:for="{{blockInfo}}" wx:for-index="key" wx:for-item="value">
            <text user-select class="col-4 font-break" bindtap='copyText' data-text="{{value}}">{{key}} : {{value}}
            </text>
        </view>
    </view>
</view>

3. js代码

// pages/block/block.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  inputNumber(e) {
    this.setData({
      inputNumber: e.detail.value
    })
  },
  inputBlockNumber(e) {
    this.setData({
      inputBlockNumber: e.detail.value
    })
  },

  getBlockNumber() {
    wx.request({
      url: 'http://localhost:8080/api/block/getBlockNumber',
      method: 'Get',
      success(r) {
        console.log(r.data)
        wx.showModal({
          title: '当前块高是：' + r.data,
        })
      }
    })
  },
  getBlockHashByNumber() {
    console.log(this.data.inputNumber);
    if (!this.data.inputNumber) {
      wx.showModal({
        title: '请输入区块号！',
      })
    }
    wx.request({
      url: 'http://localhost:8080/api/block/getBlockHashByNumber',
      method: 'Get',
      data: {
        number: this.data.inputNumber
      },
      success(r) {
        console.log(r.data)
        wx.showModal({
          title: '查询区块的hash为：' + r.data,
        })
      }
    })
  },


  getBlockByNumber() {
    var that = this;
    console.log(this.data.inputBlockNumber);
    if (!this.data.inputBlockNumber) {
      wx.showModal({
        title: '请输入区块号！',
      })
    }
    wx.request({
      url: 'http://localhost:8080/api/block/getBlockByNumber',
      method: 'Get',
      data: {
        number: this.data.inputBlockNumber
      },
      success(r) {
        console.log(r.data);
        that.setData({
          blockInfo :r.data,
          signatureList:r.data.signatureList,
          transactions:r.data.transactions
        })
      },
    })
  },
	copyText: function (e) {
		console.log(e)
		wx.setClipboardData({
		  data: e.currentTarget.dataset.text,
		  success: function (res) {
			wx.getClipboardData({
			  success: function (res) {
				wx.showToast({
				  title: '复制成功'
				})
			  }
			})
		  }
		})
	  },
})

4. wxss

/* pages/block/block.wxss */
/*分割线样式*/
.font-break {
 word-break:break-all;
}
.divLine{
 background: #E0E3DA;
 width: 100%;
 height: 1rpx;
}
.weui-search-bar {
 position: relative;
 padding: 8px 10px;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 box-sizing: border-box;
 background-color: #EFEFF4;
 border-top: 1rpx solid #D7D6DC;
 border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
 position: absolute;
 left: 10px;
 top: 7px;
}
.weui-search-bar__form {
 position: relative;
 -webkit-box-flex: 1;
 -webkit-flex: auto;
         flex: auto;
 border-radius: 5px;
 background: #FFFFFF;
 border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
 position: relative;
 padding-left: 30px;
 padding-right: 30px;
 width: 100%;
 box-sizing: border-box;
 z-index: 1;
}
.weui-search-bar__input {
 height: 28px;
 line-height: 28px;
 font-size: 14px;
}
.weui-search-bar__cancel-btn {
 margin-left: 10px;
 line-height: 28px;
 color: #09BB07;
 white-space: nowrap;
}

5. 块高查询
   

6. 区块hash查询
   

7. 区块信息查询