這一篇中要介紹一個函數：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、例子簡介
下麵我們(men) 先來總體(ti) 分析一下這個(ge) 小例子。上圖：
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
立即谘詢