手把手教你进行微信小程序开发案例1---计算器
由于之前的文章中已经教会了大家如何注册自己的一个微信小程序，并且利用微信开发工具进行小程序的开发，所以这里不再介绍如何下载工具和注册账号，不懂的小伙伴们可以观看我之前发过的教程哦。
#####下面我将手把手地教大家如何开发自己的第一个微信小程序实例–计算器
注意：在代码块中的/xxx或//xxx代表着注释，不是代码的一部分！！
- 第一步 打开我们的微信开发工具（之前的教程有，这里就不再重新交）
- 第二步 我们直接选择打开miniprogram-4小程序
- 第三步 我们直接点击我们看到的app.json，如下图所示，我们不用右击一个一个创建目录、.js、.json、.wxml、.wxss。直接输入我们要创建的页面路径，具体操作如下代码块所示
/*直接将"pages":[参数]中的参数删除，我们要创建界面在pages下，名称为a2的界面。@是更改的内容*/
"pages": [
"pages/a2/a2" /@直接在这里创建目录（系统会自动补充四个文件）
],
"window": {
"backgroundTextStyle": "light",/下拉背景字体，loading图的样式，仅支持（light/dark）
"navigationBarBackgroundColor": "#fff",/导航栏背景颜色(#000000)
"navigationBarTitleText": "WeChat",/导航栏标题文字内容
"navigationBarTextStyle": "black"/导航栏标题颜色（仅支持black/white）
},
"sitemapLocation": "sitemap.json"/小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引
}
更改前：界面结构如下
更改后：界面结构中多出来了一个a2目录，并且该目录下也同时创建了相应的a2.js、a2.json、a2.wxml、a2.wxss.
- 第四步 我们开始写简易计算器的界面（标题、背景颜色、字体、是否允许下拉刷…），我们打开a2目录下的a2.wxml，这里的微信ml相当于HTML，我们在这里通过标签设置我们的界面.
//这里使用view视图容器组件(分区分块)来设置四个不同的按钮一行/一列显示
//这里通过button(按钮)来设置一个清除按钮
更改前模拟器的界面如下所示：一片空白
更改后点击编译后模拟器的界面内容如下所示：
- 第五步 我们打开a2目录下的a2.wxss输入下面代码块中的命令对整个界面的布局进行调整（四个按钮横向摆放、按钮的宽度、文体的居中…）
//在.wxml中设置a2.wxss后的界面如下所示：
- 第六步 依葫芦画瓢，继续在a2.wxml中添加计算器其他部分的代码（1-9 ±/*…）
更改之后的模拟器显示界面如下所示：
- 第七步：我们看上面的界面觉得还是有点不对劲，最下面一行的只有三个按钮，明显与上面的一行四个按钮格格不入，这是我们打开a2.wxml，在class里面加入一个zero，打开a2.wxss，将零按钮的宽度加长
//a2.wxml
//修改代码前
//修改代码后
/在原来的a2.wxss中加入如下代码块
.zero{
width: 376rpx;
}
更改代码后模拟器显示界面如下：
- 第八步：计算器的键盘应该是放置于最底部的，因此，我们添加如下代码块将键盘放置在最底部，首先我们将显示四行按钮的代码放入一个新的view中做为子view，添加一个class=“bottom”，同时我们在a2.wxss中添加bottom的样式距离底部距离为0
/a2.wxml添加如下内容
xxx
xxx
xxx
xxx
/a2.wxss中添加如下代码内容
.bottom{
position: fixed; //生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
bottom: 0; //距离底部0px：
}
更改后得模拟器界面如下：
这是的a2.wxml中存在的内容截图为：（a2.js、a2.json我们到这步一直不去动它）
这是的a2.wxss中存在的内容截图为：
- 第九步：既然是计算器，那么我们应该有显示界面，so我们在a2.wxss中添加如下代码块，还有就是为了整个界面的美观性我们的键盘应该有不同的颜色，所以，我们对不同的按钮添加不同的class=“white/orange/gry”，在a2.wxss中添加对应的.white{白色}，.orange{橙色}，.gry{灰色}
//a2.wxml
//a2.wxss
page{
background: #000 //定义该显示屏的颜色为黑色
}
.white{
background:#EFEFED;
}
.orange{
background: #FC9504;
}
.gry{
background: #CFCFCF;
}
更改后模拟器界面如下所示：
- 第十步：我们添加一个白色的000来定位我们使用计算器计算出来的值显示的位置
//定义嵌套的两个view，第一个view将整个黑色的背景框固定下来
000 //第二个view用于定位000的显示位置
.screen{ //class="screen" -->.screen{xxx}
position: fixed;
bottom: 750rpx;
word-wrap: break-word; /允许长单词换行到下一行：
width: 745rpx;
}
.screen view{ /嵌套的class可以直接通过.screen view{xxx}来调整嵌套在内部的各个属性
color: #fff; /白色
font-size: 30px; /字体大小
text-align: right; /字体靠右显示
margin-right: 30rpx; /距离右端30rpx
}
更改后模拟器界面如下所示：
- 第十一步：更改icon图标的颜色和显示的位置
/a2.wxml
/a2.wxss，注意，这里不是.icon{}，而是icon{}
icon{
position: absolute; /生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
left: 55rpx;
top:37rpx;
}
button::after{ /将各个圆角按钮变成矩形按钮
border-radius: 0;
}
更改后的模拟器显示界面为：
- 第十二步：我们为每个按钮添加一个事件，我们点击按钮时，按钮的颜色会变化成灰色0.2s，来模拟我们点击计算器的效果
/a2.wxml
/更改前
/更改后（注：所有的按钮全部加上hover-class="shadow"）
/a2.wxss
.shadow{
background: #999;
}
为了让大家更加直观的感受到，按键前后发生的变化，这里采用对比图
点击之前：
点击完之后:
- 第十三步：之前小编出现了一个小错误，我们只有1-6，没有7 8 9的，所以我们补充之前落下的东西，在界面上添加一行789*
/a2.wxml中在整个界面中添加下面的代码块
/a2.wxss 由于我们增加了一行，而整个界面是固定的，所以为了界面的美观我们应该更改按钮的高度
.btn-item{
width: 189rpx;
text-align: center;
line-height: 145rpx; /原来这里是180rpx
border-radius: 0;
}
更改后的模拟器界面如下所示：
- 第十四步：这个时候我们的界面已经全部搭建完成，下面我们开始写逻辑层的代码，也就是我们点击之后整个界面会发生什么变化，也就是从这里开始，我们开始写a2.js的代码
/a2.js 原来的a2.js中的系统默认给我们的代码全部删除，增加如下代码
Page({
data: { /通过id值的不同来绑定每一个不同的按钮
id1:"clear",
id2:"back",
id3:"history",
id4:"div",
id5:"num_7",
id6:"num_8",
id7:"num_9",
id8:"mul",
id9:"num_4",
id10:"num_5",
id11:"num_6",
id12:"sub",
id13:"num_1",
id14:"num_2",
id15:"num_3",
id16:"add",
id17:"num_0",
id18:"dot",
id19:"equals",
result:"0",
},
})
/a2.wxml
{{result}}
//更改前
{{result}}
//更改后通过a2.js中data的result来绑定这个view的具体值
**********************************************************
//更改前
//更改后（通过使用我们a2.js中定义的键值对的键来标识不同的按钮）
- 第十五步：这是稍微复杂的一步，大家注意理解。首先我们将通过在view控件添加bindtap="clickButton"来实现事件的处理
/a2.wxml
/更改前
/更改后
/a2.js
Page({
data: {
id1:"clear",
id2:"back",
id3:"history",
id4:"div",
id5:"num_7",
id6:"num_8",
id7:"num_9",
id8:"mul",
id9:"num_4",
id10:"num_5",
id11:"num_6",
id12:"sub",
id13:"num_1",
id14:"num_2",
id15:"num_3",
id16:"add",
id17:"num_0",
id18:"dot",
id19:"equals",
result:"0",
},
clickButton: function(e){ /实现对bindtap="clickButton"的clickvButton的功能函数
console.log(e); /打印log 具体可见log1图
var btnValue=e.target.id; /由图可知，我们的通过id绑定之后我们能够id来识别该按钮
var res=this.data.result; /通过res来接收并判断data中result的值
if(btnValue>="num_0"&&btnValue<="num_9"){
console.log(btnValue.split('_')); /打印log 具体可见log2图
var num=btnValue.split('_')[1]; /将id中num_1中的1分离出来
if(res=="0"){ /如果res还是等于0，那么说明数字按钮0按下了，那么显示屏上应该显示数字0
res=num;
}else{ /如果res不等于0，那么我们就在该数字后面添加按下的数字
res=res+num;
}
}
this.setData({ /通过setData 将按下的值传给data中的result：xxx，然后通过a2.wxml来显示我们更改的xxx的值
result: res,
});
}
})
因为有的小伙伴可能已经糊涂了，所以我把从开始写计算器开始到现在的代码贴出来，如下所示：
a2.js到现在的全部代码：
Page({
data: {
id1:"clear",
id2:"back",
id3:"history",
id4:"div",
id5:"num_7",
id6:"num_8",
id7:"num_9",
id8:"mul",
id9:"num_4",
id10:"num_5",
id11:"num_6",
id12:"sub",
id13:"num_1",
id14:"num_2",
id15:"num_3",
id16:"add",
id17:"num_0",
id18:"dot",
id19:"equals",
result:"0",
},
clickButton: function(e){
console.log(e);
var btnValue=e.target.id;
var res=this.data.result;
if(btnValue>="num_0"&&btnValue<="num_9"){
console.log(btnValue.split('_'));
var num=btnValue.split('_')[1];
if(res=="0"){
res=num;
}else{
res=res+num;
}
}
this.setData({
result: res,
});
}
})
a2.wxml到现在的全部代码：
{{result}}
a2.wxss到现在的全部代码：
page{
background: #000;
}
.btngroup{
display: flex;
flex-direction: row;
}
.btn-item{
width: 189rpx;
text-align: center;
line-height: 145rpx;
border-radius: 0;
}
.zero{
width: 376rpx;
}
.bottom{
position: fixed;
bottom: 0;
}
.white{
background:#EFEFED;
}
.orange{
background: #FC9504;
}
.gry{
background: #CFCFCF;
}
.screen{
position: fixed;
bottom: 750rpx;
word-wrap: break-word;
width: 745rpx;
}
.screen view{
color: #fff;
font-size: 30px;
text-align: right;
margin-right: 30rpx;
}
icon{
position: absolute;
left: 55rpx;
top:37rpx;
}
button::after{
border-radius: 0;
}
.shadow{
background: #999;
}
log1图:
log2图：
按下0后的模拟器界面图：
连续按下0123456789后的模拟器界面图：
- 第十六步：按下小数点时可以在显示屏上的数字后面跟上一个小数点，如果后面继续按下小数点则无效，只有按下的第一个小数点有效，代码更改如下所示：
/a2.js 新增加的部分，后面会有注释说明这一步产生的作用
Page({
data: {
id1:"clear",
id2:"back",
id3:"history",
id4:"div",
id5:"num_7",
id6:"num_8",
id7:"num_9",
id8:"mul",
id9:"num_4",
id10:"num_5",
id11:"num_6",
id12:"sub",
id13:"num_1",
id14:"num_2",
id15:"num_3",
id16:"add",
id17:"num_0",
id18:"dot",
id19:"equals",
result:"0",
dotSign:false, /增加一个键值dotSign:false，用来判断如果小数点按下该值变为真，如果下次再按则不会再次出现小数点
},
clickButton: function(e){
console.log(e);
var btnValue=e.target.id; /获取id的值，小数点的btnValue值为dot
var res=this.data.result;
var newDotSign=this.data.dotSign; /通过一个变量newDotSign来接收dotSign的值（true/false）
if(btnValue>="num_0"&&btnValue<="num_9"){
console.log(btnValue.split('_'));
var num=btnValue.split('_')[1];
if(res=="0"){
res=num;
}else{
res=res+num;
}
}else{ /上面用来判断数字的显示，这里使用else来判断小数点的按下后是否显示
if (btnValue=="dot"){ /如果是小数点
if(!newDotSign){ /如果！newDotSign是为false，则代表添加小数点，如果为true，则不显示
res=res+'.'; /在数字的后面添加一个小数点，+代表连接符
newDotSign=true; /将newDotSign置为true，用于下一次判断按下小数点将不会显示
}
}
}
this.setData({
result: res,
dotSign:newDotSign, /通过设置dotSign: true/false更新整个的data的值
});
}
})
更新代码后模拟器界面如下所示：
- 第十七步：我们来设置清除和回退的功能按钮
/a2.js
clickButton: function(e){
console.log(e);
var btnValue=e.target.id;
var res=this.data.result;
var newDotSign=this.data.dotSign;
if(btnValue>="num_0"&&btnValue<="num_9"){
console.log(btnValue.split('_'));
var num=btnValue.split('_')[1];
if(res=="0"){
res=num;
}else{
res=res+num;
}
}else{
if (btnValue=="dot"){
if(!newDotSign){
res=res+'.';
newDotSign=true;
}
}else if(btnValue=="clear"){ /如果btnValue值等于清除
res="0"; /设置res=0，显示在屏幕上的就是0
newDotSign = false; /重新设置小数点为默认值false 表示可以再次按下显示
}else if(btnValue=="back"){ /如果btnValue值等于回退
var length=res.length; /通过length获取目前屏幕上res的长度，也就是上一次按键结束，这一次按键开始前屏幕上显示的数
if(length>1){ /如果长度>1
res=res.substr(0,length-1); /通过substr截图从0-倒数第二个数，然后更新res的值
}else{ /如果长度=1或者=0那么就会设置res的值为0
res="0";
}
}
}
this.setData({
result: res,
dotSign:newDotSign,
});
}
})
清除前模拟器的显示界面：
清除后模拟器的显示界面：
回退前模拟器的显示界面：长度>1是按下回退键之后的显示界面：
长度=1/0时按下回退键之后的显示界面：
- 第十八步：判断±*/四个按钮按下之后会出现的效果
else if(btnValue=="back"){
var length=res.length;
if(length>1){
res=res.substr(0,length-1);
}else{
res="0";
}
}else if(btnValue=="add"||btnValue=="sub"||btnValue=="mul"||btnValue=="div"){ /分别判断是否按下+-*/
newDotSign=false;/小数点置为false表示按下符号之后可以再次输入小数点（12.5+15.5）
var sign;
switch (btnValue){ /分别将add-->"+" sub-->"-"...
case "add":sign = "+"; break;
case "sub":sign = "-"; break;
case "mul":sign = "*"; break;
case "div":sign = "/"; break;
}
if(!isNaN(res.charAt(res.length-1))){ /判断显示屏最后一个是否为符合，如果是不能再次按下符号，必须按下其他的数字后才能再次按下符号
res = res + sign;
}
}
}
this.setData({
result: res,
dotSign:newDotSign,
});
按下符号键的模拟器界面如下：
- 第十九步：我们开始进行最为关键的等于号的逻辑结构代码编写，这次我们不用跟在后面写else，而是重新编写一个函数用于等于产生的结果的编写
/a2.wxml
/这里的bindtap="clickButton" 改为bindtap="equals"
this.setData({
result: res,
dotSign:newDotSign,
});
}, /注意，这里要加一个逗号来结束上一段功能函数代码的结束
equals:function(){ /等于号的函数功能编写
var str=this.data.result; /先获取显示屏上的数字和符号例如10+2*3-4
var strArr=[]; /定义一个数组用于分别存放数字和符号，存放方式为|10 + 2 * 3 - 4|
var item=''; /定义一个item默认为空
var temp=0;
for(var i=0;i<=str.length;i++){ /循环获取整个显示屏上的内容
var ch=str.charAt(i); /获取显示屏第i位的值为ch
if((ch!=''&&ch>=0&&ch<=9)||ch=="."){ /如果ch！=空并且ch>=0 <=9 or ch==小数点
item=item+ch; /item后连接显示屏第i位的值ch 例如10+2*3-4 第一次循环是" "连接1
}else{ /如果是符号
strArr[temp]=item; /将item的值10存入 strArr[0]中
temp++; /temp=1
strArr[temp]=ch; /再将符号"+"存入strArr[1]中
temp++; /temp=2
item=''; /item清空
}
}
if (isNaN(strArr[strArr.length-1])){ /如果末尾有符号则清除末尾的符号，例如12+45+，则最后的"+"利用pop清除
strArr.pop();
}
for (var i = 0; i （10+2*3-4）log图如下所示：将整个输入的值分别保存至数组中，从而将数字与符号分隔开
- 第二十步：最后我们来完善整个计算器，让计算器按下xx+xx=tt，让这个tt能在显示屏上面显示出来
/|10+2*3-4|，首先获取第一个数10(res)，然后获取第一个符号，然后获取第二个数2(num)，
然后在进行res=res+num;
然后获取第二个符号*，然后获取第三个数3为新的num
然后进行res=res*num;接下来依次如此，知道算出来最后的res的值显示于主屏幕上
if (isNaN(strArr[strArr.length-1])){
strArr.pop();
}
var res=strArr[0]*1; /这是按下等于号之后的将res的值变化为第一个数，例如按下7 接着按下=，则会出现=7
var num;
for(var i=1;i="num_0"&&btnValue<="num_9"){
console.log(btnValue.split('_'));
var num=btnValue.split('_')[1];
if (res == "0" || res.charAt(res.length - 1) == '∞'){
res=num;
}else{
res=res+num;
}
}else{
if (btnValue=="dot"){
if(!newDotSign){
res=res+'.';
newDotSign=true;
}
}else if(btnValue=="clear"){
res="0";
newDotSign = false;
}else if(btnValue=="back"){
var length=res.length;
if(length>1){
res=res.substr(0,length-1);
}else{
res="0";
}
}else if(btnValue=="add"||btnValue=="sub"||btnValue=="mul"||btnValue=="div"){
newDotSign=false;
var sign;
switch (btnValue){
case "add":sign = "+"; break;
case "sub":sign = "-"; break;
case "mul":sign = "*"; break;
case "div":sign = "/"; break;
}
if(!isNaN(res.charAt(res.length-1))){
res = res + sign;
}
}
}
this.setData({
result: res,
dotSign:newDotSign,
});
},
equals:function(){
var str=this.data.result;
var strArr=[];
var item='';
var temp=0;
for(var i=0;i<=str.length;i++){
var ch=str.charAt(i);
if((ch!=''&&ch>=0&&ch<=9)||ch=="."){
item=item+ch;
}else{
strArr[temp]=item;
temp++;
strArr[temp]=ch;
temp++;
item='';
}
}
if (isNaN(strArr[strArr.length-1])){
strArr.pop();
}
var res = parseInt(strArr[0]);
var num;
for(var i=1;i
{{result}}
//a2.wxss
page{
background: #000;
}
.btngroup{
display: flex;
flex-direction: row;
}
.btn-item{
width: 189rpx;
text-align: center;
line-height: 145rpx;
border-radius: 0;
}
.zero{
width: 376rpx;
}
.bottom{
position: fixed;
bottom: 0;
}
.white{
background:#EFEFED;
}
.orange{
background: #FC9504;
}
.gry{
background: #CFCFCF;
}
.screen{
position: fixed;
bottom: 750rpx;
word-wrap: break-word;
width: 745rpx;
}
.screen view{
color: #fff;
font-size: 30px;
text-align: right;
margin-right: 30rpx;
}
icon{
position: absolute;
left: 55rpx;
top:37rpx;
}
button::after{
border-radius: 0;
}
.shadow{
background: #999;
}
//a2.json
{
"usingComponents": {}
}
更改代码后模拟器截图如下所示：
- 希望小编了几天时间写的这个教程能够帮助大家从一个不懂微信开发的新手们极大的缩短微信开发的周期和整个过程，并且跨过那道难以逾越的天堑，向着能够自己开发微信小程序的大佬们快速前进！！