zhi

我们建立起至了小程序项目，并浅显的介绍了小程序的外部项目结构，介绍了 js，wxml，wxss都最为基本运用，现在我们在展开循序渐进的深入细致探究，如何制作真实项目。

先看看效果图：

分析步骤：

1、谈头部的视图滑动，直观

2、谈底部的导航系统栏，直观

3、谈中间的内容表明，中等

4、谈JS逻辑同时实现。繁杂

难度等级的分割只局限于本文，不联系实际研发。

1、头部视图滑动，实例图：

准备工作工作先搞好，建立一个项目，把系统自带的都被删 只领外层目录，内层文件都被删。

然后在pages中嵌入一个movie目录做为首页，分别在建立，js \ wxml \ wxss. ,并在app.json中登记注册

不好了，现在我们已经开始撰写wxml与js文件，首先我们确认头部表明必须用什么组件，先看看官方文档中的swiper-view控件（滑块视图组件）

就用它了 在文档中找出这段并代码导入到 wxml中去 （激活后别忘了 Ctrl+s 留存）

然后激活这段代码至 js 文件回去

不好了我们可以回去调试页面看一看变化，用鼠标可以滑动，但它的表明存有瑕疵存有外框，我们回去wxml中搞一点改动。

在wxml中把width和height 两个属性换成 ，改成： style = "width:100%" 。 {{}}中的内容就是什么，看看后面注释。

现在我们在回去js中，把视图改成自动重定向的。 认真看看注解！ 豁然开朗了吧，文档也认知了吧!

顺利完成以上步骤后，一个滑动视图称得上初步的搞好了，以后必须搞深入细致也只是把视图改成动态以获取图片，而不是像是现在这样选定了静态的链接，就是不恰当的， 当然你也可以搞一些稀奇古怪的滑动视图没人堵你。

从这里我们可以辨认出微信小程序开发，给我们增添的便利与高效率，只要摸清楚文档，一个程序还是挺难构建的。

2、底部导航系统栏：

关上官方研发文档文档布局篇

把这段繁杂过来，必须特别注意我们必须把路径改成刚刚建立的movie文件目录，然后回去网上打听一下log资源放在image文件中去.

在文档布局篇中打听一下iconPath和selectedIconPath看一看他们就是干嘛的！底部导航系统栏就顺利完成了，看看下面的代码也能够不难。

顺利完成后的效果：

现在已经开始步入下一个阶段，先看看效果图

直观的分析下，一个图片控件image，在提一个文字控件text，接下来的排印就须要交予wxss和展开协调构建，

而不是纯粹的只采用image和text，采用

在刚刚的，image目录中，摆一张图片进来先，我摆了 “我老婆的照片”

MD美死去了！！！

然后在wxss中搞一些准备工作 ，其实这步骤就是不对的，但如果联系wxml边写下边搞wxss的样式，要截的图就多的离谱了，所以我想要，轻易给wxml和wxss写下不好的布局，使你自己回去揣摩分析也存有相同的效果，毕竟我已经得出很详尽的注释了，不至于看晕。

/** 填满全屏**/

.content{

height: 100%;

}

/** 将图片与文字左右分离 **/

.movie{

display: flex;

flex-direction: row;

}

/** 设置图片大小 **/

.pic image{

width: 100px;

height: 150px;

}

/** 设置与左边图片的间距**/

.movie-info{

padding-left: 20px ;

}

/** 文字大小与行高 **/

.base-info{

font-size: 12px;

padding-top: 20px;

line-height: 20px;

}

/** 分割线 **/

.hr{

height: 2px;

width: 100%;

border-top: wheat solid 1px;

border-bottom: wheat solid 1px;

opacity: 0.2;

}

wxml中的布局，就要您自己回去踢吧，不然自学就丧失效果了，必须特别注意的就是我的 就是上下契合的为了能够使你看清楚，它的完结语句在哪里，填满全屏的view它的完结语句必须包覆所有内容。

我把必须谈的内容放到注释里了，读完留存轻易回去调试页面看看效果。

粗略的布局总算就是构建不好了，后面就是联系API获取数据，在js中搞一些逻辑操作方式了。

以上概括详述： 用以搞排印， 组件负责管理接收数据并表明。

现在必须已经开始撰写JS文件了，这里就有点麻烦，毕竟代码量还挺多的，你可以先歇息一会儿，把wxml和wxss先消化一下