持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

需求分析:

在微信小程序里通过调用第三方api获得实时汇率,通过实时汇率在页面帮助用户计算不同货币之间的汇率.

源代码:

在data里存放各种货币相对人民币的汇率. 通过用户在页面选择按钮的结果来实现对相应的货币单位的汇率转换.

调用接口获取实时汇率:

在此使用request来对接口发送请求,但发送请求时可能会爆出以下错误:

"request:fail url not in domain list"

解决方案: 在编译器右上角点击详情->本地设置->将不校验合法域名的选项勾选. 并且在微信公众平台,开发->开发管理->服务器域名 中添加request合法域名. 配置完以上信息后在js里利用request对接口发送请求就不会报错了.

然后我们利用接口获取接口支持的货币列表.

代码如下:

 try {
    
      let that=this
      wx.request({
        url: 'https://www.mxnzp.com/api/exchange_rate/configs',
        method:"GET",
        data: {
          app_id: "**************"
          app_secret: "************"
        },
        success(res){
          that.setData({
            money_items:res.data.data
          })
          console.log(that.data.money_items)
          
        },
        fail(res){
          console.log(res)
          console.log("request fail")
        }
      })
    } catch (error) {
      console.log("getmoney err")
    }

然后将这些信息展现在用户页面上:

 <view>
            <view> <button class="hidelist" bindtap="hidelist_len1"> 收起列表</button></view>
            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{{money_items}}">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{{item.desc}}" />{{index}}: {{item.desc}}
                  <!-- <block wx:if="{{index==0}}"> <view> <button>收起列表</button></view></block> -->
                </view>
              </label>
            </radio-group>
          </view>

然后通过用户点击相应的选项去触发事件去在js里获取用户选择的单位:

/*得到两个列表的选择*/
  getlen_select1: function (e) {
    // console.log(e.detail.value)
    this.setData({
      length_unit1: e.detail.value,
      length_select1: true
    })
    // console.log(this.data.length_unit1)
    if (this.data.case_money) {
      
      for (let index = 0; index < this.data.money_items.length; index++) {
        if (e.detail.value == this.data.money_items[index].desc) {
          this.setData({
           unit1_id: this.data.money_items[index].name
          }) /*将单位换成货币编号.*/
        }
      }
   
    }
  },
  getlen_select2: function (e) {
    this.setData({
      length_unit2: e.detail.value,
      length_select2: true
    })
    if (this.data.case_money) {
      for (let index = 0; index < this.data.money_items.length; index++) {
        if (e.detail.value == this.data.money_items[index].desc) {
          this.setData({
           unit2_id: this.data.money_items[index].name
          }) /*将单位换成货币编号*/
        }
      }
    
    }
  },

计算事件(通过接口获取汇率):

通过之前获取到的两个转换单位作为向接口传递的参数,去获取两个单位之间的汇率,然后通过用户输入的数量去计算结果.

 money_calculation: function () {
    /*计算汇率转换结果*/
    var u1 = this.data.unit1_id /*单位1*/
    var u2 = this.data.unit2_id /*单位2*/
    var len = this.data.length_input /*输入的数量*/
    var ans = 1.0
   
    try {
      let that=this
      wx.request({
        url: 'https://www.mxnzp.com/api/exchange_rate/aim',
        method:"GET",
        data: {
          app_id: "*********"
          app_secret: "************"
          from:u1,
          to:u2,
        },
        success(res){
          ans=(Number(len) * Number(res.data.data.price)).toFixed(3)  
          that.setData({
            len_ans: ans
          })         
        },
        fail(res){
          console.log(res)
          console.log("request fail")
        }
      })
    } catch (error) {
      console.log("getmoney err")
    }


  },

将最终结果显示至用户页面:

wxml:

<!--货币换算模块-->
  <block wx:if="{{case_money}}">
    <view class="length">
      <view class="length_select">
        <block wx:if="{{!length_select1}}">
          <view>
            <view> <button class="hidelist" bindtap="hidelist_len1"> 收起列表</button></view>
            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{{money_items}}">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{{item.desc}}" />{{index}}: {{item.desc}}
                  <!-- <block wx:if="{{index==0}}"> <view> <button>收起列表</button></view></block> -->
                </view>
              </label>
            </radio-group>
          </view>
        </block>
        <block wx:else="">
          <view> <button class="displaylist" bindtap="displaylist_len1"> 请选择已知单位</button></view>
        </block>
      </view>
      <!--输入行-->
      <view class="input_box">
        <view class="input_left"> 请输入:</view>
        <input class="input_length" bindinput=input_length" value="" type="number" />
      </view>

      <view class="len_input_text">输入的金额为: {{length_input}}{{length_unit1}}</view>
      <view class="length_put_select">
        <!--选择输出单位-->
        <block wx:if="{{!length_select2}}">
          <view>
            <view> <button class="hidelist" bindtap="hidelist_len2"> 收起列表</button></view>
            <radio-group bindchange="getlen_select2">
              <label class="radio" wx:for="{{money_items}}">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{{item.desc}}" />{{index}}:{{item.desc}}
                </view>
              </label>
            </radio-group>
          </view>
        </block>
        <block wx:else="">
          <view> <button class="displaylist" bindtap="displaylist_len2"> 请选择所求单位</button></view>
        </block>
      </view>
      <view class="length_look">
        <!--/*位置信息展示区*/-->
        <view> <button class="len_calculation" bindtap="money_calculation">计算</button></view>
        <view class="ans_text"> 换算结果为:{{len_ans}}{{length_unit2}}</view>
       
      </view>
    </view>
  </block>

上传版本并提交审核: