对首页布局涉及到的一些知识

一.JSON对象和JS对象的区别

主要就是app.json入口文件的json格式问题

若此文件为空，也需要写一个大括号
还有就是key要用双引号
还有就是逗号的问题，如果没有code则page后面不写逗号

二.新建页面的技巧和规则

利用新建page

输入前缀名 回车

自动生成需要的4个文件

此时还会发现app.json文件会自动进行相关的配置
前提是这个app.json文件在之前没有任何报错

然后说一下
“pages/welcome/welcome”
这三个代表什么
pages代表 pages文件夹
第一个welcome代表 welcome文件夹
第二个welcome代表 welcome.wxss\welcome.wxml 那4个文件

还有我们会发现

默认起始页面为app.json文件 pages数组中的第一项所代表的页面

三. 图像的处理及rpx单位

在小程序中
image标签表示图片
text标签表示文本
button标签表示按钮

我们会发现（原图为200px*200px的正圆）图片变成椭圆了这是为什么呢？
阅读文档发现：
image标签默认的尺寸为宽度320px 高度240px 若不设置宽高的话就会椭圆啦

我们设置一个宽高，发现图片变成正圆了

但是我们会发现无论什么机型图片都是固定这么大，不会自适应，所以引入了一个新的单位rpx

rpx单位：
可以根据屏幕宽度（当前机型的分辨率）进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素（2：1的关系仅在iphone6上成立）

四.分离css样式到wxss文件中

五.flex布局在小程序的应用

首先我们要实现首页布局样式如下

对中心内容进行flex布局

用view标签作为一个容器，没有明确的意义，主要是用作布局，把里面的布局包裹在一起，类似于web页面的div标签

这里我们发现小程序自带的button组件，有一些内置样式，而且很难修改，我们可以通过view标签自己做一个简易的button按钮

我们在做一些详细的样式修改

此时效果如下

我们想要达到我们想要的全屏都是蓝色的效果
首先考虑导航栏修改为蓝色
首先需要知道的是顶部导航栏是在app.json里面配置的（可以通过自定义组件修改，后面会说）


(有关window或者其他全局配置，可以在文档—》框架—》全局配置中查看)
全局配置

最后就需要处理底部空白的部分
第一想法可以会是增加margin-bottom但是具体加多高呢？
这种想法显然不可以
我们查看调试器

在container的view外面还有一个默认添加的page标签
利用这个！


这样简易的首页就做好啦！！