2019年3月13日微信小程序开发：实现简单列表界面

原始网站：

最近，我想了解微信小程序的发展情况。

[图像上载失败…（Image-6ce0c-1552448338184）]

在阅读了官方网站上的组件和API介绍后，我想通过简单的列表显示来学习如何开发微信小程序。

首先，让我们看看最后的效果（使用的测试数据可以更改为http请求稍后返回的数据）。

[图像上载失败…（Image-e7f570-155244838184）]

底部UI在app.json中配置tabBar属性

具体实现如下：

框架的视图层由WXML和WXSS编写，并由组件显示。

定义一个模块，创建一个新页面，如索引，然后将生成四个文件，如索引。js；指数json指数wxml指数wxss然后，您需要单击json中的app配置页面，例如page/index/index。

Wxml（威信标记语言）用于描述页面的结构，包括视图容器，如视图、滚动视图或一些基本内容和表单组件。有关更多支持的组件，请参见微信小程序开发组件的介绍。

Wxss（WeiXin Style Sheet）用于描述页面的样式，相当于网页的CSS文件。

这个js后缀是脚本文件json后缀的文件是配置文件

首先，使用Fit<；wx:if>和公共组件来完成一个简单的列表结构，并使用hidden来控制元素的显示和隐藏，如图所示：

[图像上载失败…（Image bdebcc-155244838184）]

其中使用的css在索引中定义。wxss文件如下：

[图像上载失败…（Image-33d2ba-1552448338184）]

模板的整体样式如索引所示。它在json文件中配置。这里我们只需设置窗口的背景色、文本内容和导航栏标题的颜色，如下所示：

[图像上载失败…（Image-e05da4-1552448338184）]

测试数据，在索引中定义页面的初始数据在js中的数据下：