学习日志（一）

一：了解基本配置

进入创建的初始 demo 后，可以看到如下页面：

点击编辑后，可以发现右边目录结构中有两个文件夹以及根目录下的三个文件，三个文件分别为app.js、app.json、app.wxss,以下分别介绍这三个文件的作用：
app.js
app.js为脚本文件，我们可以在app.js中监听并处理小程序的生命周期函数、声明全局变量以及调用各类提供的 API。如初始demo中调用登录接口以及获取数据。

app.json

该文件由两部分组成，我们可以在定义页面的路径，也可以在里面定义一些小程序的窗口背景色，配置导航条样式，配置默认标题。我们可以发现，这正好对应pages文件中的两个页面。如果我们要添加新的页面，也需要在这里先申明路径，“pages”数组中的一个页面为小程序的首页。

app.wxss

app.wxss中定义小程序的公共样式，这里申明的样式我们可以在其他的页面中直接引用。

二：学习页面创建

前面介绍过这个初始demo中有两个页面，微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、 index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的文件是页面结构文件。下面一次看一下每个文件的内容：

index.wxml为页面结构，相当于我们写的.html文件，index.wxml与.html还是存在一些区别。我们发现上述文件中的</view>标签与.html中的</div>标签很相似。其他<view/>、<image/>、<text/>标签的使用与.html中类似。

index.js

index.js 是页面的脚本文件，与我们之前的.js文件的功能一样。在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

index.wxss

index.wxss为页面的样式表，类似.css。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

三：设计智能门锁的主页

代码如下：



最终调试结果：