四时宝库

程序员的知识宝库

2024年07月23日

不得不夸下当前的AI，有了它们效率倍高

最近打算做个计算利息的微信小程序，又不太会写代码，

想到现在的AI工具，

最近一直在使用文心一言（3.5免费版），

那就简单看看它的效果吧。

首先，我想简单一点，使用weui框架直接搭建，看看它会不会。

问：结合weui写一个计算利息的小程序全套

答：创建一个基于 WeUI 的计算利息的小程序涉及多个步骤。以下是一个简化的流程和代码示例，帮助你开始：

1. 设置小程序的基本结构

首先，你需要确保已经安装了微信开发者工具，并创建了一个新的小程序项目。

2. 引入 WeUI

你可以在 WeUI 的官方 GitHub 仓库中找到最新版本的 WeUI。下载后，将其样式文件和小程序的自定义组件添加到你的小程序项目中。

3. 创建页面结构

创建一个新的页面，例如 interestCalculator。在该页面的 wxml 文件中，你可以使用 WeUI 的组件来设计页面结构。以下是一个简单的示例：

html代码：

<!-- interestCalculator.wxml -->  
<view class="weui-container">  
  <view class="weui-cells__title">计算利息</view>  
  <view class="weui-cells">  
    <view class="weui-cell">  
      <view class="weui-cell__hd"><label for="principal" class="weui-label">本金</label></view>  
      <view class="weui-cell__bd">  
        <input id="principal" type="number" placeholder="请输入本金" bindinput="principalInput" />  
      </view>  
    </view>  
    <view class="weui-cell">  
      <view class="weui-cell__hd"><label for="rate" class="weui-label">利率 (%)</label></view>  
      <view class="weui-cell__bd">  
        <input id="rate" type="number" placeholder="请输入年利率" bindinput="rateInput" />  
      </view>  
    </view>  
    <view class="weui-cell">  
      <view class="weui-cell__hd"><label for="time" class="weui-label">时间 (月)</label></view>  
      <view class="weui-cell__bd">  
        <input id="time" type="number" placeholder="请输入时间（月）" bindinput="timeInput" />  
      </view>  
    </view>  
  </view>  
  <button class="weui-btn" type="primary" bindtap="calculateInterest">计算</button>  
  <view class="weui-cells__title mt-3">结果</view>  
  <view class="weui-cells">  
    <view class="weui-cell">  
      <view class="weui-cell__bd">{{interest}} 元</view>  
    </view>  
  </view>  
</view>

4. 添加样式和脚本

在相应的 wxss 文件中，你可以添加一些自定义样式：

wxss代码

/* interestCalculator.wxss */  
.weui-container {  
  padding: 20rpx;  
}

在 js 文件中，你需要编写处理用户输入和计算利息的逻辑：

js代码：

// interestCalculator.js  
Page({  
  data: {  
    principal: 0, // 本金  
    rate: 0, // 年利率  
    time: 0, // 时间（月）  
    interest: 0 // 利息  
  },  
  principalInput(e) {  
    this.setData({ principal: e.detail.value });  
  },  
  rateInput(e) {  
    this.setData({ rate: e.detail.value });  
  },  
  timeInput(e) {  
    this.setData({ time: e.detail.value });  
  },  
  calculateInterest() {  
    const { principal, rate, time } = this.data;  
    const interest = principal * (rate / 100) * (time / 12); // 计算利息的公式，可以根据实际情况调整  
    this.setData({ interest });  
  },  
});

5. 测试和调试你的小程序

在微信开发者工具中打开你的小程序项目，并预览 interestCalculator 页面。输入本金、利率和时间，点击“计算”按钮，你应该能看到计算出的利息。

直接将代码复制到工具中，看看效果：

效果还不错，但是我还想增加一个功能，就是增加一个利率的输入框，可以比较两个利率的差值。

问：上面的案列，加一个需求，用户点击按钮增加一个利率的输入框，可以比较两个利率的差值

答：要满足这个需求，我们需要做一些修改。

1. 修改页面结构

首先，在 interestCalculator.wxml 文件中，我们增加一个用于显示第二个利率输入框的区域，并添加一个按钮用于增加输入框。


wxml代码：

<!-- interestCalculator.wxml -->  
<!-- ... 省略其它代码 ... -->  
  
<view class="weui-cells" wx:if="{{showSecondRate}}">  
  <view class="weui-cell">  
    <view class="weui-cell__hd"><label for="secondRate" class="weui-label">第二个利率 (%)</label></view>  
    <view class="weui-cell__bd">  
      <input id="secondRate" type="number" placeholder="请输入第二个年利率" bindinput="secondRateInput" />  
    </view>  
  </view>  
</view>  
  
<button class="weui-btn" type="primary" bindtap="addSecondRate">增加第二个利率</button>  
  
<!-- ... 省略其它代码 ... -->

2. 更新样式和脚本

在 interestCalculator.wxss 文件中，我们可以根据需要添加一些自定义样式。

在 interestCalculator.js 文件中，我们需要添加一些新的数据和逻辑来处理第二个利率输入框的显示和输入。

js代码：

// interestCalculator.js  
Page({  
  data: {  
    // ... 省略其它数据 ...  
    showSecondRate: false, // 是否显示第二个利率输入框  
    secondRate: 0 // 第二个年利率  
  },  
  // ... 省略其它方法 ...  
    
  secondRateInput(e) {  
    this.setData({ secondRate: e.detail.value });  
  },  
    
  addSecondRate() {  
    this.setData({ showSecondRate: true }); // 显示第二个利率输入框  
  },  
    
  calculateInterest() {  
    const { principal, rate, time, secondRate } = this.data;  
    const interest = principal * (rate / 100) * (time / 12); // 计算第一个利息  
    const secondInterest = principal * (secondRate / 100) * (time / 12); // 计算第二个利息  
    const difference = Math.abs(interest - secondInterest); // 计算两个利息的差值  
    this.setData({ interest, secondInterest, difference });  
  },  
});

3. 更新页面结构显示结果

最后，在 interestCalculator.wxml 文件中，我们需要更新页面结构以显示两个利息和它们的差值。

wxml代码：

<!-- interestCalculator.wxml -->  
<!-- ... 省略其它代码 ... -->  
<view class="weui-cells__title mt-3">结果</view>  
<view class="weui-cells">  
  <view class="weui-cell">  
    <view class="weui-cell__bd">{{interest}} 元 (第一个利息)</view>  
  </view>  
  <view class="weui-cell" wx:if="{{showSecondRate}}">  
    <view class="weui-cell__bd">{{secondInterest}} 元 (第二个利息)</view>  
  </view>  
  <view class="weui-cell">  
    <view class="weui-cell__bd">{{difference}} 元 (利息差值)</view>  
  </view>  
</view>

答案出来了，但是省略的我也不想去看啊，所以继续问：

问：不要省略其它代码，我看不懂，写全了

答：好的，以下是完整的代码：

wxml代码：

<!-- interestCalculator.wxml -->  
<view class="weui-container">  
  <view class="weui-cells__title">计算利息</view>  
  <view class="weui-cells">  
    <view class="weui-cell">  
      <view class="weui-cell__hd"><label for="principal" class="weui-label">本金</label></view>  
      <view class="weui-cell__bd">  
        <input id="principal" type="number" placeholder="请输入本金" bindinput="principalInput" />  
      </view>  
    </view>  
    <view class="weui-cell">  
      <view class="weui-cell__hd"><label for="rate" class="weui-label">利率 (%)</label></view>  
      <view class="weui-cell__bd">  
        <input id="rate" type="number" placeholder="请输入年利率" bindinput="rateInput" />  
      </view>  
    </view>  
    <view class="weui-cell">  
      <view class="weui-cell__hd"><label for="time" class="weui-label">时间 (月)</label></view>  
      <view class="weui-cell__bd">  
        <input id="time" type="number" placeholder="请输入时间（月）" bindinput="timeInput" />  
      </view>  
    </view>  
  </view>  
  <button class="weui-btn" type="primary" bindtap="calculateInterest">计算</button>  
  <view class="weui-cells__title mt-3" wx:if="{{showSecondRate}}">第二个利率 (%)</view>  
  <view class="weui-cells" wx:if="{{showSecondRate}}">  
    <view class="weui-cell">  
      <view class="weui-cell__bd"><input type="number" placeholder="请输入第二个年利率" bindinput="secondRateInput" /></view>  
    </view>  
  </view>  
  <button class="weui-btn" type="primary" bindtap="addSecondRate" wx:if="{{showSecondRate}}">增加第二个利率</button>  
  <view class="weui-cells__title mt-3" wx:if="{{showSecondRate}}">结果</view>  
  <view class="weui-cells">  
    <view class="weui-cell" wx:if="{{showSecondRate}}">  
      <view class="weui-cell__bd">{{interest}} 元 (第一个利息)</view>  
    </view>  
    <view class="weui-cell" wx:if="{{showSecondRate}}">  
      <view class="weui-cell__bd">{{secondInterest}} 元 (第二个利息)</view>  
    </view>  
    <view class="weui-cell">  
      <view class="weui-cell__bd">{{difference}} 元 (利息差值)</view>  
    </view>  
  </view>  
</view>

问：js代码呢

答：以下是完整的 interestCalculator.js 代码：

js代码：

Page({  
  data: {  
    principal: 0, // 本金  
    rate: 0, // 年利率  
    time: 0, // 时间（月）  
    showSecondRate: false, // 是否显示第二个利率输入框  
    secondRate: 0, // 第二个年利率  
    interest: 0, // 利息  
    secondInterest: 0, // 第二个利息  
    difference: 0, // 两个利息的差值  
  },  
  
  // 监听本金输入框的输入事件  
  principalInput(e) {  
    this.setData({ principal: e.detail.value });  
  },  
  
  // 监听年利率输入框的输入事件  
  rateInput(e) {  
    this.setData({ rate: e.detail.value });  
  },  
  
  // 监听时间输入框的输入事件  
  timeInput(e) {  
    this.setData({ time: e.detail.value });  
  },  
  
  // 监听第二个年利率输入框的输入事件  
  secondRateInput(e) {  
    this.setData({ secondRate: e.detail.value });  
  },  
  
  // 点击按钮增加第二个利率输入框  
  addSecondRate() {  
    this.setData({ showSecondRate: true }); // 显示第二个利率输入框  
  },  
  
  // 计算利息  
  calculateInterest() {  
    const { principal, rate, time, secondRate } = this.data;  
    const interest = principal * (rate / 100) * (time / 12); // 计算第一个利息  
    const secondInterest = principal * (secondRate / 100) * (time / 12); // 计算第二个利息  
    const difference = Math.abs(interest - secondInterest); // 计算两个利息的差值  
    this.setData({ interest, secondInterest, difference });  
  },  
});

好了，直接将代码复制粘贴试试，效果出来了：

心目中的效果，五分钟就出来了，其他的再做个简单调整就可以了！

不得不说，现在的AI真的不得了。这只是一个简单的例子，其实方方面面各种问题他都能解决。编程、作文改写，报告生成。

标签：wx:if 

作者:sishi88 , 分类:技术教程 , 浏览:12 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接