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

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

笔记资料:

image.png

绪论

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

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

一.计算器前端界面设计

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

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

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

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

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

二.计算器逻辑部分设计

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
})
  }
  
})


目录
相关文章
|
小程序 开发者
微信小程序实现俄罗斯方块
微信小程序实现俄罗斯方块
328 0
|
1月前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
45 0
微信小程序 案例二 飞机大战
|
5月前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
5月前
|
小程序 JavaScript 安全
从0开始制作微信小程序
从0开始制作微信小程序
43 1
|
6月前
|
小程序
微信小程序制作瀑布流
微信小程序制作瀑布流
|
小程序
微信小程序项目实例——印记
微信小程序项目实例——印记
|
6月前
|
存储 JSON 小程序
【微信小程序】-- 页面处理总结(三十一)
【微信小程序】-- 页面处理总结(三十一)
|
小程序 开发者
微信小程序项目实例——2048小游戏
微信小程序项目实例——2048小游戏
|
6月前
|
小程序 JavaScript
微信小程序实现一个音乐播放器的功能
微信小程序实现一个音乐播放器的功能
|
6月前
|
存储 小程序 JavaScript
基于微信小程序开发简约打卡程序及源码
基于微信小程序开发简约打卡程序及源码
174 0