好看的网页千篇一律，有趣的代码万里挑一。
大家好，我是一名程序媛，主攻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 中写样式，这里根据喜好设置，就不展开了
这样首页就完成了，试试吧。
网友评论