微信小程序-简易计算器

深碍√TFBOYSˉ_ 2022-05-09 15:50 212阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14210.html][http_www.demodashi.com_demo_14210.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  简易计算器
 *  满足日常所用的的加减乘除计算
 *  带历史记录,查看过往计算

##### 2、案例目录结构 #####

![zoRoOim1dJqH23py4Fr.png][]

#### 二、程序实现具体步骤 ####

##### 1.index.wxml代码 #####

<view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{
       {userInfo.avatarUrl}}" background-size="cover"></image>
        
      </view>
      <view>
        <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
        <text class="" style="display:block">极客小寨OkYoung团队 倾情出品</text>
      </view>
      <view class="usermotto">
        
        <button type="default" size="{
       {primarySize}}" plain="{
       {plain}}" hover-class="button-hover"
            disabled="{
       {disabled}}" bindtap="toCalc"> {
       {motto}} </button>
      </view>
    </view>

##### 2.index.wxss代码 #####

/**index.wxss**/
    .userinfo {
      /*display: flex;*/
      /*flex-direction: column;*/
      /*align-items: center;*/
      /*width:256rpx;*/
      /*height: 512rpx;*/
    }
    
    .userinfo-avatar {
      width: 228rpx;
      height: 228rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
      margin-top:80px;
      line-height: 80px;
    }
    
    .usermotto {
      margin-top: 35%;
    }
    
    /** 修改button默认的点击态样式类**/
    .button-hover {
      background-color: red;
    }
    
    /** 修改默认的navigator点击态 **/
    .navigator-hover {
        color:blue;
    }
    .github{
      color: green;
      font-size: 14px;
      text-align: center;
      margin-top: 5px;
    }
    .icon{
      vertical-align: middle;
      margin-right: 2px;
    }

##### 3.index.js逻辑代码 #####

//index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: '简易计算器☞',
        userInfo: {},
        defaultSize: 'default',
        disabled: false,
        iconType:'info_circle'
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      toCalc:function(){
        wx.navigateTo({
          url:'../calc/calc'
        })
      },
      onLoad: function () {
        console.log('onLoad');
        var that = this
      	//调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })

##### 4.计算器部分功能逻辑代码 #####

#### 三、案例运行效果图 ####

![zhVTO8ClUT0FrHNtO8V.gif][]

#### 四、总结与备注 ####

##### 注意事项 #####

1.每新建一个页面一定要记得去app.josn的pages属性中添加，不然的话使用navigateTo跳转到新页面后新页面的onLoad方法不会执行。

2.微信小程序中没有window等JavaScript对象，所以在写JS前想好替代方案，比如本计算器就被坑大了，本来使用eval函数可以方便的计算表达式，结果没法用，绕了好大的弯。

3.微信小程序中的JS并不是真正的JS，wxss也并不是真正的CSS，所以写的时候还是要注意一下。

4.本计算器存在不完善和bug，因为重点不是实现全部功能，而是搞清楚微信小程序开发方法，所以非关注点不用在意。  
微信小程序-简易计算器

> 代码地址如下：  
> [http://www.demodashi.com/demo/14210.html][http_www.demodashi.com_demo_14210.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14210.html]: http://www.demodashi.com/demo/14210.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[zoRoOim1dJqH23py4Fr.png]: /images/20220506/f7d9b18dea9e4951ba5c19decc192f10.png
[zhVTO8ClUT0FrHNtO8V.gif]: /images/20220506/91d32dcd1cf94a269280197ec071196e.png