⼿把⼿教你进⾏⼩程序开发案例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 class="btngroup">//这⾥使⽤view视图容器组件(分区分块)来设置四个不同的按钮⼀⾏/⼀列显⽰
<button class="btn-item">清除</button>//这⾥通过button(按钮)来设置⼀个清除按钮
<button class="btn-item">回退</button>
<button class="btn-item">//class="xxx"，⽀持在.wxss中使⽤xxx来控制组件的样式。
<icon type="waiting"></icon>//这⾥不使⽤⽂字，⽽是通过⾃带的图标嵌⼊第三个按钮上
</button>
<button class="btn-item">/</button>
</view>
更改前模拟器的界⾯如下所⽰：⼀⽚空⽩
更改后点击编译后模拟器的界⾯内容如下所⽰：
第五步 我们打开a2⽬录下的a2.wxss输⼊下⾯代码块中的命令对整个界⾯的布局进⾏调整（四个按钮横向摆放、按钮的宽度、⽂体的居中…）
//在.wxml中<button class="btn-item">class="xxx"，⽀持在.wxss中使⽤xxx来控制组件的样式。
/*上⾯的wxml中 view定义了⼀个class"btngroup"，通过设置.btngroup的样式属性来更改*/
.btngroup{
display: flex; /设置多栏多列布局
flex-direction: row; /view容器中的组件为横向排列
}
/*button定义了⼀个class"btn-item"*/
.btn-item{
width: 190rpx; /宽度为190rpx（相当于整个屏幕的1/4）写文章的小程序
text-align: center; /对齐元素中的⽂本（居中）
line-height: 150rpx; /设置⾏⾼15rpx
border-radius: 0; /按钮的边框⾓度为0，将圆⾓边框变为矩形框
}
设置a2.wxss后的界⾯如下所⽰：
第六步 依葫芦画瓢，继续在a2.wxml中添加计算器其他部分的代码（1-9 ±/*…）
<view class="btngroup">
<button class="btn-item">清除</button>
<button class="btn-item">回退</button>
<button class="btn-item">
<icon type="waiting"></icon>
</button>
<button class="btn-item">/</button>
</view>
<view class="btngroup">
<button class="btn-item">4</button>
<button class="btn-item">5</button>
<button class="btn-item">6</button>
<button class="btn-item">-</button>
</view>
<view class="btngroup">
<button class="btn-item">1</button>
<button class="btn-item">2</button>
<button class="btn-item">3</button>
<button class="btn-item">+</button>
</view>
<view class="btngroup">
<button class="btn-item">0</button>
<button class="btn-item">.</button>
<button class="btn-item">=</button>
</view>
更改之后的模拟器显⽰界⾯如下所⽰：
第七步：我们看上⾯的界⾯觉得还是有点不对劲，最下⾯⼀⾏的只有三个按钮，明显与上⾯的⼀⾏四个按钮格格不⼊，这是我们打开a2.wxml，在class⾥⾯加⼊⼀个zero，打开a2.wxss，将零按钮的宽度加长
//a2.wxml
<button class="btn-item">0</button>//修改代码前
<button class="btn-item zero">0</button>//修改代码后
/在原来的a2.wxss中加⼊如下代码块
.zero{
width: 376rpx;
}
更改代码后模拟器显⽰界⾯如下：
第⼋步：计算器的键盘应该是放置于最底部的，因此，我们添加如下代码块将键盘放置在最底部，⾸先我们将显⽰四⾏按钮的代码放⼊⼀个新的view中做为⼦view，添加⼀个class=“bottom”，同时我们在a2.wxss中添加bottom的样式距离底部距离为0
/a2.wxml添加如下内容
<view class="bottom">
<view class="btngroup">xxx</view>
<view class="btngroup">xxx</view>
<view class="btngroup">xxx</view>
<view class="btngroup">xxx</view>
</view>
/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
<button class="btn-item gry">清除</button>
<button class="btn-item white">4</button>
<button class="btn-item orange">+</button>
//a2.wxss
page{
background: #000 //定义该显⽰屏的颜⾊为⿊⾊
}
.white{
background:#EFEFED;
}
.
orange{
background: #FC9504;
}
.gry{
background: #CFCFCF;
}
更改后模拟器界⾯如下所⽰：
第⼗步：我们添加⼀个⽩⾊的000来定位我们使⽤计算器计算出来的值显⽰的位置
<view class="screen"> //定义嵌套的两个view，第⼀个view将整个⿊⾊的背景框固定下来
<view>000</view> //第⼆个view⽤于定位000的显⽰位置
</view>
.
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
<icon type="waiting"></icon>/更改前
<icon type="waiting" size='30' color="#999"></icon>/更改后
/a2.wxss，注意，这⾥不是.icon{}，⽽是icon{}
icon{
position: absolute; /⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。
left: 55rpx;
top:37rpx;
}
button::after{  /将各个圆⾓按钮变成矩形按钮
border-radius: 0;
}
更改后的模拟器显⽰界⾯为：
第⼗⼆步：我们为每个按钮添加⼀个事件，我们点击按钮时，按钮的颜⾊会变化成灰⾊0.2s，来模拟我们点击计算器的效果
/a2.wxml
<button class="btn-item gry">清除</button>/更改前
<button hover-class="shadow" class="btn-item gry">清除</button>/更改后（注：所有的按钮全部加上hover-class="shadow"）
/a2.wxss
.shadow{
background: #999;
}
为了让⼤家更加直观的感受到，按键前后发⽣的变化，这⾥采⽤对⽐图
点击之前：
点击完之后:
第⼗三步：之前⼩编出现了⼀个⼩错误，我们只有1-6，没有7 8 9的，所以我们补充之前落下的东西，在界⾯上添加⼀⾏789*
/a2.wxml中在整个界⾯中添加下⾯的代码块
<view class="btngroup">
<button hover-class="shadow" class="btn-item white">7</button>
<button hover-class="shadow" class="btn-item white">8</button>
<button hover-class="shadow" class="btn-item white">9</button>
<button hover-class="shadow" class="btn-item orange">*</button>
</view>
/a2.wxss 由于我们增加了⼀⾏，⽽整个界⾯是固定的，所以为了界⾯的美观我们应该更改按钮的⾼度
.btn-item{
width: 189rpx;
text-align: center;
line-height: 145rpx;  /原来这⾥是180rpx
border-radius: 0;
}
更改后的模拟器界⾯如下所⽰：
第⼗四步：这个时候我们的界⾯已经全部搭建完成，下⾯我们开始写逻辑层的代码，也就是我们点击之后整个界⾯会发⽣什么变化，也就是从这⾥开始，我们开始写a2.js的代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

5个有用有新意的小程序
« 上一篇
前端开发中的小程序开发指南
下一篇 »

发表评论