微信小程序计算器实战开发教程

微信小程序计算机实战开发教程，利用微信小程序实现计算机功能，微信小程序实战开发计算机。

项目开发

开发准备

开发前我们先下载好微信web开发者工具并安装好，下载地址，下载安装完成后打开（前几次打开后会让自己扫码）：

单击添加项目后填写AppID和相关的设置后，我们会得到一个示例demo：

app.js是小程序的脚本代码，app.json是对整个小程序的全局配置，包括页面路径、窗口表现、tabbar、网络超时设置、debug等，app.wxss是全局的样式文件，小程序默认每个页面的样式是独立的，pages文件夹就是我们整个小程序的页面， utils顾名思义就是存放相关的工具函数，小程序主张代码模块化，才是module.exports、require的形式实现。其中wxml文件是对HTML5的封装，wxss是对css的封装。每个页面可以分为视图层和逻辑层。

计算界面开发

小程序的wxml是对HTML5的封装组件化，分为以下几类：

我们先开发计算页面，整个项目的目录如下，进行相关修改即可：

cal.wxss文件写入：

page{
height:100%;

}
.content{
min-height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.main-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.screen-container{
padding-top:30rpx;
padding-left:5rpx;
padding-right:5rpx;
}
.screen{
background-color:#fff;
border-radius:3px;
text-align:right;
width:720rpx;
height:100rpx;
line-height:100rpx;
padding-left:10rpx;
padding-right:10rpx;
margin-bottom:30rpx;

}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:10rpx;
margin:10rpx;
text-shadow:0 1px 1px rgba(0,0,0,.3);
border-radius:5px;
text-align:center;
line-height:150rpx;
display:inline-block;
}
.orange{
color:#fef4e9;
border:solid 1px #da7c0c;
background:#f78d1d;
}
.blue{
color:#d9eef7;
border:solid 1px #0076a3;
background:#0095cd;
}

在cal.js文件中写入：

//index.js
//获取应用实例
var rpn = require(../../utils/rpn.js);
var app = getApp()
Page({
data: {
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,
logs: []
},
//事件处理函数

onLoad: function () {

},
onReady: function () {

},
onShow: function () {

},
onHide: function () {

},
onUpload: function () {

},
history: function () {
wx.navigateTo({
url:\'../list/list\'
})
},

clickButton: function (event) {
console.log(event);
var data = this.data.screenData.toString();
var id = event.target.id;
if(id == this.data.id1) {
if(data == 0){
return;
}
console.log(data);
console.log(data.substring(0,data.length-1)+data.substring(0,data.length-1));
var data = data.substring(0,data.length-1);
console.log(data);
} else if(id == this.data.id2) {
data = 0;
} else if (id == this.data.id3) {
var firstWord = data.substring(0,1);
if(firstWord != \'-\'){
data = \'-\' + data;
} else {
data = data.substring(1);
}
} else if (id == this.data.id20){
if(data == 0) {
return;
}
var lastWord = data.substring(data.length-1, data.length);
if(isNaN(lastWord)) {
return;
}
console.log(parseFloat(data)+parseFloat(data));
console.log(data+data)
if(parseFloat(data) == data){
return;
}
var log = data;
var data = rpn.calCommonExp(data);
log = log + \'=\' +data;
this.data.logs.push(log);
wx.setStorageSync(\'callogs\',this.data.logs);
} else {
if(id == this.data.id4 || id == this.data.id8 || id == this.data.id12 || id == this.data.id16) {
if(this.data.lastIsOperator || data == 0) {
return;
}
}
if(data == 0) {
data = id;
} else {
data = data + 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})
}
}

this.setData({
screenData:data
})
}
})

cal.js就是整个页面的逻辑处理，其中Page用来注册一个页面，接受一个对象作为参数，data就是初始化的数据，在前台界面通过{{data}}形式展现，而界面元素通过类似于onclick的形式绑定事件，如上面代码中的bindTap，事件处理的逻辑作为Page参数的一个属性处理，其中上面代码中的this是指这个页面。需要注意的是小程序禁止了eval函数，所以上面我引入了rpn.js库处理，github地址是https://github.com/huruji/rpn.js。页面之间的跳转可以使用wx.navigateTo(object)方法实现。
2、历史界面的开发
在list.js文件写入

var app = getApp()
Page({
data: {
logs:[]
},
onLoad: function () {
var logs =wx.getStorageSync(\'callogs\');
this.data.logs=logs;
}
})

在list.wxml中写入

{{item}}

在list.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;
}

在list.json中写入
{
navigationBarTitleText: 计算记录
}

这时我们可以看到相关的界面了，我们点击项目后点击预览之后扫描二维码就可以真机体验了

效果图：

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

推荐阅读：微信小程序开发生成图片分享教程 微信小程序开发教程