上一讲，我们已经创建了一个微信小程序项目，简单分解了项目中的文件及页面功能，本节，我们继续以上节课程中创建的项目以蓝本进而示意更多页面及业务逻辑的开发。
大部分程序都是要求用户登录后才可以使用的。我们就行实现一个简单的登录页面，从中理解更多的关于页面布局、页面结构等的技能及知识。
如上图，在pages文件中右键，选择->新建文件夹，我们先创建一个文件目录，命名为login,用于存放、隔离不同的页面，这样做的目的是方便管理，因为微信小程序的一个页面分为4个不同的文件，试想一下，当你项目很大时，将不同的页面都放在pages目录下，是多么的不方便编辑及维护。创建文件夹完成后，在login文件夹上右键，选择"新建Page"项，输入名称为login，这样便创建了一个页面。
然后打开app.json文件，将pages节点下的"pages/login/login",调整到该节点的第一个位置。注意最后一项末尾是没有英文逗号的。ctrl+s保存文件，你即可以观察到页面的显示变化已经不再是上一节创建的项目的页面了。
我们打开login.wxml页面文件发现，默认生成了一个显示的组件，显示的内容为一串字符串：“pages/login/login.wxml”
再看看login.js文件，里面生成了页面相关的所有的生命周期的函数(方法)，或者叫接口，或者叫句柄。我们现在来分析一下这个页面的生命周期函数。
data，定义的是一个字典类型，里面声明本页面所需要用到的所有的相对于本页面的全局变量。我在其中定义了两个变量，用户名和密码，将来和页面进行双向绑定。那么什么是双向绑定？双向绑定即为描述两个事物的关系，A的量值发生变化会立即反应到B，B的量值发生变化会立即反馈到A。你这样通俗理解就好了。至于官方怎么定义的，我也不知道，我也不关心。注意data里面变量的定义，变量名：值。其实这里称为变量有些牵强，它本质上是一个jsonObject对象，我们只是为这个对象增加属性而已。而这里的变量名：值叫做key-value键值对更好，你明白它的用途即为后面的逻辑提供数据即可。这里的值可以是数字(Number)、字符串(String)、数组([])、字典({})、日期(Date)、对象(object)等，根据你的页面业务灵活定义。
我们现在清空login.wxml里面默认的内容，实现一个简单的登录页面，包括用户名输入框、密码输入框、登录按钮，为了页面漂亮美观 ，我们再增加一个简单的页面背景图。
我在网上随机找了一个背景图素材，不和它是否搭配好看，我们只是为了示意，资源如下，你可以右键另存为，下载下来进行使用。
在项目资源管理器已有文件夹之外(如下图红框所示处右键)，右键，新建文件夹，命名为：resource,我们后续使用到的所有的图片、UI均放在此目录下。
将你下载的背景图放到这个resource文件夹中。方法是：选中背景图直接拖动了这个文件上，松开鼠标即可。或者是在项目中找到你这个文件夹，将图片复制进这个文件夹中也可以。哪个方便，你就用哪种。
一切就绪，我们现在写登录页面及样式。我们在login.wxss样式文件中书写以下样式，建议新手同学边看边写边理解。
我们在login.wxml文件中书写以下视图组件：
组件image有个mode属性，这个属性是用于控制图片的显示方式的，我们的设计同学并不会将同一个UI针对所有设备分辨率设计不同尺寸，当然设备分辨率太多了，针对不同的分辨率设计，也是不现实的。一般都是选择一个中间分辨率设计，这就要求我们对于某些设计UI进行最大化的复用而不出现较大的偏差，这个时候，我们就得用mode这个属性来控制这个图标的显示，如果设计图与设备的分辨率一致，则正常显示，如果宽、高有一个和设计图不符，那就裁剪或者是拉大，不要出现不和谐的背景透出。
官方给出的示例文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
同学们自行体会理解。这里就不展开篇幅来讨论它的内部实现，以后篇幅中，我们会讲解它的实现内部原理，并给出JS代码。
我们期待我们的登录页面是占满全屏的，不需要出现上方的导航栏，我们将其隐藏掉：这里说明一下，因为微信小程序的智能提示确实不够好，所以，你打入时候，注意拼写。同时它的值之所以是custom是因为原生APP里面对于导航栏的修改定制，都叫做自定义，所以，微信小程序中，对这个值的限定使用也是使用custom,你只要记得给这个值，导航栏就不会显示出来就行了。
打开login.json,增加"navigationStyle": "custom"的键值对，注意上一行末尾增加英文的逗号。
运行起来，看看页面。
很完美，不是？正确的显示了背景，导航栏也不见了，界面干干净净。看到右下方的调试器了吗？你可以将鼠标放在上面，看看每个组件的显示位置及大小。选中某一个视图组件，右下角可以看到它的样式。左侧可以看到视图的布局位置。
这里，我们重点看一下class为v-inter的视图的CSS样式
.v-inter {
position: relative;
bottom: 70%;
width: 100%;
height: 70%;
}
看到它的布局为相对于父视图的布局。它的父视图为class="v-container"的View,相对于父视图的底bottom为70%高度。即此视图的顶部到父视图的底部的高度为父视图的70%。或者理解为：此视图的底部与父视图的底部对齐，而此视图的顶部到父视图的底部为父视图高度的70%。注意这里不要与height混一块儿！！height只是表明此视图的高度为父视图的多多少，不参与视图间的顶、底计算。你可以将height由70%调整到60%多体会理解一下。
我们接着进行页面的开发，实现用户和密码的输入。
在login.wxss样式文件中新增以下三个样式类：
在login.wxml文件中增加以下视图组件，注意其中用到的两个小图标，自己随便找两个放在resource文件目录中。
保存，并查看左侧视图用户交互页面，即可看到最终开发出来的效果。
一般前端用户输入密码时，都不是明文显示，要么显示为***要么显示为...，我们稍做修改即可。如下：
为密码输入框组件input增加password属性，password="true",或者password亦可,组件属性为boolean定义的，只要写明属性值不带值时亦可，内部解析为true值。
输入用户名和密码功能已经做好了，我们希望要再点击确认按钮时，将用户输入的用户名和密码通过接口(webapi)上报给服务器，来确认当前的用户名和密码是否匹配正确。如果正确则进入下一个页面，错误，则给用户做出提示。现在我们进行修改页面，增加确认登录按钮。如下：
定义样式：(login.wxss)
增加组件：(login.wxml)
细心的同学一定看到了，针对用户名、密码输入框 ，我也增加了输入监听函数！为了后续的实战，你也需要按照如下增加。其目的是：当你输入字符，输入框失去焦点时自动将输入的内容保存到一个变量中！
增加相应的函数：(login.js)
当用户没有输入用户名和密码，我们有相应的提示。至此，登录页面就完成了开发，同学们，自行多研究看看。下一节，我们将研究通过微信一键登录的功能。
网友评论