2019-03-13 微信小程序开发：简单列表界面的实现

原文网址：https://blog.csdn.net/gsc1456/article/details/80493735

最近，想了解下微信小程序的开发。

[图片上传失败...(image-6ce0c-1552448338184)]

看了下官网的组件和API介绍，想通过一个简单的列表展示，来学习下如何开发微信小程序。

先来看下最后的效果（使用的测试数据，后期可改为http请求返回的数据）。

[图片上传失败...(image-e7f570-1552448338184)]

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

具体的实现如下：

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

定义一个模块，新建一个page，如Index，会生成四个文件，分别如index.js；index.json；index.wxml；index.wxss。然后需要在app.json里配置pages，如 page/Index/index。

wxml (WeiXin Markup language) 用于描述页面的结构，包含一个视图容器，如view，scroll-view，或者一些基础内容及表单组件等。更多支持的组件详见微信小程序开发组件介绍。

wxss (WeiXin Style Sheet) 用于描述页面的样式，相当于网页的CSS文件。

.js 后缀的是脚本文件，.json 后缀的文件是配置文件

首先，使用配合等标签及常用组件完成简单的列表结构，使用hidden控制元素的显示与隐藏，具体如图：

[图片上传失败...(image-bdebcc-1552448338184)]

里面用到的css，在index.wxss文件里定义如下图：

[图片上传失败...(image-33d2ba-1552448338184)]

该模板的整体风格在index.json文件里进行配置，这里简单设置了窗口的背景色，导航栏标题文字内容及颜色，如下：

[图片上传失败...(image-e05da4-1552448338184)]

测试数据，定义在index.js里的data下，即 页面的初始数据：