微信小程序-簡易計算器

代碼地址如下：
http://www.demodashi.com/demo/14210.html

一、前期准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 簡易計算器
• 滿足日常所用的的加減乘除計算
• 帶歷史記錄,查看過往計算

2、案例目錄結構

二、程序實現具體步驟

1.index.wxml代碼

<!--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">
    <!--<text class="user-motto">{{motto}}</text>-->
    <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.計算器部分功能邏輯代碼

var id = event.target.id;
    if(id == this.data.idb){  //退格←
      var data = this.data.screenData;
      if(data == "0"){
          return;
      }
      data = data.substring(0,data.length-1);
      if(data == "" || data == "－"){
          data = 0;
      }
      this.setData({"screenData":data});
      this.data.arr.pop();
    }else if(id == this.data.idc){  //清屏C
      this.setData({"screenData":"0"});
      this.data.arr.length = 0;
    }else if(id == this.data.idt){  //正負號+/-
      var data = this.data.screenData;
      if(data == "0"){
          return;
      }
      var firstWord = data.charAt(0);
      if(data == "－"){
        data = data.substr(1);
        this.data.arr.shift();
      }else{
        data = "－" + data;
        this.data.arr.unshift("－");
      }
      this.setData({"screenData":data});
    }else if(id == this.data.ide){  //等於＝
      var data = this.data.screenData;
      if(data == "0"){
          return;
      }
      //eval是js中window的一個方法，而微信頁面的腳本邏輯在是在JsCore中運行，JsCore是一個沒有窗口對象的環境，所以不能再腳本中使用window，也無法在腳本中操作組件                 
      //var result = eval(newData);           
      
      var lastWord = data.charAt(data.length);
      if(isNaN(lastWord)){
        return;
      }

三、案例運行效果圖

四、總結與備注

注意事項

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

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權