mac 使用js打开计算器_我的计算器

今天不要迟到

哈喽大家好，我是晓鹏。

今天第三次见面。

给大家准备了实现简易加减法计算器的全过程。

今天上第三课 —— 计算器。

~~~上课铃~~~

培训课

1 打开微信开发者工具

新建项目，存放路径根据个人，要找的到才行哦

①微信扫码登录工具，新建Demo。

②自定义项目名、路径、填写APPId(在小程序后台-开发设置里)

 ▲建立步骤

▲新建项目

2 认识小程序项目结构

小程序的项目结构?开发三巨头?★index.wxml：就好比刚出生的婴儿，啥也没有，只看到他的模样(这里的代码确定娃→页面长的样子)

★index.wxss：相当于我们大家穿的衣服、裤子、鞋子、化的妆扮(这里的代码用于改变页面的外观、容貌，专业术语：样式)

★index.js：用来表现我们会的技能，会做的事；表现给大众看。如街舞、游泳、编程。实现与大家的交互(这里的代码用来展示页面所会的技能展示，与用户进行互动。专业术语：事件)

PS：index.json文件用来配置页面的标题、页面、背景色、标题色

▲工具内容解析

3实现加法计算器                                                                               

简易的加法计算器?实现起来特别简单，代码少，就下面四块。●index.wxml：布局视图页●index.wxss：默认样式●index.js：实现加法逻辑的页面●app.json：默认的全局配置

 

3.①目录描述

  3.②wxml代码

<input placeholder="请输入数字a" bindinput='getNum'>input><text>＋text><input placeholder="请输入数字b" bindinput='getNum1'>input><button bindtap='sum'>计算结果button><text>结果为：{{result}}text>

代码详解?

◆input：官方组件输入框，提供给用户输入数字

◆placeholder：输入框的属性，用于提示用户输入的关键字◆bindinput：获取输入框用户输入的数值

◆button：按钮        ◆bindtap：button按钮的点击事件 

◆所有的属性值或事件名，都可根据自己喜好自定义命名。最重要的是顾名思义哦

具体详见官方文档：https://developers.weixin.qq.com/

  3.②JS代码

// 设置变量接受数值var num;var num1;var sum;Page({  // 获取数字1到控制台  getNum:function(event){    console.log(event.detail.value)    num = event.detail.value  },  // 获取数字2到控制台  getNum1(event){    console.log(event.detail.value)    num1 = event.detail.value  },  // 按钮点击事件，点击后实现数值相加将结果传到指定位置  sum:function(res){    var number = parseInt(num);    var number1 = parseInt(num1);    sum = number + number1;    console.log(sum)    this.setData({      result:sum    })  },})

代码详解?

◆var：用于声明变量，需要获取的值，赋值给自定义的变量

◆console.log：打印控制台消息◆function：事件，前面跟着的是相应的事件名。(自定义)

◆大家可以先跟着敲几遍，先实现功能，在去理解里面的代码逻辑，估计会不太好理解，我也是第一次写教程，可能有些部分没写全，有问题可以微信问我。具体详见官方文档：https://developers.weixin.qq.com/

官方文档才是最好的老师哦~

3.③效果展示

▲实现自己的计算器

4拓展知识

从上述解析代码来看，是不是很简单的就实现了，属于自己的第一个小程序DEMO，给大家留下个课后练习，根据上面文章的加法计算器，自己实现个减法计算器。写完记得贴出来，展示展示~
tips:只需稍微改动JS部分代码即可实现，动动小脑袋，拓展更多知识吧，欢迎各位大佬点评，小弟也是首次写教程文章,嘻嘻。

▲独立完成加减法计算器

5 本课总结

嘿。今天带领大家成功学会了实现加法计算器，是不是感觉很简单，很有自豪感！
大家刚入门，可以多去看看官方文档案例，快速的上手，小程序。从模仿到独立完成项目。相信我们都能做到！加油骚年们！！！

~~~下课铃~~~

还没下课，都坐回去。占用大家几分钟时间说两句话。

感谢大家能抽空观看本篇文章，要是有任何不足的地方，还希望大伙踊跃提出。不明白的地方也可以私信我呦，需要计算器源码的童鞋可以加我微信索取。

微信：18250706989(备注小程序)

下节课带领大伙学会使用小程序快捷键•̀ㅂ•́

bye~

那么这节课就到这里，下课。

据说长的好看的童鞋都在这里

END

文章编辑：Kemi

排版编辑：Kemi

图片：个人整理

晓鹏童鞋

点下【在看】

你越好看！