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

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

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

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

底部的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 后缀的文件是配置文件

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

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

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

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

通过这个简单的demo，学习了微信小程序开发一些组件的基本使用，也初步了解了其UI框架。