原文网址：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 后缀的文件是配置文件
首先，使用<block>配合<wx:for><wx:if>等标签及常用组件完成简单的列表结构，使用hidden控制元素的显示与隐藏，具体如图：
[图片上传失败...(image-bdebcc-1552448338184)]
里面用到的css，在index.wxss文件里定义如下图：
[图片上传失败...(image-33d2ba-1552448338184)]
该模板的整体风格在index.json文件里进行配置，这里简单设置了窗口的背景色，导航栏标题文字内容及颜色，如下：
[图片上传失败...(image-e05da4-1552448338184)]
测试数据，定义在index.js里的data下，即 页面的初始数据：
