? ? ? 微信小程序是騰訊推出的一種全新的連接用戶與服務的方式，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。就在上一年，騰訊公司的微信開發者工具就加入了微信小程序的開發功能，然而，目前網絡上存在的微信小程序開發教程屈指可數，而微信公眾平臺上的官方文檔提供的教程又十分簡單。這令初學者在開發微信小程序時十分吃力，尤其是前端開發小白，它們在開發的過程中很容易陷入懵逼的狀態。所幸的是，筆者在前段時間參與了微信小程序的開發，在微信小程序的開發方面積累了部分經驗。因此，本著共同學習的理念，筆者斗膽寫下《微信小程序初探》的系列文章，望各位同僚與我共同學習，不足之處還望指正。

? ? 我們先來看一下開發工具提供給我們的案例

? ? ? ?在示例的主界面我們能看到三個最主要的部分，最左邊的是程序視圖，我們能夠直觀地看到我們設計出來的程序的面貌。中間就是文件列表。右邊就是編輯部分。本文將要主要介紹官方案例中各個文件的功能和作用。

一 ?認識各種文件格式

? ? ? ?從demo中我們能看到共有三個文件以及兩個目錄，我們先來看一下放在外面的三個文件。第一個就是 app.js 文件，也就是JavaScript文件，這一類文件的主要作用是充當微信小程序的腳本文件，開發者可以在 .js文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API

? ? ? ?第二個文件就是app.json文件，app.json文件是配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題的重要文件。注意該文件不可添加任何注釋。

? ? ? ?第三個文件就是app.wxss文件，app.wxss文件是規定了小程序的樣式，它的原理和網頁開發當中的css樣式相當。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。當然，每個頁面也可以有屬于自己的私有的樣式文件。

? ? ? ?以上三者便是微信小程序中最重要的三個文件，接下來，我就要介紹另外兩個目錄，而這兩個目錄組成了微信小程序的各個頁面。在本文，我將著重介紹pages目錄

? ? ? pages目錄里面裝著的就是微信小程序的各個頁面的代碼。在這個demo里面總共有兩個頁面，一個是index，一個是logs。細心的讀者會發現，頁面的代碼文件組成與app的代碼文件組成十分類似，它們都有.js,.json以及.wxss文件，唯一不同的是頁面代碼文件有.wxml文件。.wxml文件的作用跟網頁開發里面的HTML有著相似之處。它定義了頁面的結構，這些結構包括了按鈕，文本等，它們是組成頁面必不可少的元素。可以這么說，.json和.wxss文件都是為.wxml文件服務的。

? ? ? ?值得一提的是，頁面的代碼文件里面，.js和.wxml文件是必不可少的，而.json和.wxss文件則是可選擇的。

? ? ? ?OK，那么微信小程序中的各個格式的文件的介紹就到這里了，接下來，筆者就會以官方提供的demo為例子，簡要地解釋各個文件里面的代碼含義。在這里筆者不會逐個逐個字句解釋，而是大概講解代碼中函數的含義，在以后的文章中，筆者會詳細講解。

二 簡要的代碼解釋

? ? ? ? 首先我們來看一下app.js文件。

? ? ? ?我們由頭來分析代碼，我們會發現整個app.js文件的代碼都包含在了APP（{}）當中，它的功能是注冊一個小程序，用以制定小程序的生命周期。

? ? ? ?往下走，看到onLaunch()函數。還記得我在上文中提到的小程序的生命周期嗎？這個函數代表的是小程序剛剛開始運行時所執行的內容。該函數的具體功能可以在官方提供的api中找到，這里我貼上一張圖，里面包含了onLaunch在內的多個代表了小程序生命周期的函數。有興趣的朋友可自行到微信公眾平臺查閱。

? ? ? ?那么在該app.js文件中，onLaunch函數充當了接收本地數據的角色。

? ? ? ?往下走，我們看到getUserInfo: function(cb)這里，我們只需知道，該函數的作用是接收用戶的信息并且調用登錄接口。沒接觸過JavaScript的朋友可以注意一下，函數名：function(形參）是js中函數聲明的方式。

? ? ? ?在getUserInfo: function(cb)函數的下方，我們可以看到globalData，顧名思義，他是微信小程序中的全局變量。

? ? ? ?在大致了解了app.js文件的代碼后，我們看一下app.json文件的代碼

? ? ? ?代碼很簡單，分為兩個部分，一個是pages，一個是window。pages聲明了該小程序由什么頁面組成的，比如，該小程序由兩個頁面組成。同時，pages也聲明了小程序的起始頁面，也就是放在最上面的頁面，pages/index/index。我們不妨試一下，改變上下順序會怎么樣。

? ? ? ?可以看到，程序的起始頁面改變了。

? ? ? ?我們再來看一下window，它聲明了背景文字樣式，導航欄的顏色，文字和字體顏色。我們修改一下，把navigationBarBackgroundColor改為#000，然后把navigationBarTitleText改為微信，再把navigationBarTextStyle改為white。

? ? ? ?顯而易見地，導航欄發生了變化。不僅如此，所有頁面的導航欄都會改變。不過，如果你想要改變單個頁面的導航欄樣式，你可以單獨修改頁面的json文件。

? ? ? ?接下來我們稍微了解一下app.wxss

? ? ? ?正如我上文所說，.wxss文件定義的是css樣式，而css樣式多如牛毛，我也不一一講述，新手可以自行試著修改demo中的樣式，并結合官方api學習。唯一需要知道的是，.container指的是該樣式的class名，開發者在wxml標簽中通過不同的class名來選擇不同的樣式。

? ? ? ? ?接下來，筆者將講解index.wxml文件。

? ? ? ?wxml文件與HTML的原理其實很接近，它們都是通過一個一個的標簽來把頁面構造出來的。首先，我們了解一下標簽，標簽就是上面代碼中有<>尖括號的代碼，標簽可以聲明頁面的基本元素如按鈕，文本，輸入框等。值得注意的是，wxml中的<view>標簽和HTML中的<div>標簽意思接近，大概就是指頁面的模塊，它們把頁面分成不同的模塊以方便開發者布局。仔細觀察可以發現，每個標簽中都有class這個東西，正如筆者在前文所說，它們其實是“選擇器”，選擇不同名字的樣式來顯示標簽元素。

? ? ? ?OK，本文到這里也差不多結束了，本文主要講述了微信小程序中的文件結構以及部分代碼的解析。我在這里沒有把所有頁面的js,json,wxss和wxml文件都講解一遍，原因是它們的原理和我上文所講的四個文件很接近，讀者可自行理解。不理解也沒關系，我在以后的文章中會詳細解析。

? ? ? ?第一次寫有關技術的博客，很多東西表達的不夠到位，望海涵。各位看官如果有什么好的建議請一定提出，筆者感激不盡。