2-7 微信小程序计算器

结合之前学过的今天来写一下计算器：

拿到设计图以后先分析一下：

1、上面一块显示区域，下面为按钮区域

2、下面的按钮区域可以flex的row排列方式，一个一个创建这些按钮

先写好界面：

1、创建计算器页面（app.json页面）：

"pages":[
    "pages/calculator/calculator",
  ]

2、wxml编写页面（用比较笨的方法写的，便于看明白）

<!-- 显示区域 -->
<view class='screen'>
  <view>{
  {result}}</view>
</view>

<!-- 按钮区域 -->
<!-- 
id 用于按钮点击时记录按钮 也可以使用dataset方式
class 多个类名用空格隔开
hover-class 设置按钮点击效果的样式类
 -->
<view class='buttongloup'>
  <view class='buttonbox'>
    <button id='{
  {id1}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>清除</button>
    <button id='{
  {id2}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>回退</button>
    <button id='{
  {id3}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>
      <icon type='waiting' color='#999'></icon>
    </button>
    <button id='{
  {id4}}' class='btn-item orange'hover-class='shadow' bindtap='clickBtn'>/</button>
  </view>

  <view class='buttonbox'>
    <button id='{
  {id5}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>7</button>
    <button id='{
  {id6}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>8</button>
    <button id='{
  {id7}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>9</button>
    <button id='{
  {id8}}' class='btn-item orange' hover-class='shadow' bindtap='clickBtn'>*</button>
  </view>

  <view c