微信小程序+django+geth开发DApp去中心化投票系统(一)

微信小程序+django+geth开发DApp去中心化投票系统(一)

前言： 很早之前和朋友写了个基于FISCOBCOS联盟链的投票系统，只算是一个demo，所以寒假在家的时候就想搞个可以用的投票dapp，于是说干就干。

效果： 先给大家看看效果，小程序一共四个界面，因为真实的以太币要钱，所以数据存在以太坊测试网rpsten，每次新建投票项目或者为某个选项投票都需要等待一段时间，这是由于发起的交易需要等待挖矿，挖矿成功了才算被确认。

前端： 那就开始吧，前端小白，自己也是一边百度一边写，首先下载安装微信官方的微信开发者工具，官方提供的weui样式库。

目录结构：

app.json:

1. 在pages中写上要创建的界面，就会自动在pages文件夹中生成。
2. 主要是tabBar的配置，这个选项配置的是底层的标签栏，list中有几个元素，标签栏就会显示几个标签，iconPath为未选中时显示的图标，selectedIconPath为选中后显示的图标。图标可以去阿里矢量库下载，找一个图标下载其灰度的和亮色的，这样形成对比。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/newvote/newvote",
    "pages/hall/hall",
    "pages/votedisplay/votedisplay"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "xx投票",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [
      {
        "text": "新建",
        "pagePath": "pages/index/index",
        "iconPath": "Image/我的0.png",
        "selectedIconPath": "Image/我的1.png"
      },
      {
        "text": "投票大厅",
        "pagePath": "pages/person/person",
        "iconPath": "Image/投票0.png",
        "selectedIconPath": "Image/投票1.png"
      }
    ]
  }
}

界面（index主界面，newvote新建投票，hall显示投票列表，votedisplay结果展示与投票）：

1. index界面：

官方给的模板index里面就有一个小头像，没有删掉，加上一个按钮绑定了一个bindViewTap方法，用来跳转到新建投票界面，该方法定义在js文件中。

index.wxml:

<!--index.wxml-->
<view class="page" data-weui-theme="dark">
	<view class="container">
		<view class="userinfo">
			<button open-type="getUserInfo" wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
			<block wx:else>
				<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
				<text class="userinfo-nickname">{{userInfo.nickName}}</text>
			</block>
		</view>
	</view>

	<view class="page__bd">
		<view class="button-sp-area">
			<a class="weui-btn weui-btn_primary" bindtap="bindViewTap">新建投票</a>
		</view>
	</view>
</view>

index.js:

//index.js
const app = getApp()

Page({
  data: {
    ...
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../newvote/newvote'
    })
  },
  ...

这样点击新建投票按钮就可以跳转到newvote界面了。