【微信小程序】计算器案例_事件处理

前言

嗨嗨嗨，好久没更新小程序专栏了，本期浅浅用小程序写一个计算器。 最终代码会上传至资源噢~

实现效果

【微信小程序】计算器案例_xml_02

实现步骤

新建一个项目，在app.json中配置文件导航栏的标题和颜色。

【微信小程序】计算器案例_事件处理_03

【微信小程序】计算器案例_处理事件_04

先在index.wxml中编写计算器页面的外层结构，也就是两个view，第一个view显示数字和运算符，第二个view显示各种按钮。然后在index.wxss中添加样式。在page(整体页面)中使用flex布局，将result和btns的flex设置为1，实现两个view平分页面的效果。

<view class="result"></view>
<view class="btns"></view>
  • 1.
  • 2.
page{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.result{
    flex: 1;
    background-color: #e0e0e0;
}
.btns{
    flex: 1;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

【微信小程序】计算器案例_处理事件_05

wxml

接下来我们来编写页面内容。我们可