微信小程序开发入门：简易加减法计算器实现

1. 开发环境准备

首先确保电脑已安装微信开发者工具（官网下载最新版本）。打开工具后，用微信扫码登录，点击「新建项目」，填写以下信息：

项目名称：自定义（例如"MyCalculator"）

项目目录：选择本地文件夹存放代码

AppID：在微信小程序后台「开发管理」中获取（若为学习用途，可勾选「使用测试号」）

2. 认识小程序文件结构

创建成功后，工具会自动生成基础项目，核心文件包括：

WXML文件：类似HTML，负责页面结构（如输入框、按钮的布局）

WXSS文件：控制页面样式（字体、颜色等）

JS文件：处理逻辑与用户交互（如计算功能）

JSON文件：配置页面窗口属性（导航栏标题、背景色等）

3. 加法计算器实现步骤

3.1 WXML布局代码

在页面的.wxml文件中添加以下代码，创建两个输入框和一个计算按钮：

<view class="container">  
  <input placeholder="请输入数字1" type="number" bindinput="inputNum1"/>  
  <button bindtap="calculateSum">计算加法</button>  

  <text>结果：{{result}}</text>

bindinput：实时获取用户输入的数字

bindtap：绑定按钮点击事件

3.2 JS逻辑代码

在对应的.js文件中编写计算逻辑：

Page({  
  data: {  
    num1: 0,  
    result: 0  
  },  
  inputNum1: function(e) {  
    this.setData({ num1: Number(e.detail.value) });  
  calculateSum: function() {  
    const sum = this.data.num1 + this.data.num2;  
    this.setData({ result: sum });  
    console.log("计算结果：", sum);  
});

＋`计算结果`结果为：{{result}}

setData：更新页面显示的数据

Number()：确保输入值转为数字类型

4. 减法计算器拓展练习

将加法逻辑稍作修改即可实现减法：

calculateSub: function() {  
  const sub = this.data.num1 - this.data.num2;  
  this.setData({ result: sub });  
}

// 设置变量接受数值`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 }) },})`

在WXML中将按钮事件改为bindtap="calculateSub"即可。

5. 调试与优化建议

点击开发者工具的「编译」按钮实时预览效果

通过「Console」面板查看日志（如console.log输出）

为输入框添加校验逻辑（例如非空判断）：

  if (isNaN(this.data.num1)) {  
    wx.showToast({ title: "请输入有效数字！" });  
    return;  
  }

6. 进一步学习资源

官方文档：微信小程序开发文档

案例拓展：尝试实现乘除法或混合运算功能

通过这个练习，您已掌握小程序基础数据绑定和事件处理。建议从官方示例项目中复制更多组件代码进行实践，逐步提升开发能力。遇到问题可随时查阅文档或社区问答。