全球货币汇率查询系统

小程序——实时货币汇率计算器结果显示程序代码文件管理器显示问题总结参考博文

首次创建时间：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;
}

三、文件管理器显示

四、问题总结

WEUI模块中的页脚组件问题

关于调用接口的问题

关于合法域名验证错误

解决方案：

点击微信开发者工具右上角详情->本地设置->勾选不验证合法域名...

4.关于TypeError：无法读取未定义错误的属性'rate'

这是由于 API 接口本身的能力不足造成的。由于使用了开源和免费的API货币换算在线，有时请求数据无法请求，并且不会返回实时速率货币换算在线，这会导致编译器确定速率未定义。

五、参考文章

5.