2-7 微信小程序计算器

最新推荐文章于 2025-06-21 09:06:11 发布

So灬低调

最新推荐文章于 2025-06-21 09:06:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序学习日志文章标签：微信小程序计算器

本文链接：https://blog.youkuaiyun.com/u012717715/article/details/90314906

这篇博客介绍了如何使用微信小程序开发计算器应用。首先分析设计图，包括显示区域和按钮区域。通过flex布局来创建按钮，然后逐步编写WXML页面结构，WXSS进行样式设置，JS处理初始数据和逻辑。同时，引入mathStr.js文件处理运算表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结合之前学过的今天来写一下计算器：

拿到设计图以后先分析一下：

1、上面一块显示区域，下面为按钮区域

2、下面的按钮区域可以flex的row排列方式，一个一个创建这些按钮

先写好界面：

1、创建计算器页面（app.json页面）：

"pages":[
    "pages/calculator/calculator",
  ]

2、wxml编写页面（用比较笨的方法写的，便于看明白）

<!-- 显示区域 -->
<view class='screen'>
  <view>{
  
  {result}}</view>
</view>

<!-- 按钮区域 -->
<!-- 
id 用于按钮点击时记录按钮 也可以使用dataset方式
class 多个类名用空格隔开
hover-class 设置按钮点击效果的样式类
 -->
<view class='buttongloup'>
  <view class='buttonbox'>
    <button id='{
  
  {id1}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>清除</button>
    <button id='{
  
  {id2}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>回退</button>
    <button id='{
  
  {id3}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>
      <icon type='waiting' color='#999'></icon>
    </button>
    <button id='{
  
  {id4}}' class='btn-item orange'hover-class='shadow' bindtap='clickBtn'>/</button>
  </view>

  <view class='buttonbox'>
    <button id='{
  
  {id5}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>7</button>
    <button id='{
  
  {id6}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>8</button>
    <button id='{
  
  {id7}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>9</button>
    <button id='{
  
  {id8}}' class='btn-item orange' hover-class='shadow' bindtap='clickBtn'>*</button>
  </view>

  <view class='buttonbox'>
    <button id='{
  
  {id9}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>4</button>
    <button id='{
  
  {id10