微信小程序教學第二章：小程序中級實戰教程之預備篇 - 項目結構設計｜基於最新版1.0開發者工具

時間 2019-12-26

標籤微信程序教學第二中級實戰教程預備項目結構設計基於最新版 1.0 開發者工具欄目職業生涯简体版

原文原文鏈接

iKcamp官網：http://www.ikcamp.comcss

訪問官網更快閱讀所有免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼html

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

　項目結構設計

教學視頻地址：https://v.qq.com/x/page/q0554...前端

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

前面的章節中，咱們完成了小程序的準備工做，熟悉了小程序的基本配置。接下來的章節，咱們就要着手開始一個真正的項目。有沒有很激動？其實不難發現，小程序的門檻仍是相對比較低的，基本掌握前端開發基礎的同窗，完成一個簡單的小程序不費吹灰之力。 json

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 中放置了公用的重置樣式。

下一節中，咱們講一下這個實戰項目中用到的一些公用方法，好比打印日誌功能、網絡請求環境等