小程序实时货币汇率计算

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

成果展示
程序代码
文件管理器展示
问题总结
参考博文

第一次创建时间：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仍是anyC: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模块中的footer组件问题
关于接口的调用问题
关于报错合法域名校验的问题

解决办法：
点击微信开发者工具右上角详情——>本地设置——>选中不校验合法域名…

4.关于TypeError: Cannot read property ‘rate’ of undefined报错

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

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

小程序实时货币汇率计算相关推荐

微信小程序监听服务器发送消息,微信小程序实时聊天WebSocket
本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js ...
微信小程序--实时语音识别
小程序实时语音识别说到搜索功能,常见的有:图片搜索,语音搜索,文字搜索(模糊.精准) 今天我们聊聊如何在微信小程序上实现语音搜索,这里我们借助了第三方腾讯云智能语音插件接下来让我们一起来看看实际操 ...
微信小程序实时定位（腾讯地图）
微信小程序实时获取地理位置-腾讯地图微信小程序-获取当前城市位置: 一. 我用的腾讯定位服务 https://lbs.qq.com/ 打开之后点击控制台 2.我们创建自己的密匙key 3.下载微信小 ...
刘连响：小程序实时音视频在互动场景下的应用
本文来自腾讯云技术沙龙,本次沙龙主题为在线教育个性化教学技术实践作者简介:刘连响,一起玩耍科技创始人.2013年起开始研究WebRTC, 对音视频处理. 直播.实时音视频相关技术非常感兴趣,具有多个 ...
ESP8266读DHT11温湿度，开发微信小程序实时显示
ESP8266读DHT11温湿度,开发微信小程序实时显示第一.原理讲解第二.ESP8266读取DHT11 第三.温湿度推送到云端第四.微信小程序开发个人可免费注册五个微信小程序账号. 第一.原 ...
微信小程序“实时日志”帮你快速找到bug
微信小程序"实时日志"帮你快速找到bug https://cloud.tencent.com/developer/article/1507401
今日小程序推荐：汇率即时查-打通微信直接搜一搜
前段时间微信官方公布几项新体验,其中一个就是可在微信(包括微信搜索框.小程序.搜一搜)中直接搜索实时汇率,点击可进入具体的小程序结果页. 小编带你一起试试新体验 1.在微信中输入"欧元&qu ...
微信小程序实时音视频的使用
小程序提供的live-pusher组件和live-player组件主要用于两种场景:一个是用于视频直播,另一个是用于为您的小程序提供实时音视频相关的功能.live-pusher和live-player ...
微信小程序实时将less编译为wxss
1.npm或者yarn全局安装wxss-cli npm install -g wxss-cli 2.运行waxes-cli命令(mp_wx为小程序目录) wxss ./mp_wx 实时监听mp_wx目 ...
微信小程序实时录制音视频流和实时播放音视频流
为更高效地连接用户与商家,微信小程序提供了实时音视频录制及播放组件.符合类目要求的小程序自助开通后,可自建或使用云服务,实现单向.双向甚至多向的音视频功能,如在线授课.远程咨询.视频客服,以及多人会议 ...

小程序实时货币汇率计算

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

小程序实时货币汇率计算相关推荐

最新文章

热门文章