微信小程序制作科学计算器（控制台接受显示数据）

前言

由于前一阵子忙于考驾照和复习考试，所以好久没有写博客了。这篇博客写的是使用微信小程序开发简单项目，制作一个计算器，很简单。安装开发工具和注册微信小程序账号等等这些网上教程很多，这里就直奔主题吧。

微信开发工具项目创建

创建项目就是这个界面，上图中APPID就是注册微信小程序里面的APPID
这个自己可以创建一个记事本来记住这个APPID

微信开发工具代码实现

创建好后，是由官方提供的代码，一般界面就是Hello world、获取微信头像授权什么的，一般我们编写代码就在.wxml、.js里面编写，具体页面布局就在.wxss里面等，这次重要讲解逻辑代码实现，所以我就只在.wxml、.js里面编写。

首先我的界面就是如此简单，重要就是实现功能就行了，界面实现的代码如下：

//把index.wxml里面的代码全部删除，编写成下面的代码

//input组件可以在开发文档中查看功能
<input type="digit" placeholder="请输入数字" bindinput="num1"></input>
//button组件可以在开发文档中查看功能
<button bindtap="add">+</button>
<button bindtap="differ">-</button>
<button bindtap="mult">*</button>
<button bindtap="divide">/</button>
<input type="digit" placeholder="请输入数字" bindinput="num2"></input>
<button bindtap="equal">=</button>
//text文本 用来输出最后结果
<text>{{sumdata}}</text>

标题改写就是在app.json中编写：“navigationBarTitleText”: “科学计算器”（改成自己想要的）

最后实现加减乘除，这里编写加法实现，其他以此类推。
在index.js里面编写，首先把源代码删除，只留下Page({})这个方法，然后加减乘除的实现方法就在Page({})这个里面编写：

let num1,num2,sum,a//定义全局变量
num1(event)//方法名是根据在index.wxml里面bindinput="num1"编写
{    
console.log("用户输入的信息：",event.detail.value)//控制台显示信息
num1=event.detail.value;  
},  
num2(event)
{    
console.log("用户输入的信息：",event.detail.value)    
num2=event.detail.value;  
},
//点击加号按钮后代码实现：
add()//方法名是根据在index.wxml里面bindtap="add"编写
{    
console.log("点击求和按钮")    //控制台显示
sum=parseFloat(num1);    //把第一个数转换成float型数据
a=1;  //用来判断加号按钮是否按下
},
//最后按下等号按钮后编写的代码：
equal()//方法名是根据在index.wxml里面bindtap="equal"编写
{    
if(a==1)
{      
let su=sum+parseFloat(num2);//局部变量su存储最终结果     
 a=0;      //按下一遍后重新开始判断是否按下
 console.log(su)      
 this.setData({     
  sumdata:su   
   }) //文本text中的sumdata在网页中显示su值
}
}

减乘除的代码实现雷同，只是增加几个全局变量和局部变量而已，最终代码实现如下图：

微信开发项目结果

上面依次对应加减乘除。