微信之父张小龙,从公布小程序到现在已经过去 好久了,在这里我就不多说什么了,我们直接直奔主题。今天给大家说的是微信小程序实现计算器,废话不多说,直接上代码。
list.wxss代码:
.content {
height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
background-image: url("../assets/img/bg.png");
background-repeat: repeat;
}
.item{
width:90%;
line-height: 100rpx;
margin-top:3rpx;
margin-bottom:3rpx;
border-radius: 3px;
padding-left: 3rpx;
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
}
list.wxml代码:
<view class="content">
<block wx:for="{{logs}}" wx:for-item="log">
<view class="item"> {{log}}</view>
</block>
</view>
list.js代码:
Page({
data:{
// text:"这是一个页面"
logs:[]
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var logs = wx.getStorageSync('callogs');
this.setData({logs:logs});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
index.css代码:
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
index.wxml代码:
<!--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}}001</text>
</view>
</view>
index.js代码:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
cal.wxss代码:
.content{
height: 100%;
display: flex;
flex-direction: column;
align-items:center;
box-sizing: border-box;
background-image: url("../assets/img/bg.png");
background-repeat: repeat;
padding-top: 30rpx;
}
.screen{
background-color:#FFFFFF;
border-radius: 3px;
text-align: right;
width:720rpx;
height:100rpx;
line-height: 100rpx;
padding-right: 10rpx;
margin-bottom: 30rpx;
}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:150rpx;
margin: 10rpx;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border-radius: 5px;
text-align: center;
line-height: 150rpx;
}
.orange{
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
}
.blue{
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
}
cal.wxml代码:
<view class="content">
<view class="screen">
{{screenData}}
</view>
<view class="btnGroup">
<view class="item orange" bindtap="clickButton" id="{{id1}}">退格</view>
<view class="item orange" bindtap="clickButton" id="{{id2}}">清屏</view>
<view class="item orange" bindtap="clickButton" id="{{id3}}">+/-</view>
<view class="item orange" bindtap="clickButton" id="{{id4}}">+</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id5}}">9</view>
<view class="item blue" bindtap="clickButton" id="{{id6}}">8</view>
<view class="item blue" bindtap="clickButton" id="{{id7}}">7</view>
<view class="item orange" bindtap="clickButton" id="{{id8}}">-</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id9}}">6</view>
<view class="item blue" bindtap="clickButton" id="{{id10}}">5</view>
<view class="item blue" bindtap="clickButton" id="{{id11}}">4</view>
<view class="item orange" bindtap="clickButton" id="{{id12}}">×</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id13}}">3</view>
<view class="item blue" bindtap="clickButton" id="{{id14}}">2</view>
<view class="item blue" bindtap="clickButton" id="{{id15}}">1</view>
<view class="item orange" bindtap="clickButton" id="{{id16}}">÷</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id17}}">0</view>
<view class="item blue" bindtap="clickButton" id="{{id18}}">.</view>
<view class="item blue" bindtap="history" id="{{id19}}">历史</view>
<view class="item orange" bindtap="clickButton" id="{{id20}}">=</view>
</view>
</view>
cal.js代码:
Page({
data:{
// text:"这是一个页面"
id1:"back",
id2:"clear",
id3:"negative",
id4:"+",
id5:"9",
id6:"8",
id7:"7",
id8:"-",
id9:"6",
id10:"5",
id11:"4",
id12:"×",
id13:"3",
id14:"2",
id15:"1",
id16:"÷",
id17:"0",
id18:".",
id19:"history",
id20:"=",
screenData:"0",
lastIsOperator:false,
arr:[],
logs:[]
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
history:function(){
wx.navigateTo({
url: '../list/list'
})
},
clickButton:function(event){
console.log(event.target.id);
var id=event.target.id;
if(id==this.data.id1){//退格
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.id2){//清屏
this.setData({screenData:"0"});
this.data.arr.length=0;
}else if(id==this.data.id3){//正负号
var data = this.data.screenData;
if(data==0){
return;
}
var firstWord=data.substring(0,1);
if(firstWord=="-"){
data=data.substring(1,data.length);
this.data.arr.shift();
}else{
data="-"+data;
this.data.arr.unshift("-");
}
this.setData({screenData:data});
}else if(id==this.data.id20){// =
var data = this.data.screenData;
if(data==0){
return;
}
var lastWord = data.substring(data.length-1,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.id18||arr[i]==this.data.id3){
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.id4){
result+=Number(optarr[i+1]);
}else if(optarr[1]==this.data.id8){
result-=Number(optarr[i+1]);
}else if(optarr[1]==this.data.id12){
result*=Number(optarr[i+1]);
}else if(optarr[1]==this.data.id16){
result/=Number(optarr[i+1]);
}
}
}
this.data.logs.push(data+"="+result);
wx.setStorageSync('callogs', this.data.logs);
this.data.arr.length=0;
this.data.arr.push(result);
this.setData({screenData:result+""});
}else{
if(id==this.data.id4||id==this.data.id8||id==this.data.id12||id==this.data.id16){
if(this.data.lastIsOperator==true||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(id==this.data.id4||id==this.data.id8||id==this.data.id12||id==this.data.id16){
this.setData({lastIsOperator:true});
}else{
this.setData({lastIsOperator:false});
}
}
}
})