微信小程序实验

（一）微信小程序开发工具安装和配置及“hello，world！”项目创建 

1. 实验目的：

通过本实验，学生将了解和掌握如何实现微信小程序开发的准备工作，相关开发工具的下载和安装以及简单项目的创建过程。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具 

3. 实验内容和步骤：

3.1 注册微信小程序开发账号

（步骤：主页-注册-激活-登记-管理后台，必须贴出相关截图，至少包括主页，注册页面和最后的管理后台页面）

3.2 获取微信小程序AppID

（步骤：管理后台-开发管理-开发设置，必须贴出包含AppID的页面截图）

3.3 安装微信开发者工具

（步骤：管理后台-开发工具-开发者工具-下载页面，必须贴出下载链接页面）

3.4 创建微信小程序项目“hello，world”

（要求：学号最后一位为0，2，4，6，8的同学，点击“hello，world要求文本变为”红色，学号最后一位为1，3，5，7，9的同学，点击“hello，world要求文本变为“hello，world要求显示为”蓝色）

（二）计算器设计（界面）

1. 实验目的：

通过本实验，学生将了解和掌握一般微信小程序的项目结构和页面组成，了解和掌握一般微信小程序的页面结构和页面样式的设计方法。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具

3. 实验内容和步骤：

1.1 在index.json文件中编写代码，配置导航栏的标题和颜色。（标题：“计算器”，背景颜色：白色，字体颜色：黑色）

{
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "计算器",
"navigationBarTextStyle": "black"
}

1.2 在index.wxml文件中编写代码，编写计算器页面结构。

（要求：学号最后一位为0，2，4，6，8的同学，按照下图设计键盘）

C	DEL	%	÷
1	2	3	X
4	5	6	+
7	8	9	-
.	0		=

（学号最后一位为1，3，5，7，9的同学，按照下图设计键盘）

C	DEL	+	-
7	8	9	X
4	5	6	÷
1	2	3	%
0	.	=

1.3 在index.wxss文件中编写代码，设计计算器页面样式

page {
display: flex;
flex-direction: column;
height: 100%;
color: #555;
}
.result {
flex: 1;
background: #f3f6fe;
position: relative;
}
.result-num {
position: absolute;
font-size: 27pt;
bottom: 5vh;
right: 3vw;
}
.result-op {
font-size: 15pt;
position: absolute;
bottom: 1vh;
right: 3vw;
}
.btns {
flex: 1;
}
.bg {
background: #eee;
}
.btns {
flex: 1;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
.btns > view {
flex: 1;
display: flex;
}
.btns > view > view {
flex-basis: 25%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.btns > view:last-child > view:first-child {
flex-basis: 25%;
}
.btns > view:first-child > view:first-child {
color: #f00;
}
.btns > view > view:last-child {
color: #fc8e00;
}
.btns > view:last-child > view:last-child {
flex-basis: 50%;
color: #fc8e00;
}

 1.4 页面展示

（三）计算器设计（功能） 

1. 实验目的：

通过本实验，学生将了解和掌握一般微信小程序的逻辑功能的实现方法，其中包括如何在页面结构.wxml文件中的代码里绑定相应的事件处理函数以及在.js文件中的代码里编写具体的事件处理函数。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具 

3. 实验内容和步骤：

3.1 修改后的页面结构wxml文件

<view class="result">
<view class="result-num">{{num}}</view>
<view class="result-op">{{op}}</view>
</view>
<view class="btns">
<view>
<view hover-class="bg" bindtap="resetBtn">C</view>
<view hover-class="bg" bindtap="delBtn">DEL</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
<view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
<view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
<view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
<view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
<view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
<view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
<view hover-class="bg" bindtap="dotBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>

3.2 数字按键按下处理函数

numBtn: function(e) {
var num = e.target.dataset.val
if (this.data.num === '0' || this.isClear) {
this.setData({
num: num
})
this.isClear = false
} else {
this.setData({
num: this.data.num + num
})
}
},

3.3 运算按键按下处理函数

opBtn: function(e) {
var op = this.data.op
var num = Number(this.data.num)
this.setData({
op: e.target.dataset.val
})
if (this.isClear) {
return
}
this.isClear = true
if (this.result === null) {
this.result = num
return
}
if (op === '+') {
this.result = calc.add(this.result, num)
} else if (op === '-') {
this.result = calc.sub(this.result, num)
} else if (op === '*') {
this.result = calc.mul(this.result, num)
} else if (op === '/') {
this.result = calc.div(this.result, num)
} else if (op === '%') {
this.result = this.result % num
}
this.setData({
num: this.result + ''
})
},

3.4 特殊按键按下处理函数

dotBtn: function() {
if (this.isClear) {
this.setData({
num: '0.'
})
this.isClear = false
return
}
if (this.data.num.indexOf('.') >= 0) {
return
}
this.setData({
num: this.data.num + '.'
})
},
delBtn: function() {
var num = this.data.num.substr(0, this.data.num.length - 1)
this.setData({
num: num === '' ? '0' : num
})
},
resetBtn: function() {
this.result = null
this.isClear = false
this.setData({
num: '0',
op: ''
})
}

3.5 页面功能测试（步骤和截图）

（要求：学号最后一位为0，2，4，6，8的同学，请测试20×12，学号最后一位为1，3，5，7，9的同学，请测试96÷8）