这一篇中要介绍一个函数：Page，页面就是用它来创建的。 本文以一个小例子为线索来讲解。
1、页面文件
App跟Page的关系是，App在整个小程序中只能有一个，唯一的一个。但这个小程序中可以有多个页面，就是多个Page，这些页面相关的文件都放在根目录下的pages目录，每个页面主要由四类文件组成，分另以页面名命名，但不同的后缀的文件：xxx.js / xxx.wxml / xxx.wxss / xxx.json，如下图：
页面目录
这个代码目录结构是我们这篇文章中要讲的一个小例子，pages/article 下面放的是文章相关的页面。文件夹article的名字你可以随便写，只要自己觉得目录结构合理就行，但同一个页面的四类文件，一定要用同一个名字，程序是通过这个名字来找到这个页面对应的各个相关文件的。这四个文件除了wxml之外都可以不是必须的，至少要有个wxml，想想就知道了，没有view层的代码哪知道页面要长什么样？js可以没有，就少些行为、数据、逻辑而已；wxss文件也可以没有，页面长得丑而已；json文件更可以没有（这个文件一般都没有），它的定义字段跟全局的app.json文件是一样的，它的作用是定义这页面的一些属性或者说配置，以覆盖全局定义的相关的属性。
文件夹的层次结构可以随便定义，甚至你想放到根目录其实都是可以的，只是同个页面相关文件要同名，且放同个目录。那么问题来了，程序怎么知道你的页面都放哪呢？
可能有读者已经回想起第一篇文章中讲到的 app.json 这个配置文件了。其中有一个pages的属性，它用来声明这个程序中到底有哪些页面的：
{ "pages":[ "pages/index/index", "pages/article/content" ],...}
2、例子简介
下面我们先来总体分析一下这个小例子。上图：
demo界面
借用36Kr网站的内容来做个很简单的小程序，新闻列表，点击查看内容。代码放在：https://github.com/jsongo/weapp-tutorial-2 这里。
本章的内容写死了数据，下一篇文章中我们会来介绍如何发起网络请求去取数据。
3、wxml代码分析
（1）相关组件
首先，这里会涉及到三种文件：wxml / wxss 和 js。index.wxml代码：
- <view class="container">
<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" class="scroll-wrapper"> <view
网站首页
TEL：021-61554458
