微信小程序——评测小程序首页的实现

先梳理一下涉及到本次综合案例的知识点：

布局基础

：它分为flex布局基础和相对定位和绝对定位
flex布局基础：可以实现浮动布局的所有内容，先了解flex的容器和元素。

如图：Flex container即橘色背景为flex的容器，而item1和item2即黄色正方形为flex的元素，从左到右的横线叫做主轴，从上到下的横线叫做交叉轴，这是在默认的情况下，当然我们也可以从容器中设置改变这个关系。
相对定位和绝对定位：相对定位的元素是相对自身进行定位，参照物是他自己本身。绝对定位的元素是相对离他最近的一个已定的父级元素进行定位。
组件的使用：组件是视图的基本组成单元并且它自带一些功能，他有开始标签和结束标签。每个组件在微信小程序文档中有事例代码，我们可以复制修改。
视图容器组件：分为view、scroll-view、swiper。
view:相当于html中的div。
scroll-view：可滚动的视图区域。这是它的属性：

swiper：滑块视图容器，这是它的属性：

基础内容组件：icon，text，progress。
icon：图标它的属性为：

text：文本它里面包含文字。
progress：进度条，它的属性为：

表单组件： button，checkbox，input，label，picker，radio，slider，switch，form。
导航：navigator，在index.wxml中定义navigator，并定义跳转页面。这就很方便，不用再写index.js代码。
多媒体：image，audio，video。

画布与游戏

：要了解canvas的使用，以及绘图API的使用。
canvas：画布，它的属性：

游戏：例如画一些小人物，再点击屏幕时这些小人物会走动，变化。

综合案例——评测小程序首页的实现

：
项目需求：如今有非常多的的电子科技产品，评测是一种很棒的推广方式，好的评测可以降低用户的决策成本。页面为：

在app.json更改页面名称，删除所有样式页面。最上方是幻灯，我们用到swiper这个组件。
接下来是文字，然后有四个图片，我们可以分一下部分定义三个view。文字左边有个绿线在index.wxss添加样式。在这里遇到了文字与想象不相符，最后根据属性样式，一点一点呈现效果界面，很有成就感。如图：

在图片完成后，想把文字加在图片上时出现了问题，文字并没有预想效果那样出现在图片上，而是被图片顶在下面，通过查询资料，结合视屏讲解，用到了绝对与相对位置的知识点，顺利解决此问题。出错为：

修改后为：

下方的热门评测和全部评测与上方样式一样，可直接复制。
接下来根据效果界面运用属性一步一步调成就好。
根据效果图做效果界面，我发现并非是非常简单的，有时候当我们运用该属性因为图片的大小，可能导致效果并非预期那样，然后就需要我们通过别的属性，来达到我们呈现的效果图，在这期间，需要不断地对不调整，一步一步来，但前提时我们要熟悉各个属性，这样会节省很多时间，也会使我们的逻辑思路更加清晰，刚开始做微信小程序肯定是慢，熟能生巧，在动手做的的过程中，你会发现在不经意间，就会掌握某个属性，最后做出结果，真的很有成就感！
在整体做完之后，再继续做细微调整如：

根据效果图对比，间隙太窄了，然后一部分一部分进行修改，对header的值经行调整。

最后结果如图：

在遇到问题时不能着急，不要因为结果与实际不相符就放弃，都是需要经行调整，不懂的点，要返回头去看知识点，就会发现，问题其实很简单，我会继续努力的！