纵有疾风起
人生不言弃

零基础入门小程序002—开发简单的计算器

视频讲解:https://edu.csdn.net/course/play/9531/202795

上一节和大家一起写出了属于自己的第一个小程序,这节就带大家写出自己的第一个简单计算器。由于是入门,这里先教大家简单的加法运算。效果图如下

零基础入门小程序002—开发简单的计算器插图
1.png

实现起来特别简单,代码也特别少,就下面三个

  • index.wxml:上图的布局视图页
  • index.js:实现加法逻辑的页面
  • app.json:一些全局的配置。基本是都是默认的这里不用管

    零基础入门小程序002—开发简单的计算器插图(1)
    0.png

    下面就带带大家敲出属于自己的计算器小程序代码。

1,先看index.wxml,是不是代码特别少

<!--index.wxml  --><input placeholder="请输入数字a" bindinput="inputa" /><text>+</text><input placeholder="请输入数字b" bindinput="inputb" /><button bindtap='sum'>计算</button><text>结果为:{{result}}</text>

代码虽然少,但是作为刚入门的你,看起来可能很茫然,下面详细给大家讲下。

<input placeholder="请输入数字a" bindinput="inputa" /> <input placeholder="请输入数字b" bindinput="inputb" />

就是我们输入数字a的输入框,这里input就是我们认识的第一个小程序组件。
input的官方简介如下:https://developers.weixin.qq.com/miniprogram/dev/component/input.html
placeholder:设置默认显示文字(当我们输入文字时,默认的就没有了)
bindinput=”inputa”:定义一个inputa方法来获取input的输入内容。在index.js中会用到

  • <text>+</text>
    这里的<text>组件是用来显示文本的这里我们只是为了显示一个 + 号
<button bindtap='sum'>计算</button>

这里是个按钮<button>就是我们的计算按钮
bindtap=’sum’:定义个叫sum的方法,用来计算结果在index.js中会用到

  • <text>结果为:{{result}}</text>
    {{result}} 这种写法,是小程序用来绑定数据用的,这里用来显示我们的计算结果用的,

上面代码和对应的显示如下:

零基础入门小程序002—开发简单的计算器插图(2)
4.jpg

2,再来看index.js,我们加法的逻辑实现

可以看到我们在index.wxml里定义的bindinput=”inputa”,bindtap=’sum’在下面有用到

Page({  /**     * 页面的初始数据     * 初始化两个输入值     */  data: {    input1: 0,    input2: 0  },  //获取用户输入的值a  inputa: function (e) {    this.setData({      input1: e.detail.value    })  },  //获取用户输入的值b  inputb: function (e) {    this.setData({      input2: e.detail.value    })  },  // 拿到两个输入值以后求和  sum: function (e) {    var a = parseInt(this.data.input1);    var b = parseInt(this.data.input2);    // 求和    var sumResult = a + b    this.setData({      // 把结果赋值到sum标签上      result: sumResult    })  }})

index.js的代码不多,大家可以先照着敲一下。学小程序前期不需要你理解,但是一定要多敲多练。
这里的逻辑用文字写出来,估计大家新入门时还是不太好理解,我会录视频来给大家讲解。
源码地址:链接:https://pan.baidu.com/s/1ulgabXKwXh5vu7DHUOyNNQ 密码:ud86
有问题加我微信:2501902696

视频讲解:https://edu.csdn.net/course/play/9531/202795

文章转载于:https://www.jianshu.com/p/637ec5303c5a

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 零基础入门小程序002—开发简单的计算器

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活