1、案例描述

制作一个人民币对换美元、日元、欧元的小程序。

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">人民币对换系统</view>
  <form bindsubmit="ca" bindreset="re">
   
    <input name="bizhong" type="text" placeholder="请输入需要对换的币种拼音首字母(M,R,O)" />
    <input name="china" type="number" auto-focus="true" placeholder="请输入人民币金额，单位（元）" />
    
    <view class="button_style">
      <button type="primary" form-type="submit">计算</button>
      <button type="primary" form-type="reset">重置</button>
    </view>
    <view class="resort" hidden="{{hid1}}">
      <view>对换{{sort}}是{{output}}元</view>
    </view>
    <view class="resort" hidden="{{hid2}}">
      <view>币种输入无效</view>
    </view>
  </form>
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
/* pages/kj/demo111-template/index.wxss */
input{
    margin: 10px;
    text-align: center;
    border-bottom: 1px solid blue;
}
.button_style{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
button{
    width: 40%;
}
.resor{
    text-align: center;
}

• js

// pages/kj/demo111-template/index.js
var hid1 = true;
var hid2 = true;
var sort = '';
var output = 0;

Page({

  data: {
    hid1 : hid1,
    hid2 : hid2
  },
  ca:function(e){
    var bizhong = e.detail.value.bizhong;
    var shue = parseInt(e.detail.value.china);
    if(bizhong == 'M'){
      output = (shue / 6.8801).toFixed(4);
      sort = '美元'
      this.setData({
        hid1:false,
        output : output,
        sort : sort
      })
    }
    else if(bizhong == 'R'){
      output = (shue / 0.0610).toFixed(4);
      sort = '日元'
      this.setData({
        hid1:false,
        output : output,
        sort : sort
      })
    }
    else if(bizhong == 'O'){
      output = (shue / 7.8234).toFixed(4);
      sort = '欧元'
      this.setData({
        hid1:false,
        output : output,
        sort : sort
      })
    } 
    else{
      this.setData({
        hid2:false,
      })
    } 
  },
  re:function(){
    
  }

})

2.2、结果展示

结果展示.jpg

3、知识汇总

3.1、form组件为表单组件，主要用于提交，我们和小程序交互提交的信息。

form组件.jpg form组件属性.jpg 获取form内各组件value值的方法.jpg 知识总结.jpg

4、踩坑说明

• form当中的表单提交和表单重置都是间接触发的，要先在form开始时候bindsubmit和bindreset。然后在form当中的button当中再用form-type定义submit或者reset。
• 写在form当中的input也要用name给他们命名，在后面js中调用的时候e.detail.value.name中name就是对应的input的name，就不会出现调用混乱了。
• form中的bindsubmit和bindreset是已经定义好的吗？为什么在js中没有对bindreset函数做定义，在触发bindreset后，依然可以重置输入。——默认情况下可以bindreset事件触发后，自动将input清空。