微信小程序——簡易計算器plus

博客班級	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作業要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作業目標	編寫一個小程序，可以全新編寫，也可以學習別人的小程序進行修改 熟悉git代碼管理流程，將源代碼上傳到到github 在博客園班級中寫一篇相應的博文
作業源代碼	https://github.com/helios12138/wx2020.git
學號姓名	31801097金欣怡
院系	浙大城市學院計算機系

 

 

 

 

 

 

 

 

 

 

前言：

第一次接觸學習微信小程序的制作，花了較大的時間了解小程序的各個部分。這次小程序是一個簡易計算器，網上大多數微信小程序的計算器僅能完成簡單的四則運算，在此基礎上，我新增了啟動界面和一些新的運算（平方、開根號、階乘等），以及對計算器頁面做了一些調整，完成了我的第一個小程序“簡易計算器plus”。

最終版本地址：https://github.com/helios12138/wx2020.git

開發工具：微信開發者工具

 

效果演示

                    

 

 

全局配置

app.json:

app.json 是對整個小程序的全局配置。可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。

pages屬性配置的是頁面，所有頁面都要在這里配置，如果忘記添加了，后面需要頁面跳轉的時候onLoad方法不會執行。

index是首頁啟動頁面；

calc是計算器使用頁面；

history是歷史計算頁面；

{
  "pages": [
    "pages/index/index",
    "pages/calc/calc",
    "pages/history/history",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "簡易計算器plus",
    "navigationBarTextStyle": "white"
  },
  
}

app.js:

App({
  onLaunch: function () {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

index.js:

這里涉及到一個API——wx.navigateTo，跳轉到一個新的頁面。

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    
    motto: '簡易計算器☞',
    userInfo: {},
    defaultSize: 'default',
    disabled: false,
    iconType:'info_circle'
  },
  //事件處理函數
  toupper: function(){
    console.log("觸發了toupper");
  },
  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
      })
    })
  }
})

index.wxml:

啟動頁面的布置，包括首頁的圖片滾動播放，該頁面的文字顏色、圖片位置等設置代碼在index.wxss中，這里就不展示了。

圖片滾動用到的API是swiper(滑塊視圖容器)，然后autoplay="true"，保證每張圖片可以自動切換。

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    
  </view>
  <swiper autoplay="true" interval="2000" indicator-dots circular=''>
    <swiper-item><image mode="widthFix" src="../../pic/kasha.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="../../pic/ig.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="../../pic/swy.jpg"></image></swiper-item>
  </swiper>
  <view>
    <text class="userinfo-nickname">{{userInfo.nickName}}（廣告位在線招租）</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>

 calc.wxml:

計算器使用界面的設置，包括計算器的各個按鈕位置顏色等的設置。

在這個界面發現基本上每行都有4個鍵，而最后一行只有3個，如果不修改的話，界面會變成下圖不美觀。所以在calc.wxss中加入.zero{width: 50%;}，將按鈕“0”的寬度擴大成界面寬度的一半（原來在item中的width為25%，即界面寬度的四分之一）。

  
<view class="content">
  <view class="layout-top">
    <view class="screen">
     {{screenData}}
    </view>
  </view>
    
  <view class="layout-bottom">
    <view class="btnGroup">
      <view class="item newgry" bindtap="clickBtn" id="{{idc}}">С</view>
      <view class="item newgry" bindtap="clickBtn" id="{{idb}}">←</view>
      <!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>-->
      <view class="item newgry iconBtn" bindtap="history">
          <icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
      
        </view>
      <view class="item orange" bindtap="clickBtn" id="{{idz}}">√￣</view>
    </view>
    <view class="btnGroup">
      <view class="item orange" bindtap="clickBtn" id="{{idw}}">x^2</view>
      <view class="item orange" bindtap="clickBtn" id="{{ids}}">x^3</view>
      <view class="item orange" bindtap="clickBtn" id="{{idy}}">x!</view>
      <view class="item orange" bindtap="clickBtn" id="{{idadd}}">+</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
      <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
      <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
      <view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" bindtap="clickBtn" id="{{id6}}">6</view>
      <view class="item blue" bindtap="clickBtn" id="{{id5}}">5</view>
      <view class="item blue" bindtap="clickBtn" id="{{id4}}">4</view>
      <view class="item orange" bindtap="clickBtn" id="{{idx}}">×</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" bindtap="clickBtn" id="{{id3}}">3</view>
      <view class="item blue" bindtap="clickBtn" id="{{id2}}">2</view>
      <view class="item blue" bindtap="clickBtn" id="{{id1}}">1</view>
      <view class="item orange" bindtap="clickBtn" id="{{iddiv}}">÷</view>
    </view>
    <view class="btnGroup">
      <view class="item blue zero" bindtap="clickBtn" id="{{id0}}">0</view>
      <view class="item blue" bindtap="clickBtn" id="{{idd}}">.</view>
      <view class="item orange" bindtap="clickBtn" id="{{ide}}">＝</view>
    </view>
  </view>
</view>

calc.js:

計算器完成四則運算和階乘等其他運算的代碼。

這里本地儲存保存計算歷史記錄運用到的API是Storage。

計算平方、三次方的值運用了Math.pow()函數；計算開根號的值運用了Math.sqrt()函數；階乘則是用了for循環進行累乘。

Page({
  data:{
    idb:"back",
    idc:"clear",
    idt:"toggle",
    idz:"sqrt",
    idw:"pinfang",
    ids:"sanfang",
    idy:"jiecheng",
    idadd:"＋",
    id9:"9",
    id8:"8",
    id7:"7",
    idj:"－",
    id6:"6",
    id5:"5",
    id4:"4",
    idx:"×",
    id3:"3",
    id2:"2",
    id1:"1",
    iddiv:"÷",
    id0:"0",
    idd:".",
    ide:"＝",
    screenData:"0",
    operaSymbo:{"＋":"+","－":"-","×":"*","÷":"/",".":"."},
    lastIsOperaSymbo:false,
    iconType:'waiting_circle',
    iconColor:'white',
    arr:[],
    logs:[]
  },
  onLoad:function(options){
    // 頁面初始化
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  },
  clickBtn:function(event){
    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;
      }
      
      var lastWord = data.charAt(data.length);
      if(isNaN(lastWord)){
        return;
      }

      var num = "";

      var lastOperator = "";
      var arr = this.data.arr;
      var optarr = [];
      for(var i in arr){
        if(isNaN(arr[i]) == false || arr[i] == this.data.idd || arr[i] == this.data.idt){
          num += arr[i];
        }else{
          lastOperator = arr[i];
          optarr.push(num);
          optarr.push(arr[i]);
          num = "";
        }
      }
      optarr.push(Number(num));
      var result = Number(optarr[0])*1.0;
      console.log(result);
      for(var i=1; i<optarr.length; i++){
        if(isNaN(optarr[i])){
            if(optarr[1] == this.data.idadd){
                result += Number(optarr[i + 1]);
            }else if(optarr[1] == this.data.idj){
                result -= Number(optarr[i + 1]);
            }else if(optarr[1] == this.data.idx){
                result *= Number(optarr[i + 1]);
            }else if(optarr[1] == this.data.iddiv){
                result /= Number(optarr[i + 1]);
            }
        }
      }
      //存儲歷史記錄
      this.data.logs.push(data + result);
      wx.setStorageSync("calclogs",this.data.logs);

      this.data.arr.length = 0;
      this.data.arr.push(result);

      this.setData({"screenData":result+""});
    }else if(id == this.data.idw){//平方
      var pd=this.data.screenData;
    var data=Math.pow(pd,2);
    this.setData({"screenData":data});
    }else if(id==this.data.ids){//三次方
      var sd=this.data.screenData;
    var data=Math.pow(sd,3);
    this.setData({"screenData":data});
    }else if(id==this.data.idy){//階乘
      var jd=this.data.screenData;
      var result=1;
      for(var i=1;i<=jd;i++){
        result *=i;
      }
      this.setData({"screenData":result});
    }else if(id==this.data.idz){//開方
      var data=Math.sqrt(this.data.screenData);
      this.setData({"screenData":data});
    }
    else{
      if(this.data.operaSymbo[id]){ //如果是符號+-*/
        if(this.data.lastIsOperaSymbo || this.data.screenData == "0"){
          return;
        }
      }

      var sd = this.data.screenData;
      var data;
      if(sd == 0){
        data = id;
      }else{
        data = sd + id;
      }
      this.setData({"screenData":data});
      this.data.arr.push(id);

      if(this.data.operaSymbo[id]){
        this.setData({"lastIsOperaSymbo":true});
      }else{
        this.setData({"lastIsOperaSymbo":false});
      }
    }
  },
  
  history:function(){
    wx.navigateTo({
      url:'../history/history'
    })
  }
})

 總結

這是我第一次編寫微信小程序，在一開始也嘗試去b站等網站查找制作小程序的教程，一步步摸索出".js",".json",".wxml",".wxss"這些后綴文件都代表了什么、該寫什么、有什么特殊格式等（.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件, .wxml后綴的文件是頁面結構文件），為了不讓啟動頁面只有一個按鈕這么寡淡，我嘗試去網上查找學習滾動圖片的制作，雖然過程中遇到了點挫折，但是最終呈現出的效果還是挺好的。當然我了解到的還很少，學習的也不全面熟練，僅僅是初學者的第一課，而且這個小程序還是有很多不足的地方，但也是一個新的起點。