计算器微信小程序开发

### 微信小程序计算器开发示例代码 以下是一个简单的微信小程序计算器的实现代码，基于所提供的参考资料[^1][^2]中的描述： #### 1. **项目准备** 创建一个新的微信小程序项目，并在 `app.json` 中配置页面路径。 ```json { "pages": [ "pages/calculator/calculator" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "简易计算器", "navigationBarTextStyle": "black" } } ``` --- #### 2. **WXML 页面布局** 定义一个基本的界面结构，包括显示屏区域和按钮区域。 ```html <view class="container"> <!-- 显示屏 --> <input type="text" value="{{display}}" disabled style="font-size: 40px; text-align: right;" /> <!-- 数字键盘 --> <view class="buttons-grid"> <button wx:for="{{numbers}}" wx:key="index" bindtap="btnNum">{{item}}</button> <button wx:for="{{operators}}" wx:key="index" bindtap="btnOperate">{{item}}</button> <button bindtap="clear">C</button> <button bindtap="calculate">=</button> </view> </view> ``` --- #### 3. **WXSS 样式文件** 设置样式以提高用户体验。 ```css .container { display: flex; flex-direction: column; align-items: center; } .buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10rpx; margin-top: 20rpx; } button { height: 80rpx; font-size: 30rpx; } ``` --- #### 4. **JS 文件逻辑** 实现核心计算逻辑，包括数字输入、运算符处理和最终结果计算。 ```javascript Page({ data: { display: '0', // 屏幕显示的内容 firstNumber: null, // 第一个操作数 operator: '', // 当前的操作符 isOperatorClicked: false, // 是否点击过运算符 numbers: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0'], // 数字键 operators: ['+', '-', '*', '/'] // 运算符键 }, btnNum(e) { // 处理数字按键点击事件 const number = e.currentTarget.dataset.value || e.detail.value; if (this.data.isOperatorClicked) { this.setData({ display: '' }); // 如果刚按了运算符，则清空屏幕 this.setData({ isOperatorClicked: false }); } let currentDisplay = this.data.display === '0' ? '' : this.data.display; this.setData({ display: `${currentDisplay}${number}` }); }, btnOperate(e) { // 处理运算符按键点击事件 const selectedOperator = e.currentTarget.dataset.value || e.detail.value; if (!this.data.firstNumber && this.data.display !== '') { this.setData({ firstNumber: parseFloat(this.data.display) }); } else if (this.data.operator && this.data.display !== '') { this.calculate(); // 若已有第一个操作数和运算符，则先完成当前计算 } this.setData({ operator: selectedOperator, isOperatorClicked: true }); }, calculate() { // 执行等于号的功能 const secondNumber = parseFloat(this.data.display); switch (this.data.operator) { case '+': this.setData({ display: String(this.data.firstNumber + secondNumber), firstNumber: null, operator: '' }); break; case '-': this.setData({ display: String(this.data.firstNumber - secondNumber), firstNumber: null, operator: '' }); break; case '*': this.setData({ display: String(this.data.firstNumber * secondNumber), firstNumber: null, operator: '' }); break; case '/': this.setData({ display: String(secondNumber !== 0 ? this.data.firstNumber / secondNumber : 'Error'), firstNumber: null, operator: '' }); break; default: break; } }, clear() { // 清除屏幕上的内容 this.setData({ display: '0', firstNumber: null, operator: '', isOperatorClicked: false }); } }); ``` --- 以上代码实现了基础的四则运算功能，并通过良好的分层设计使代码易于维护和扩展。具体细节可参考上述引用材料[^2]。 --- ###