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

项目开发

开发准备

开发前我们先下载好微信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,.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-block

2、wxss文件里的样式并不会覆盖，而是先声明的有效，后声明的无效

3、永远以真机效果为准，开发者工具预览和真机偏差样式方面有可能偏差很大

4、页面没有办法铺满整个手机屏幕时，添加page{height；100%;}

5、千万不要用background-image或者使用background设置背景图片，开发工具里可以显示，真机不能显示，替换采用image标签

6、不要大量使用本地图片，小程序有规定大小，超过875kb无法预览

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!