• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序-简易计算器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

代码地址如下:
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大师发表,拒绝转载,转载需要作者授权


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序第一篇(开始)发布时间:2022-07-18
下一篇:
自动客服功能的微信小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap