小程序教程-主页

好看的网页是一样的，有趣的代码是万里挑一的。

大家好。我是一名程序员，专注于网络前端。这是我在简书中的第二个博客。

我的第一个博客引用了一些网站和图片。这本短书说他们不符合规范，被锁上了。不，这只是开始。

制作主页

首页效果图

第一步是构思“好的代码就像诗歌一样美丽”

“写代码是一种思想表达”

当我们收到项目的要求和效果图时，我们应该开始思考：

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

你先画什么？我需要什么组件？要下载什么软件包？创建了哪些功能？

……

必须有清晰的、树状的思维。

至于具体实现，小程序有一个公共文档，其中有详细的说明。学习如何使用它。我不会粘贴地址，也不会截屏，我会再次被锁定。

步骤2：这是一个传统的顶部、中部和底部布局：旋转地图、可切换列表区域和导航栏。

//每页由右侧的四个文件组成：

//xxx。wxml文件相当于html文件

//xxx。wxss文件等同于css文件

//Xxx。js文件，这是一个交互式文件（核心文件）

//xxx。json文件是页面的配置文件（使用当前页面信息配置）

//导入消息模块中的指定成员

//从“../../utils/msg”导入｛$msg，$confirm｝

//Page（）函数返回页面对象。此函数需要传递一个配置参数，该参数是一个对象

新创建的文件索引。wxml旋转图滑动器是一个滑块视图容器，

刮水器部件的常见特性：

圆形是指关节滑动

自动播放是一种自动切换

间隔自动切换时间间隔

指示点是否显示面板指示点

指示器颜色

指示器活动颜色

图像是图片组件。注意：最好使用所有网络图片，因为小程序的总提交量不能超过2MB

转盘图表代码

类别列｛｛｝｝是一个插值表达式，可以直接使用js中定义的数据

可切换列表wx:if用于条件渲染：如果条件为真，将生成其中的内容；如果条件为false，则不会生成其中的内容。（每次都会重新生成内容）

Hidden用于条件渲染：条件为true时隐藏内容，条件为false时显示内容。（每次切换样式）

超链接

底部导航栏在Global中创建，app打开Json，查找或创建tabBar，并创建样式。

以上是主页索引的布局

创建新的文件索引。js来实现该文件中的数据渲染，以实现动态效果。

展开详细信息

注意代码中的每一个括号，成对划出。也要注意字母。不要犯错。否则，将报告错误。

写入函数

更改索引中的名称。json文件

在索引处根据您的偏好设置wxss中的写作风格

这就完成了主页。试试看。