微信小程序之简易计算器的制作

文章目录

• ​​绪论​​
• ​​一.计算器前端界面设计​​
• ​​二.计算器逻辑部分设计​​

微信小程序课程领取：

播放地址：https://www.bilibili.com/video/av82181570

笔记资料：

需要笔记资料配套视频加老师微信：JL1714873054

绪论

   小程序的计算器简易制作我们将分为两个部分来讲解

1. 前端展示界面
2. 后台逻辑设计

一.计算器前端界面设计

我们准备利用​​input​​​组件，​​view​​组件完成我们的界面设计

<input placeholder="请输入数字A" bindinput="dataA"></input>
<view>+</view>
<input placeholder="请输入数字B" bindinput="dataB"></input>
<view>=</view>

我们的求和结果进行数据绑定

<view>{{sumALL}}</view>

以上我们完成了计算器的前端界面设计，非常简陋，同时写了两个事件，​​dataA​​​和​​dataB​​,接下来完善我们的逻辑部分：

二.计算器逻辑部分设计

page({
  //设置全局变量
  let a=0;
  let b=0;
  dataA(e){
    console.log("获取A的值",e.detail.value)
    a=e.detail.value
  },

  dataB(e){
    console.log("获取B的值",e.detail.value)
    b=e.detail.value
  },

  sum(){
  let x=parseInt(a);//把字符串的a值转化成整数
  let y=parseInt(b);
  
  }

  


})

对于求和部分怎么办呢？我们需要用到一个​​动态的固定绑定值​​，用求和事件将它包起来：

this.setData({
  sumALL:x+y
})

完整版代码​​JS​​部分：

page({
  //设置全局变量
  let a=0;
  let b=0;
  dataA(e){
    console.log("获取A的值",e.detail.value)
    a=e.detail.value
  },

  dataB(e){
    console.log("获取B的值",e.detail.value)
    b=e.detail.value
  },

  sum(){
  let x=parseInt(a);//把字符串的a值转化成整数
  let y=parseInt(b);
  
  this.setData({
  sumALL:x+y
})
  }

  


})