小程序教程——首页

好看的网页千篇一律，有趣的代码万里挑一。

大家好，我是一名程序媛，主攻web前端，这是我在简书的第二篇博客。

我的第一篇博客引用了一些网址和图片，简书说不符合规范，给锁了。没事，现在才刚刚开始。

制作首页

首页效果图

第一步是构思

“好的代码像诗一样优美”

“写代码是一个人思想的表现”

当我们接到一个项目，拿到要求与效果图的时候，就要开始思考：

如果布局？如何实现功能？

先画什么？我需要什么组件？下载什么包？创建哪些函数？

……

一定要有清晰的、像树一样的思路。

至于具体如何实现，小程序有公开文档，里面有详细说明，学会使用即可。我就不粘贴地址了，也不截图了，省的又被锁了。

第二步布局

这是一个传统的上中下布局：轮播图、可切换列表区、导航栏。

// 每一个页面右四个文件组成：

// xxx.wxml文件，就相当于一个html文件

// xxx.wxss文件，就相当于一个css文件

// xxx.js文件，是交互文件（核心文件）

// xxx.json文件，是页面的配置文件（它里面配置的是当前页面信息）

// 导入msg模块中的指定成员

// import {$msg,$confirm} from '../../utils/msg'

// Page()函数，返回页面对象，该函数需要传一个配置参数，这个配置参数，是一个对象

新建文件 index.wxml 

轮播图

swiper是滑块视图容器，它里面只能放swiper-item组件，

    swiper组件的常用属性：

    circular是衔接滑动

    autoplay是自动切换

    interval自动切换时间间隔

    indicator-dots是否显示面板指示点

    indicator-color指示点颜色

    indicator-active-color当前选中的指示点颜色

    image是图片组件，注意：最好全部采用网络图片，因为小程序总提交不允许超过2MB

轮播图代码

分类栏

{{ }} 是插值表达式，这里面可以直接使用js里面定义的数据

可切换列表

       wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）

       hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）

超链接

底部导航栏

在全局中制作，打开 app.json ,找到或新建tabBar，制作样式。

以上就是首页index的布局

新建文件 index.js

在这个文件中实现数据渲染，达到动态效果。

展开详细写

注意代码中的每个括号，成对敲。字母也要注意，别敲错了。不然，会报错。

写函数

在index.json文件中改名字

在index.wxss 中写样式，这里根据喜好设置，就不展开了

这样首页就完成了，试试吧。