微信小程序学习之路04-简易的计算器

今天继续玩一些微信小程序的api来做例子，感觉自己可能创造力不很足，只能模仿着别人的例子来做一个自己的计算器了。老规矩，github源码地址我会附在文章末尾，供大家参考。用微信开发者工具新建的项目，index.wxss我也不去改了。只在index.wxml界面加一个到计算器页面的入口。index.js里面加入一个参数.
下面是index.wxml

<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <!--<text class="user-motto">{{motto}}</text>-->
    <button type="default" size="{{defaultSize}}" plain="{{plain}}" hover-class="button-hover" disabled="{{disabled}}" bindtap="toCalc">{{motto}}</button>
  </view>
</view>

然后是index.js

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

这里给大家附上一张丑丑的界面图。可以看到我这里是新建了cal这个文件夹，里面放上cal.js cal.wxml cal.wxss三个文件

记得在这里你新建好了一个wxml，你就需要在app.json去做页面的配置，不然你是访问不到的。所以下面放一下app.json（由于有历史功能，待会再加一遍）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/cal/cal"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

cal.wxss里面的rpx也是第一次见，查了一下

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

下面是cal.wxss文件，里面也没什么特别的，都是用的flex弹性布局，只是flex-direction的区别，附上文件cal.wxss

.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ccc;
    font-family: "Microsoft YaHei";
    overflow-x: hidden;
}
.layout-top{
    width: 100%;
    margin-bottom: 30rpx;
}
.layout-bottom{
    width: 100%;
}
.screen {
    text-align: right;
    width: 100%;
    line-height: 260rpx;
    padding: 0 10rpx;
    font-weight: bold;
    font-size: 60px;
    box-sizing: border-box;
    border-top: 1px solid #fff;
}
.btnGroup {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 5rem;
    background-color: #fff;
}
.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 1px;
    margin-right: 1px;
}
.item:active {
    background-color: #ff0000;
}
.zero{
    width: 50%;
}
.orange {
    color: #fef4e9;
    background: #f78d1d;
    font-weight: bold;
}
.blue {
    color:#d9eef7;
    background-color: #0095cd;
}
.iconBtn{
    display: flex;
}
.icon{
   display: flex;
   align-items: center;
   width:100%;
   justify-content: center;
}

接下来是cal.wxml

<view class="content">
  <view class="layout-top">
    <view class="screen">
     {{screenData}}
    </view>
  </view>

  <view class="layout-bottom">
    <view class="btnGroup">
      <view class="item orange" bindtap="clickBtn" id="{{idc}}">С</view>
      <view class="item orange" bindtap="clickBtn" id="{{idb}}">←</view>
      <!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>-->
      <view class="item orange iconBtn" bindtap="history">
          <icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
      </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>

好了重点来了，下面是index.js，这里面基本所有的逻辑我都是敲了注释的，有什么不懂的也可以在下面给我留言，csdn我还是看得很多，这里建议大家可以先复制下试试我的代码没问题的话，就自己手动敲一敲，分析下简单的js逻辑.
index.js

//获取应用实例
var rpn = require("../../utils/rpn.js");
var app = getApp()
Page({
  data:{
    idb:"back",
    idc:"clear",
    idt:"toggle",
    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',
    logs:[]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  clickBtn:function(event){
      //获取触发点击事件的标签的id
    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
        });
    }else if(id==this.data.idc){//清屏
        this.setData({
            'screenData':'0'
        });
    }else if(id==this.data.idt){//加正负号，这里没有在界面上用,这一段可以不用看的
        var data=this.data.screenData;
        //0不考虑正负号
        if(data=="0"){
            return ;
        }
        var firstWord=data.charAt(0);
        if(data=="-"){//第一个字母是负号，给他变成正
            data=data.substr(1);
        }else{
            data="-"+data;
            ///如果你真的看到了这里，真的没必要看这个else if，因为这个就是给第一个数取正负号的问题，这里又没有括号选择，贼鸡肋，所以界面上也就不放这个功能了。
        }
        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);

      //eval方法不能应，只能我们自己来写了
      //不过我们可以调用rpn.js这个库，他已经为我们做好了

      //判断最后一位如果是操作符，则不运算
      //isNaN() 函数用于检查其参数是否是非数字值。 isNaN(123)返回false isNaN(wqwq)返回true
      var lastWord = data.charAt(data.length-1);
      if(isNaN(lastWord)){
          return ;
      }
      var log=this.data.screenData;
      //获取rpn库运算结果
      console.log(log);
      var calData=rpn.calCommonExp(log);
      this.data.logs.push(log+"="+calData);
      var allLogs = wx.getStorageSync('callogs') || [];
      allLogs.push(log+"="+calData);
      wx.setStorageSync('callogs',allLogs);
      this.setData({
          'screenData':calData+""
      });

    }else{//运算符和数字的问题  还有点
        if(this.data.operaSymbo[id]){ //如果是符号+-*/
            if(this.data.lastIsOperaSymbo){
                //如果是最后一位是符号，就不能在收入符号
                return;
        }
      }
      var sd=this.data.screenData;
      var data;
      //这个if else逻辑很简单
      if(sd==0){
          data=id;
      }else{
          data=sd+id;
      }
      this.setData({
          'screenData':data
      });

      ///置一下最后一位是否为运算符的标志位
      if(this.data.operaSymbo[id]){
        this.setData({"lastIsOperaSymbo":true});
      }else{
        this.setData({"lastIsOperaSymbo":false});
      }
    }
  },
  history:function(){
      wx.navigateTo({
        url: '../history/history'
    })
  }
})

我们只需要去判断输入逻辑，计算的事情就交给rpn.js库来做，我们只需要传入一个像1+2-3 这种表达式给他，他就能给出结果，下面给出rpn.js，这个不需要自己看，放在utils下面就行了

function isOperator(value) {
    var operatorString = '+-*/()×÷';
    return operatorString.indexOf(value) > -1;
}

function getPrioraty(value) {
    if(value == '-' || value == '+') {
        return 1;
    } else if(value == '*' || value == '/' || value == '×' || value == '÷' ) {
        return 2;
    } else{
        return 0;
    }
}

function prioraty(v1, v2) {
    return getPrioraty(v1) <= getPrioraty(v2);
}

function outputRpn(exp) {
    var inputStack = [];
    var outputStack = [];
    var outputQueue = [];
    var firstIsOperator = false;
    exp.replace(/\s/g,'');
    if(isOperator(exp[0])){
        exp = exp.substring(1);
        firstIsOperator = true;
    }
    for(var i = 0, max = exp.length; i < max; i++) {
        if(!isOperator(exp[i]) && !isOperator(exp[i-1]) && (i != 0)) {
            inputStack[inputStack.length-1] = inputStack[inputStack.length-1] + exp[i] + '';
        } else {
            inputStack.push(exp[i]);
        }
    }
    if(firstIsOperator) {
        inputStack[0] = -inputStack[0] 
    }
    while(inputStack.length > 0) {
        var cur = inputStack.shift();
        if(isOperator(cur)) {
            if (cur == '(') {
                outputStack.push(cur);
            } else if (cur == ')') {
                var po = outputStack.pop();
                while(po != '(' && outputStack.length > 0) {
                    outputQueue.push(po);
                    po = outputStack.pop();
                }
            } else {
                while(prioraty(cur,outputStack[outputStack.length - 1]) && outputStack.length > 0) {
                    outputQueue.push(outputStack.pop());
                }
                outputStack.push(cur)
            }
        } else {
            outputQueue.push(Number(cur));
        }
    }
    if(outputStack.length > 0){
        while (outputStack.length > 0) {
            outputQueue.push(outputStack.pop());
        }
    }
    return outputQueue;
}

function calRpnExp(rpnArr) {
    var stack = [];
    for(var i = 0, max = rpnArr.length; i < max; i++) {
        if(!isOperator(rpnArr[i])) {
            stack.push(rpnArr[i]);
        } else {
            var num1 = stack.pop();
            var num2 = stack.pop();
            if(rpnArr[i] == '-') {
                var num = num2 - num1;
            } else if(rpnArr[i] == '+') {
                var num = num2 + num1;
            } else if(rpnArr[i] == '*' || rpnArr[i] == '×') {
                var num = num2 * num1;
            } else if(rpnArr[i] == '/' || rpnArr[i] == '÷') {
                var num = num2/num1;
            }
            stack.push(num);
        }
    }
    return stack[0];
}

function calCommonExp(exp) {
    var rpnArr = outputRpn(exp);
    return calRpnExp(rpnArr)
}

module.exports = {
    isOperator: isOperator,
    getPrioraty: getPrioraty,
    outputRpn: outputRpn,
    calRpnExp: calRpnExp,
    calCommonExp: calCommonExp
}

最后是查看运算历史，我们用wx.setStorageSync(‘callogs’,this.data.logs);将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 下面我们就来做查看历史这个操作。

先放一张效果图

下面是history.wxss

page{
    min-height:100%;
    height:100%;
}
.content{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-sizing:border-box;
    position:relative;
}
.item{
    width:90%;
    line-height:100rpx;
    margin-top:3rpx;
    margin-bottom:3rpx;
    border-radius:3px;
    color:#fef4e9;
    border:1px solid #da7c0c;
    background:#f78d1d;
    display:block;
    margin-right:auto;
    margin-left:auto;
}
.main-bg{
    height:100%;
    width:100%;
    min-height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

然后是history.wxml，循这个有什么不懂的可以打开api看看，wx:key这个

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

<view class="content">
    <image class="main-bg" src="../asserts/img/timg.jpg"></image>
    <block wx:for="{{callogs}}" wx:for-item="log" wx:key="*this">
        <view class="item">{{log}}</view>
    </block>
</view>

最后是history.js

Page({
    data:{
        callogs:[]
    },
    onLoad:function(){
        console.log(wx.getStorageSync('callogs'));
        this.setData({
            callogs:wx.getStorageSync('callogs')
        });
    }
})

说一下这个

防入坑指南
1、千万不要用background-image或者使用background设置背景图片，开发工具里可以显示，真机不能显示，替换采用image标签
2、当真机中元素没有办法横向排列时，试着改变一下display为inline-block
3、页面没有办法铺满整个手机屏幕时，添加page{height；100%;}
4、wxss文件里的样式并不会覆盖，而是先声明的有效，后声明的无效
5、不要大量使用本地图片，小程序有规定大小，超过875kb无法预览
6、永远以真机效果为准，开发者工具预览和真机偏差样式方面有可能偏差很大

最后放下github源码下载地址 有什么问题欢饮大家留言指出。