小程序实时货币汇率计算

小程序–实时货币汇率计算器

1. 成果展示
2. 程序代码
3. 文件管理器展示
4. 问题总结
5. 参考博文

第一次创建时间：2021年11月10日13:20:51
第二次修改时间：2022年1月11日10:40:16

一、成果展示

二、程序代码

1、index主页模块

<!--index.wxml-->
<view class="box">
  <view class="title">实时汇率货币兑换</view>
  <form bindsubmit="calc" bindreset="reset">
    <input name='cels' placeholder="请输入人民币金额" type='number' auto-focus="true"></input>
    <view class="btnLayout">
      <button type="primary" form-type="submit" style="width: 40%">计算</button>
      <button type="primary" form-type="reset" style="width: 40%">清除</button>
    </view>
    <view class="textLayout">
      <text>兑换美元为：{{M}}</text>
      <text>兑换英镑为：{{Y}}</text>
      <text>兑换港币为：{{G}}</text>
      <text>兑换欧元为：{{O}}</text>
      <text>兑换韩元为：{{H}}</text>
      <text>兑换日元为：{{R}}</text>
    </view>
  </form>
  <view class="weui-footer">
    <view class="weui-footer">注意</view>
    <view class="weui-footer__text">由于本程序所使用的API接口是网上开源的，所以使用过程中可能会出现获取不到相应汇率的问题，请多理解!!</view>
  </view>
</view>

/**index.wxss**/
input{
  border-bottom: 2px solid blue;
  margin: 10px 0;
  font-size: 20px;
  color: red;
  padding: 15px;
}
.btnLayout{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.textLayout{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  margin-left: 20px;
  line-height: 40px;
}

.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: blue;
}

// index.js
// index.js
var C,rate=1;
Page({
  calc:function(e){
    var that = this//不要漏了这句，很重要;
    C=parseInt(e.detail.value.cels);
    //美元
    wx.request({
      url: 'https://api.it120.cc/gooking/forex/rate?fromCode=CNY&toCode=USD',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res)
        if(res.data.code == 0){
          that.setData({
            rate: res.data.data.rate,//经过试验出现nan的原因是c为number而rate为any，经过试验即使将rate定义为number但是setData里面的rate与此rate不同，上面接口所得到的rate仍是any
            C:C,
            D:C/rate,
            F:(C/rate).toFixed(4),
            M:(C/res.data.data.rate).toFixed(4),
            //M: //res代表success函数的事件对，data是固定的，fengxiang是是上面json数据中fengxiang
          })
        }
        else{
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
        }
      }
    })
    //英镑
    wx.request({
      url: 'https://api.it120.cc/gooking/forex/rate?fromCode=CNY&toCode=GBP',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res)
        if(res.data.code == 0){
          that.setData({
            Y:(C/res.data.data.rate).toFixed(4),
          })
        }
        else{
          wx.showToast({
            title: res.data.msg,
            icon:"none",
            duration: 2000
          })
        }
      }
    })
    //港币
    wx.request({
      url: 'https://api.it120.cc/gooking/forex/rate?fromCode=CNY&toCode=HKD',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res)
        if(res.data.code == 0){
          that.setData({
            G:(C/res.data.data.rate).toFixed(4),
          })
        }
        else{
          wx.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000
          })
        }
      }
    })
    //欧元
    wx.request({
      url: 'https://api.it120.cc/gooking/forex/rate?fromCode=CNY&toCode=EUR',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res)
        if(res.data.msg == 0){
          that.setData({
            O:(C/res.data.data.rate).toFixed(4),
          })
        }
        else{
          wx.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000
          })
        }
      }
    })
    //韩元
    wx.request({
      url: 'https://api.it120.cc/gooking/forex/rate?fromCode=CNY&toCode=KRW',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res)
          that.setData({
            H:(C/res.data.data.rate).toFixed(4),
          })
      }
    })
    //日元
    wx.request({
      url: 'https://api.it120.cc/gooking/forex/rate?fromCode=CNY&toCode=JPY',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res)
        if(res.data.code == 0){
          that.setData({
            R:(C/res.data.data.rate).toFixed(4),
          })
        }
        else{
          wx.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000
          })
        }
      }
    })
  },
  reset:function(){
    this.setData({
      M:'',
      Y:'',
      G:'',
      O:'',
      H:'',
      R:''
    })
  }
})

2、全局控制

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
@import'/style/weui.wxss';
.box{
  margin: 20rpx;
  padding: 20rpx;
  border: 10px dashed blue;
}

三、文件管理器展示

四、问题总结

1. WEUI模块中的footer组件问题

2. 关于接口的调用问题

3. 关于报错合法域名校验的问题
   
   解决办法：
   点击微信开发者工具右上角详情——>本地设置——>选中不校验合法域名…
   
   4.关于TypeError: Cannot read property ‘rate’ of undefined报错
   

   是因为API接口自身能力不足导致的，因为采用的开源免费的API，所以会导致有时候请求数据请求不到，就不会返回实时rate，从而导致编译器认定未定义rate。
   

五、参考文章
5. https://blog.csdn.net/lh337159/article/details/118049900