微信小程序计算器模拟后续
今天按着自己的思路又重打了一遍
wxml没什么说的,就是分块起名,显示数字和结果的作为屏幕,数字键盘一行四块
<view class="onTop">
<view class="screen">{{screenData}}</view>
</view>
<!--键盘操作-->
<view class="onBottom">
<view class="Row">
<view class="item blue" bindtap='onTap' id="{{clear}}">C</view>
<view class="item blue" bindtap='onTap' id="{{del}}">←</view>
<view class="item blue" bindtap='history' id="{{history}}">history</view>
<view class="item blue" bindtap='onTap' id="{{add}}">+</view>
</view>
<view class="Row">
<view class="item orange" bindtap='onTap' id="{{id9}}">9</view>
<view class="item orange" bindtap='onTap' id="{{id8}}">8</view>
<view class="item orange" bindtap='onTap' id="{{id7}}">7</view>
<view class="item blue" bindtap='onTap' id="{{minus}}">-</view>
</view>
<view class="Row">
<view class="item orange" bindtap='onTap' id="{{id6}}">6</view>
<view class="item orange" bindtap='onTap' id="{{id5}}">5</view>
<view class="item orange" bindtap='onTap' id="{{id4}}">4</view>
<view class="item blue" bindtap='onTap' id="{{multiply}}">*</view>
</view>
<view class="Row">
<view class="item orange" bindtap='onTap' id="{{id3}}">3</view>
<view class="item orange" bindtap='onTap' id="{{id2}}">2</view>
<view class="item orange" bindtap='onTap' id="{{id1}}">1</view>
<view class="item blue" bindtap='onTap' id="{{divided}}">/</view>
</view>
<view class="Row">
<view class="item zero orange" bindtap='onTap' id="{{id0}}">0</view>
<view class="item orange" bindtap='onTap' id="{{dot}}">.</view>
<view class="item blue" bindtap='onTap' id="{{equal}}">=</view>
</view>
</view>
wxss调调样式
有几个首次用的地方记录一下:
display:flex
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。
它即可以应用于容器中,也可以应用于行内元素。
flex-direction
1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }
属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。
align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
然后是js
js分4种条件判断
首先获取输入的值,其次判断他的符号
1.如果输入的符号是删除,判断是否为0,反之,那就对字符串进行最后一位的删除,用substring截取到倒数第二位反映到前台显示,如果删没了就保持为0;同时在后台记录的数组中pop出最后一位;
if(id==this.data.del){//删除的实现
var data=this.data.screenData;
if(data=="0"){
return ;
}
data=data.substring(0,data.length-1);//删除data数组最后一位,实现删除
if(data==""||data=="-")
{
data=0;
}
this.setData({"screenData":data});
this.data.arr.pop();
2.如果输入的符号是清零,那就简单粗暴的将前台显示设置为0;同时后台存储的数组清空;
else if(id==this.data.clear){//清屏
this.setData({"screenData":0});
this.data.arr.length=0;}
3如果输入的是加减乘除和数字的话判断符号不能连续输入,将输入的数字和符号连续的存入数组arr中,然后在前台显示
else{//+-*/和数字输入
if(this.data.operaSym[id]){
if(this.data.lastIsOperaSym||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.operaSym[id]) {//判断是否输入符号
this.setData({ "lastIsOperaSym": true });
} else {
this.setData({ "lastIsOperaSym": false });
}
}
4输入的是等号,在等号中对数据进行处理,还没改对,result值搞不出来,再调试一下
心得:之前没看懂arr哪里传的值还以为是默认传进去的,还跑到大佬的源码底下问人家,丢人的想捂脸跑
微信小程序计算器模拟后续的更多相关文章
- 微信小程序计算器后后续
改的眼睛都要瞎了,总算是知道问题出哪了 最后一段 在等号里面计算输入的数组,这个判断的主要操作是将输入的数据的数组进行数和符号的拆分然后再计算,把数按字符串输入数组,然后将数和符号进行拆分 ,最后通过 ...
- 微信小程序计算器Bug版=-=(笔记)
微信小程序计算器BUG版本 无APPID的测试号登录,先在app.json中更改路径,以及修改头部信息. 首先一个输入框字段用{{screenData}} 功能可以退格,清屏,正负号,正常操作加减乘除 ...
- (一)微信小程序之模拟调用后台接口踩过的坑
如下图标记的三个点 在调试过程中出现问题,特此记录. 1. 之前在浏览器测试接口习惯省略 http:// ,是因为浏览器默认有一个检测,在你输入的网址前面加http://,如果有就不加. 然而在微信小 ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级(微信小程序开发)
微信小程序开发时,Console 提示:获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级 错误原因: 直接调用这个方法依旧可以获取用户信息, 但是如果你之前没有点击过那个授权 ...
- 微信小程序开发(2) 计算器
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- 微信小程序-简易计算器
代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
随机推荐
- 主机配置nginx后如何获取访问者IP
he你早的时候写了一个根据访问者ip查询天气的小接口,那时候还没得买域名,没有搞nginx,测试自然没有问题,然后随着一个小工具一块上线了,今天突然发现我的小工具有好几个人在使用了,就想写一个记录访问 ...
- 常用基础Linux操作命令总结与hadoop基础操作命令
cd命令:切换目录 (1)切换到目录 /usr/local cd /usr/local (2)去到目前的上层目录 cd .. (3)回到自己的主文件夹 cd ~ ls命令:查看文件与目录 (4)查看目 ...
- 性能优化-YAHOO军规
1.尽可能减少http请求数量 2.使用CDN 3.添加Expire/Cache-Control头 4.启用Gzip压缩 5.将css放在页面最上 6.将script放在页面最下 7.避免在CSS中使 ...
- Telerik UI for ASP.NET AJAX控件汉化方法
Telerik UI for ASP.NET AJAX控件功能十分强大,但原版是英文界面的,不方便一些用户使用. 和.NET的其他控件一样,可以通过资源文件来制作多语言版本. 下面看看安装完成后原始的 ...
- Kerberos安全体系详解---Kerberos的简单实现
1. Kerberos简介 1.1. 功能 一个安全认证协议 用tickets验证 避免本地保存密码和在互联网上传输密码 包含一个可信任的第三方 使用对称加密 客户端与服务器(非KDC)之间能够相互 ...
- java框架之SpringBoot(9)-数据访问及整合MyBatis
简介 对于数据访问层,无论是 SQL 还是 NOSQL,SpringBoot 默认采用整合 SpringData 的方式进行统一处理,添加了大量的自动配置,引入了各种 Template.Reposit ...
- Java数组转List
问题:当使用Arrays.asList(a)将数组转为List集合后,进行add操作时,报UnsupportedOperationException异常. 数组转List,直接使用Arrays的asL ...
- android 前台服务不显示通知
原因可以在哪里写了执行完成后就自动结束的吧 导致前台服务没有出现 如我 @Override public int onStartCommand(Intent intent, int flags, in ...
- C# 获取 mp3文件信息【包括:文件大小、歌曲长度、歌手、专辑】
C# 获取 mp3文件信息[包括:文件大小.歌曲长度.歌手.专辑] 第一种方式:[代码已验证] // http://bbs.csdn.net/topics/390392612 string fil ...
- 微信内置安卓x5浏览器请求超时自动重发问题处理小记
X5内核 请求超时后会自动阻止请求返回并由代理服务器将原参数重新发送请求到服务层代码.但由于第一次请求已经请求到服务器,会导致出现重复下单.支付等重大问题. 该问题由于腾讯x5浏览器会自动阻止第一次 ...