小程序学习--页面设置

案例一  float页面布局效果

1.案例的整体介绍

设计一个小程序，利用float布局来实现页面的布局效果。有两种效果分别是上左右下和上左中右下。

2.案例的代码详解

(1)index.wxss  视觉层代码解析

整体样式是外框box和标题title,在app.wxss中写明(详细代码见前文)，中间是两个框架，bg1和bg2，框架中依次有4个和5个格子，在wxss文件中写明。

(2)index.wxss 格式设置

第一块背景框bg1，设置整体高度240，在box1,2,3,4分别为80，整体宽度200，box1,2,3,4都是100。边距margin，第一参数表示上下边距为，auto表示左右间距。实现上左右下的格式。

不同view默认另起一行。

box1中上下和bg1边距为0，在bg1中水平居中。box2中左浮动，靠在bg1的左边界上，默认换行了。box3中右浮动，靠在bg1的右边界上，未换行。

box4清除了前面左右浮动的格式，默认换行 了，设置离bg1上下边距为0，左右边距平均分配，水平居中相对于bg2。

第二块背景框架bg2，整体高度400，分别为100,200，200,200,100，宽度默认为布局宽度，text-align设置其中文本居中对齐。上下边距为10，左右居中对齐。

header，定义行高即文本内容高度100，默认height和line-height相同，则文本水平居中对齐。

leftbar：宽度为bg2宽度的20%，且通过左浮动靠左对齐，设置列高为200，则高度height也为200，文本垂直居中。

main:宽度为bg2的60%，且通过左浮动考到leftbar旁边，设置列高为200，等于文字高度，文本垂直居中。

rightBar中宽度为bg2的20%，且通过右浮动靠近bg2右侧，左侧刚好是main。列高为200，等于文字高度，文本垂直居中。

footer:列高为100，等于文字高度，文本垂直居中，清楚前面左右浮动，默认换行。没有提供宽度，默认整行。

最后再来一个实现效果图

(3)知识点介绍

(4)小总结 ---居中对齐的方式

1.水平居中对齐,margin: 10px   auto

2.垂直居中， 设置line-height，则height默认等于line-height，居中。

案例二  简单功能实现  温度单位转换

(1)案例的整体介绍

(2)案例的代码详解

1.wxml中代码介绍，视觉层

整体样式和前面的一样，外框加标题，在wxss中设置

里面第一个view显示标题

第二个中有一个input组件，placeholder 占位符 显示提示内容。type=digit表示输入的是数字，显示数字键盘， bindblur表示绑定了一个失去焦点事件，发生后会调用一个函数calc，进行运算，是在js中定义的，函数返回结果用一个数据的绑定,用｛｛变量｝｝实现，直接返回到F。通过数据和事件的绑定实现视图层和逻辑层之间的通信。

2.wxss中样式的设定。

设置上下、左右边距，还有下边框格式。

3.index.js逻辑层的设计。

事件绑定函数定义在page(｛｝)中   函数名：function(变量)｛｝，然后在函数中先定义变量。赋值直接获取input组件的值，即在输入完成后点击其他地方引发失去焦点事件，函数被调用，输入的值被传入。那最后计算的值怎么从逻辑层传递到视图层呢，this.setData是一个内置函数，参数是对象参数，通过冒号后面加计算表达式给对象赋值，然后在传递到视图层看到结果。

4.实现效果，点击其他地方，引发失去焦点事件，从而调用函数进行计算

(3)知识点介绍

顺序结构 使用，其中有数学运算，数据的输入和输出。事件和数据的绑定。

案例三 条件语句和数学函数

1，整体介绍

条件结构和数学函数的使用，输入值，通过函数的计算得到值，同样也是用失去焦点的事件引发来开始计算。输入输出模式和上一个案例相同，但内部有条件判断结构。

2，代码介绍与详解

(1)index.wxml视图层的代码详解

首先是边框和标题在app.wxss文件中设置。然后第二个view中有input组件，placeholder属性，占位符，提示文本；绑定事件calc，bindblur表示失去焦点的事件，即输入后点击其他地方，输入框就会失去焦点，从而调用这个函数。第二个view，输出计算结果，进行数据的绑定，通过函数，有x就可以计算得到y，再根据setData函数将y的值发送到视图层就可以看到结果了。

(2)index.wxss样式定义

下划线设置为1个像素，实线，蓝色，设置上下边距20，左右0。

(3)index.js 逻辑层设置

主要定义了一个失去焦点的函数，calc，参数e代表那个事件。首先定义了两个变量x，y。x被赋值为失去焦点后获得输入框input组件的值。再计算，判断加求解，其中用到判断语句if--else，类似c语言语法，一些数学函数通过Math.函数名 来调用。最后再通过setData函数来将我们求解到的值返回到视图层，实现效果。

3.知识点总结

(1)条件语句的使用格式

滑动查看更多

(2)数学函数的表示

(3)总结

在逻辑层和视觉层之间的交流先通过事件绑定来实现，失去焦点的函数  bindblur=“函数名”,在事件触发后，通过 参数=事件.detail.value 得到输入的值，在里面运算得到结果，再通过this.setData({  输出参数： 计算结果}) 把输出结果传到视觉层。

案例三 计算学生平均成绩 ---逻辑运算符和按钮组件

1.案例的整体介绍和实现思路

有输入框提供输入，再经过中间运算后再输出。

效果如图

2.详细的代码实现过程

(1)index.wxml 视觉层代码，主要是页面显示效果。

如前文的例子一样，整体设置一个边框box，开头设置标题为title样式。

接着三个input组件的输入框，placeholder占位符，提示语句，通过placeholder-class设置其对应样式的，即提示文本样式，定义在wxss中，用的样式名是placeholder，最后 bindinput是事件 的绑定，表明我们输入的时候引发的事件，一输入就会引发事件调用后面的函数，type表示输入的类型。button组件绑定了点击按钮事件对应的函数叫mysbumit，这些事件绑定的函数在js中定义。

显示效果：正确显示了边框和标题以及要输入的三个对象的格式，通过提交按钮来把数据传到逻辑层进行运算。

最后是一个输出结果的显示，view中的hidden属性对应flag，而flag默认为ture，所以是被隐藏了，通过改变flag来进行显示，达到结果。输出布局样式用的是content，而里面view的样式用的是content-item,最后输出还有数据的绑定，实现了逻辑层到视觉层之间的交流。在这段代码中，得到结果后的输出过程，先是隐藏，输出再显示，输出依次有提示和通过数据绑定得到显示的值。

(2)index.wxss  样式设置

page针对整个页面的，背景为huise

占位符，指定字的大小15个像素

input组件的样式，背景白色，高度，外边距，左内边距，边界实线，粗细，颜色

botton，按钮，边距，上下，左右，背景颜色，文本颜色

content，输出区域，背景，内边距，文本颜色

content-item:content中的样式：内边距，文本大小，行距

(3)index.jx逻辑层的设置

首先定义了data的属性值，flag为ture，输出不显示，后面可以说是初始化，为空。后面定义了三个事件绑定函数，用来给对应绑定的数据赋值，用我们输入的值赋值到wxml中数据绑定的变量，输入往后，点击提交引发绑定函数，如果输入的值有空会返回，如果都输入 了，定义变量，进行计算，注意输入默认为字符，如果要变为数组，可以 *1操作，得到数字结果，最后，通过setData，赋值给绑定数据，且给flag赋值为false，显示输出。

(3)总结和知识点介绍

开始是数据是输入，有一些样式设计，占位符提示和输入样式设计，然后输入事件函数绑定，输入后引发事件绑定的函数，输入值在逻辑层通过this.setData({变量：e.detail.value})赋值绑定到变量上，这里是数据绑定，后面输出通过数据绑定来实现。在逻辑层,通过上面已经赋值的变量，通过this.data.变量名使用变量进行判断和计算，同样e.detail.value也可以获得输入的值。最后的计算结果再通过赋值进行数据绑定，传递计算的值和修改某些参数的值，进而在视觉层可以使用输出结果。

逻辑运算符同c语言，还有botton组件的使用方法。

案例四 循环求和计算器

1 利用循环语句求解输入两个数据之间的整数和

展现形式为：外框，标题，两个输入框输入两个数据，下面有一个输出框。

设计思路：用失去焦点的事件绑定函数来传入输入的值，再通过循环计算，通过数据绑定来输出数据。

(2)代码详解

1.wxml

先是边框和标题，同之前的小程序设计。

再是一个view中有两个input组件，给了一个placeholder属性，文本提示，类型type是数字，用数字键盘输入，bindblur表示一旦失去焦点后会调用函数，获取输入的数值，最后一个是数据的输出结果，通过数据的绑定来实现的，sum在js中定义传递过来的，后面button，按钮，点击会引发调用事件函数calc，按钮类型type是primary，对应图中效果。文字为求和。

2.wxss

先定义了input组件的样式，下边框线，上下外边距为20，左右外边距为0，还有botton组件，外边距为20，分开。

3.js

先定义了三个全局变量，在文件中各个位置都可以使用。

再定义了三个事件绑定函数，输入完成后，一旦失去焦点，就会调用startNum和endNum，把输入的值转换用parseInt成整数赋值给变量。在calc中，变量赋值，然后有for循环求解，同c语言中for的使用，得到结果后，采用this.setData({})把全局变量sum的值渲染到视图层

补充：一旦失去焦点事件发生后，会调用事件函数，获取相应的数值，而显示结果是通过数据绑定来实现的

(3)知识点总结

01

02

03

04

滑动查看更多

总结 ：循环语句的使用，同c

全局对象函数的使用 ---一些函数

全局变量的定义------定义位置

注意事项

1. 微信小程序打好的代码要编译或者是保存，直接退出会不见的。(惨痛的经历)

点击蓝字 关注我们

期待你的

分享

点赞

在看

新手学习，如有不对，请 指正！