微信小程序學習一初探“小程序”

最近這兩天，“微信小程序”這個詞占據了朋友圈，大有一番風起云涌之勢，當然，還不可能夸張到使原生App開發人員失業這種程度。當然，作為一名技術人員，時刻保持對新技術的好奇心是必須的，所以在網上找大神的教程，搭建了一下開發環境，來學習一下這個新的開發框架。

一 項目文件結構

當打開微信小程序的Demo的時候，我個人習慣是先看整個項目的文件結構，先大致弄清這部分是干什么的，那部分又是干什么的，微信小程序基本的文件結構如下圖：

圖1-微信小程序基本文件結構

首先我們一眼就可以看到，在項目根目錄有三個文件，app.js，app.json，以及app.wxss，下面來談談我對這三個文件的理解。

1 . app.js

app.js中包含一個App()函數，我把它理解為微信小程序真正意義上的入口，也就是說當啟動一個小程序的時候，首先會執行到這里。App()函數用來注冊一個小程序，參數為Object類型，可以在其中指定小程序的生命周期函數（理解還不是很透徹）, 當然，也可以定義一個全局的數據和函數，

我們可以在頁面中調用全局的getApp()方法，獲得小程序實例，從而來調用我們定義的全局數據和函數。

2 . app.json

app.json可以對小程序進行全局的配置，比如我們可以配置小程序有哪些頁面、窗口表現形式、設置網絡超時時間、設置多tab等。下面就是一個簡單的配置：

{ 
"pages": [ 
"page/index/index", 
"page/logs/index" 
], 
"window": { 
"navigationBarTitleText": "Demo" 
}, 
"tabBar": { 
"list": [{ 
"pagePath": "page/index/index", 
"text": "首頁" 
},{
"pagePath": "page/logs/logs",
 "text": "日志" 
}]
 }, 
"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 
}, 
"debug": true
}

3 .app.wxss

app.wxss文件比較好理解了，它相當于一個全局的樣式表，等同于前端中的css文件，任何頁面都可以使用這個樣式表，當然，如果某個頁面重復定義了某個屬性的表現形式的話，則會覆蓋app.wxss文件中定義的。

以上三個文件中，app.js和app.json是每個微信小程序必須要有的，app.wxss則根據需要來添加。

在圖一的文件結構中，還有三個文件夾目錄：images，pages，utils，這種形式就類似我們開發中分包的做法（其實就是）-將具有類型性質的文件或者類分目錄存放，這樣便于維護項目。

我們來關注下pages目錄,這個目錄存放了小程序的所有頁面。

圖2-小程序的頁面結構

這里我們定義了兩個頁面，index（首頁）和logs（顯示某種日志）。

可以看到，在每個頁面中，也有類似前邊兒我們所說的app.js，app.json等文件，下面我們就來看看它們具體是什么。

以logs頁面為例：

1 .logs.js

我們看一下這個文件中簡單的代碼：

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

如果你有過開發經驗或者是js開發經驗，那么一樣就可以看出，這個類的結構很簡單：1.引入了一個外部文件，2.有一個函數，進行了某種處理。

我們看一下官方文檔是怎么介紹這個以js結尾的文件的：包含一個Page()函數，Page()函數用來注冊一個頁面。接受一個object參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。它是頁面的邏輯文件，頁面邏輯在這里處理。

在這個文件中，我們可以定義變量，函數等。

2 .logs.json

app.json是小程序的全部配置文件，那么不難理解，logs.json則是logs頁面的配置文件，在這里我們可以配置頁面標題等屬性。

3 .logs.wxml

wxml文件是頁面獨有的，它相當于界面，它是與用戶交互的入口，微信提供了很多基礎組件，例如按鈕，文本以及進度條等，都可以在這個文件中配置并顯示出具體的效果。

4 .logs.wxss

wxss跟app.wxss文件一樣，都是樣式表文件，不過每個頁面下的這個文件時對于某個頁面的，而app.wxss則是全局的樣式配置，相同屬性的話，logs.wxss會覆蓋掉app.wxss中的。

對于頁面下的文件配置，我們來看一下官方的說明：

圖3-頁面文件配置

結語

以上就是微信小程序的整體項目文件結構，由宏觀到具體，弄清整體框架后，再一步一步學習其中的細節，可能會更加輕松。

 

來自：http://www.jianshu.com/p/545ba8737f4f