第二章：小程式中級實戰教程之預備篇

## 專案結構設計

教學視訊地址：v.qq.com/x/page/q055…

開始前請把 ch2-1 分支中的 code/ 目錄匯入微信開發工具

前面的章節中，我們完成了小程式的準備工作，熟悉了小程式的基本配置。接下來的章節，我們就要著手開始一個真正的專案。有沒有很激動？其實不難發現，小程式的門檻還是相對比較低的，基本掌握前端開發基礎的同學，完成一個簡單的小程式不費吹灰之力。

Step 1. 基本結構

經過前面幾章的學習，我們已經基本知道了小程式的基本配置，不囉嗦，先把基礎的專案結構建立起來，先搭架子，在豐富細節。在 /codes/ch2-1 的基礎上，我們建立以下檔案：

├── lib/
├── styles/ 
│     ├── base.wxss 
├── pages/
├── app.js
├── app.json
├── app.wxss
複製程式碼

現在呢，最最基本的框架就已經搭建好了。app.js 是小程式的主邏輯檔案，app.json 是小程式全域性配置檔案，app.wxss 當然就是小程式的全域性樣式檔案了。pages 後面會用來存放小程式的頁面。

app.js

let handler = {
    //小程式初始化
    onLaunch () {
        console.log(`app init...`);
    },
    //小程式全域性資料
    globalData: {
        user: {
            name: ``,
            avator: ``
        }
    }
};
App(handler);
複製程式碼

app.js 包含了小程式的一些生命週期函式，專案剛開始，我們先從簡單的開始，只用到了 onLaunch 生命週期函式。當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）。globalData 可以用來存放小程式的全域性資料，我們可以在頁面中通過 getApp() 方法獲取到小程式的例項，通過小程式例項就可以訪問到這個全域性物件，後面會詳細講解。

app.json

{
  "pages": [],
   "window": {
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "Demo",
        "backgroundColor": "#f8f8f8",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": false
    },
    "networkTimeout": {
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
    },
    "debug": true
}
複製程式碼

小程式的主配置檔案的基本結構就已經寫好了。當然不是全部的配置檔案，可以參考小程式配置API。官方文件已經給出了很詳細的解釋，這裡就不贅述了。

Tip：debug 為 true，可以在除錯的時候會有些許幫助，但是提審的時候建議改為 false。

app.wxss

.green{
    color: #26b961;
}
page{
    height: 100%;
    background-color: #f8f8f8;
}
複製程式碼

定義在 app.wxss 中的樣式為全域性樣式，作用於每一個頁面。在 page 的 wxss 檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

Step 2. 增加頁面

接下來我們要為小程式增加頁面了，小程式的頁面存放在 pages 資料夾下面。我們繼續完善目錄結構

├── lib/
├── styles/ 
│     ├── base.wxss 
├── pages/
│     ├── detail/ 
│     ├── index/
├── app.js
├── app.json
├── app.wxss
複製程式碼

首先我們在 pages 目錄下增加兩個資料夾，detail 和 index,其中 detail 代表小程式的文章詳情頁面，index 則代表小程式的首頁。

光有資料夾不行，在小程式中，每個頁面都有四個檔案

[name].js 頁面的主邏輯檔案
[name].json 頁面的配置檔案
[name].wxml 頁面內容，類似於之前的html檔案
[name].wxss 頁面的樣式檔案，類似之前的css檔案

Tip： 值得注意的是，每個頁面中的這四個檔案必須保持同名。

繼續完善檔案目錄

├── lib/
├── styles/ 
│     ├── base.wxss 
├── pages/
│     ├── detail/
│     │     ├── detail.js  
│     │     ├── detail.json        
│     │     ├── detail.wxml      
│     │     ├── detail.wxss  
│     ├── index/
│           ├── index.js  
│           ├── index.json  
│           ├── index.wxml      
│           ├── index.wxss   
├── app.js
├── app.json
├── app.wxss
複製程式碼

index.js

和之前的 app.js 類似，小程式的頁面也有對應的邏輯檔案，比如 index.js 就代表該專案中的首頁的邏輯（小程式的首頁不一定非要是 index，可以用其他名字）。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    console.log(`小程式載入了`)  
    // 生命週期函式--監聽頁面載入
  },
  onReady: function() {
    // 生命週期函式--監聽頁面初次渲染完成
  },
  onShow: function() {
    // 生命週期函式--監聽頁面顯示
  },
  onReachBottom: function() {
    // 頁面上拉觸底事件的處理函式
  },
  // 其他一些業務函式
  hello: function() {
    this.setData({
      text: `hello world`
    })
  }
})
複製程式碼

Page() 函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。

index.json

每一個小程式頁面也可以使用 .json 檔案來對本頁面的視窗表現進行配置。頁面的配置比 app.json 全域性配置簡單得多，只是設定 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

頁面的 .json 只能設定 window 相關的配置項，以決定本頁面的視窗表現，所以無需寫 window 這個鍵。因為本專案比較簡單，可以先使用全域性的配置。暫時可以放一個空的 json 物件

{ }
複製程式碼

index.wxml

.wxml 就是小程式的頁面檔案了，WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構。

<view class="home"> this is home page </view>
複製程式碼

index.wxss

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式。這裡的樣式基本和之前 css 的語法一致，可以覆蓋 app.wxss 中定義的樣式。

.home {
    color: red;
    font-size: 28rpx;
}
複製程式碼

同樣的 detail 頁面也會擁有類似的結構和程式碼。

完成了上面的基本的頁面，仔細的同學可能還發現，上面的 app.json 配置中，pages 還是空的，接下來補充配置。

 "pages": [
    "pages/index/index",
    "pages/detail/detail"
 ]
複製程式碼

pages 就是小程式的路由配置，這裡可以看到，小程式擁有兩個路由，一個首頁，一個詳情頁面。

至此我們就完成了最簡單的頁面的配置，到現在為止，我們就能很容易的跑出一個簡單的微信小程式了，雖然還只是最基本的骨架，後面會繼續完善。

Step 3. 一些非必要目錄

上面介紹了小程式的必要的專案結構，其實在實際的專案中，為了開發方便，我們一般還會增加一些額外的目錄，比如：

├── lib/
├── styles/ 
│     ├── base.wxss 
├── pages/
│     ├── detail/
│     │     ├── detail.js  
│     │     ├── detail.json        
│     │     ├── detail.wxml      
│     │     ├── detail.wxss  
│     ├── index/
│           ├── index.js  
│           ├── index.json  
│           ├── index.wxml      
│           ├── index.wxss  
├── app.js
├── app.json
├── app.wxss
複製程式碼

lib 資料夾和 styles 資料夾。資料夾不是小程式的必要配置，前者用來存放專案中用到的其他庫，後者可以存放一些基礎樣式檔案。當然，你也可以根據自己的需要來增加一些別的資料夾來便利開發。

這裡我們放置了一些檔案，lib 中放置了實現 Promise 的庫和解析 html 為小程式 WXML 的庫。styles 中放置了公用的重置樣式。

下一節中，我們講一下這個實戰專案中用到的一些公用方法，比如列印日誌功能、網路請求環境等