一个小程序计算器

index.wxml

<view class='page'>

  <view class='body'>
    <text>计算金额：</text>
    <form bindsubmit='formSubmit' bindreset='formReset'>
      <view class='input'>
        <input name='input' placeholder='输入金额' type='number' />
        <text>\n</text>
      </view>
      <button form-type='submit' type='primary'>计算</button>
      <text>\n</text>
      <button form-type='reset'>重置</button>
    </form>
  </view>
  <view class='body'>
    <text>\n计算的结果为：{{count}}</text>
  </view>

</view>

index.wxss

.page {
  margin-top: 40rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
  font-size: 47rpx;
}
.body {
  font-size: 43rpx;
  background-color: #fff;
}
.input {
  font-size: 43rpx;
  background-clip: #fff;
}

index.js

Page({
  data:{
    'count':''
  },

  formSubmit(e) {
    var num = Number(e.detail.value.input); //将Object转换为数值

    this.setData({
      'count':num
    })

  },

  formReset() {
    this.setData({
      'count':''
    })
  }


})

计算器需要我们输入一个数字，然后点击计算按钮进行运算。我偷懒就没有写具体的计算方法，后面我会完善这个计算器的功能，比如实现十进制转换为二进制的功能。这里只做出大致的模板而已。点击并提交就需要表单组件<form></form>。表单组件内可以提交用户输入和选择的switch,input,checkbox,slider,radio,picker等组件。

效果预览如下：

图片.png