小程序开发系列------五、组件学习（顺手写个简易版的计算器）

超、凢脫俗 2022-10-29 06:27 134阅读 0赞

上一篇文章：[小程序开发系列------四、添加页面][------]我们学习了怎么在小程序项目中新建页面，并且知道了小程序中一个页面包含四个文件（分别是以wxml、js、wxss和json为后缀的文件）。但是如何编码出我们想要的页面效果呢？这一篇我们就来研究下：

### 一、什么是组件？什么是wxml？什么是wxss? ###

通过分析小程序项目结构，稍微有点编程基础的不难看出，小程序的页面结构编码主要是在pages目录的子目录中以wxml结尾的文件中编写的。

##### wxml是什么意思呢？ #####

**WeiXin Markup Language**  
这是一种应用于微信小程序开发的标签语言，它结合组件、WXSS和事件系统(JS)，可以构建页面结构。这几者就像web前端开发中的html、css和js的关系一样。  
html 中包含了很多元素，例如：div，span，input  
与之对应的  
wxml 中包含了很多组件，都有什么呢？

##### wxss是什么意思呢？ #####

**WeiXin Style Sheets**  
这是一套样式语言，用于描述WXML的组件样式。WXSS具有CSS大部分特性，并在CSS基础上做了一些扩充和修改。

### 二、常用的基础组件 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">wxml标签</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>&lt;view&gt;</code></td> 
   <td align="left">容器(就像html中的div一样)</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;image&gt;</code></td> 
   <td align="left">图片</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;input&gt;</code></td> 
   <td align="left">输入框</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;icon&gt;</code></td> 
   <td align="left">图标文件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;text&gt;</code></td> 
   <td align="left">文本域</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;button&gt;</code></td> 
   <td align="left">按钮</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;checkbox&gt;</code></td> 
   <td align="left">复选框</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;radio&gt;</code></td> 
   <td align="left">单选框</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;form&gt;</code></td> 
   <td align="left">表单</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;progress&gt;</code></td> 
   <td align="left">进度条</td> 
  </tr> 
 </tbody> 
</table>

### 三、使用常用的基础组件写个简单的计算器 ###

大家应该还记得上篇文章中我们添加了一个名为test的页面，如下图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]  
我们把它改成一个简单的计算器。  
先秀一下成果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]

test.wxml

<view class="container" style="background-color:{ {color}};">
      <view class="top">
        <text class="show_input" id="show_input">{ { show_oper}}</text> 
        <text class="main_input" id="main_input">{ { input_num}}</text> 
      </view>
      <view class="bottom">
        <view class="bottom_son">
          <button class="btn" bindtap="click" data-text="10">←</button>
          <button class="btn" bindtap="click" data-text="11">CE</button>
          <button class="btn" bindtap="click" data-text="12">C</button>
          <button class="btn" bindtap="click" data-text="13">sk</button>
        </view>
        <view class="bottom_son">
          <button class="btn" bindtap="clickButton" data-text="7">7</button>
          <button class="btn" bindtap="clickButton" data-text="8">8</button>
          <button class="btn" bindtap="clickButton" data-text="9">9</button>
          <button class="btn" bindtap="clickOperation" data-text="+">+</button>
        </view>
        <view class="bottom_son">
          <button class="btn" bindtap="clickButton" data-text="4">4</button>
          <button class="btn" bindtap="clickButton" data-text="5">5</button>
          <button class="btn" bindtap="clickButton" data-text="6">6</button>
          <button class="btn" bindtap="clickOperation" data-text="-">-</button>
        </view>
        <view class="bottom_son">
          <button class="btn" bindtap="clickButton" data-text="1">1</button>
          <button class="btn" bindtap="clickButton" data-text="2">2</button>
          <button class="btn" bindtap="clickButton" data-text="3">3</button>
          <button class="btn" bindtap="clickOperation" data-text="*">*</button>
        </view>
        <view class="bottom_son">
          <button class="btn" bindtap="clickButton" data-text="0">0</button>
          <button class="btn" bindtap="clickButton" data-text=".">.</button>
          <button class="btn" bindtap="clickOperation" data-text="=">=</button>
          <button class="btn" bindtap="clickOperation" data-text="/">/</button>
        </view>
      </view>
    </view>

test.wxss

/* pages/test/test.wxss */
    .container{
      background-color: rgb(154, 173, 173);
      width: 100%;
      height: 100%;
    }
    .top{
      width: 100%;
      border: 1rpx solid #ff9508;/*边框*/
      height: 120rpx;
    }
    .bottom{
      margin-top: 10rpx;
      width: 100%;
      border: 1rpx solid #ff9508;/*边框*/
    }
    .bottom_son{
      width: 90%;
      display:flex;justify-content:space-around;
      margin: 10rpx auto;/*上下左右*/
    }
    .btn{
      width:50rpx !important;/*!important*/
      margin: auto 3rpx;/*上下左右*/
    }
    .show_input{
      width:95%;
      /*border: 1rpx solid #ff9508;边框*/
      border-radius: 5rpx;
      margin: 5rpx auto;/*上下左右*/
      display: block;/*独占一行，并且使width、margin生效   block行元素  inline-block块元素*/
      height: 50rpx;
      text-align: right;
    }
    .main_input{
      width:95%;
      margin: 5rpx auto;
      /*border: 1rpx solid #ff9508;边框*/
      border-radius: 5rpx;
      display: block;/*独占一行，并且使width、margin生效   block行元素  inline-block块元素*/
      height: 50rpx;
      text-align: right;
    }

test.js（js文件里面自动生成的生命周期方法很多，基本上我都没动，只粘贴出来我改动过的data和我新增的方法）

data: {
        color:'red',
        show_oper:'',      //运算过程展示区域
        input_num:0,       //当前输入框
        lastNum:0,         //前一次运算结果
        lastOper:'',       //上次输入的运算符号
        flag:false          //是否清除输入框重新计数（按下运算符号键后再按数字键需要重新计数）
      },
    
      //按下数字键
      clickButton:function(e){
        var num = e.currentTarget.dataset.text;
        //按下数字键
        if(0<=num && num<=9){
          this.setData({
            //上次按键是运算符号键直接显示按下的数字
            //上次按键不是运算符号键：A已有小数点------------直接拼接到后面
            //                      B没有小数点------------原来的数*10再相加
            input_num:this.data.flag==true?num:
            (this.data.input_num.toString().indexOf('.')>=0?this.data.input_num+''+num:Number(this.data.input_num)*10+Number(num))
          })
        }
        //按下小数点键
        if(num=='.'){
          this.setData({
            //上次按键是运算符号键直接显示“0.”
            //上次按键不是运算符号键：A已有小数点--------不做变化
            //                      B没有小数点--------拼上小数点
            input_num:this.data.flag==true?"0.":(this.data.input_num.toString().indexOf('.')>=0?this.data.input_num:this.data.input_num+'.')
          })
        }
        //按下运算符号键后再按下数字键，重新计数，然后把flag标记为不需要重新计数
        if(this.data.flag==true){
          this.setData({
            flag:false
          })
        }
      },
    
      //按下运算符号键
      clickOperation:function(e){
        var num = e.currentTarget.dataset.text;
        if(num=='+'||num=='-'||num=='*'||num=='/'){
          this.setData({
            //根据lastOper(上次输入的运算符号)判断lastNum的取值，如果是第一次按下运算符号则lastNum为当前数，如果不是需要用lastNum和当前数进行运算
            lastNum:(this.data.lastOper=='')?this.data.input_num:this.getOperation(this.data.lastNum,this.data.input_num,this.data.lastOper),
            //按下运算符号，将flag标记为重新计数状态
            flag:true,
            //根据show_oper拼接展示区域的运算过程
            show_oper:this.data.show_oper!=''? this.data.show_oper+' '+this.data.input_num+' '+num:this.data.input_num+' '+num,
            //根据lastOper计算当前输入框的结果
            input_num:this.data.lastOper==''?Number(this.data.input_num):this.getOperation(this.data.lastNum,this.data.input_num,this.data.lastOper),
            //计算妥当之后把本次按下的运算符号赋值给lastOper
            lastOper:num
          })
        }
        //“=”号特殊处理，计算当前输入框结果，作为下次运算第一个数据，清空一切变量
        if(num=='='){
          this.setData({
            input_num:this.data.lastOper==''?Number(this.data.input_num):this.getOperation(this.data.lastNum,this.data.input_num,this.data.lastOper),
            show_oper:'',
            lastNum:0,
            lastOper:'',
            flag:true
          })
    
        }
      },
      getOperation:function(a,b,oper){
        var result = 0;
        if(oper=='+'){
          result = (Number(a)*1000+Number(b)*1000)/1000//克服JS关于浮点数计算的BUG
        }
        if(oper=='-'){
          result = (Number(a)*1000-Number(b)*1000)/1000//克服JS关于浮点数计算的BUG
        }
        if(oper=='*'){
          result = Number(a)*Number(b)
        }
        if(oper=='/'){
          result = Number(a)/Number(b)
        }
        return result;
      },
      click:function(e){
        var num = e.currentTarget.dataset.text;
        if(num==10){
          console.log(10)
          console.log(this.data.input_num.length-1)
          this.setData({
            input_num:this.data.input_num.toString().substring(0,this.data.input_num.toString().length-1)
          })
        }
        if(num==11){
          console.log(11)
          this.setData({
            input_num:0
          })
        }
        if(num==12){
          console.log(12)
          this.setData({
            show_oper:'',
            input_num:0,
            lastNum:0,
            lastOper:'',
            flag:false
          })
        }
        if(num==13){
          var colors=['#9D9D9D','#d0d0d0','#ffaad5','#FF359A','#FF8EFF','#00E3E3','#46A3FF','#B9B9FF','	#79FF79','#CEFFCE']
          var index = Math.ceil(Math.random()*10)
          this.setData({
            color:colors[index]
          })
        }
      },

test.json（这里定义了页面的标题“计算器”）

{
      "navigationBarTitleText":"计算器",
      "usingComponents": {}
    }

也可以用微信扫码在手机上体验一下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]

点击上图中所示的预览按钮，等二维码弹出后，用手机微信扫码就可以像使用别的小程序一样体验自己的劳动成果了。

不是专业前端，很丑陋，将就着看吧，毕竟是刚刚学习小程序。

涉及到的组件有：view、text和button，源码提供的很详细了，想要学习的可以看看。

[------]: https://blog.csdn.net/sun_luming/article/details/113766058?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: /images/20221024/efc986d17f00475ea0b34e0ea446113e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]: /images/20221024/a8097d7c5b0448a1880edf515c1e4d96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]: /images/20221024/4ef9aa469c0d427fbfbb0d4a70807789.png