小程序簡介

小程序是一種不需要下載安裝即可使用的快速應用，它實現了應用“觸手可及”的操作；用戶掃一掃或搜一下即可打開應用，完全不需要安裝，因此小程序不僅可提高的用戶的應用體驗，也方便應用的傳擴散。

本文帶大家快速入門小程開發，了解從環境搭建到開發出一個簡單hello world程序，從而上手小程序開發，讓你快速成功小程序開發人員。之后，想開發什么樣的小程序，就可以自己研究和努力了。

下面，是循序漸經的步驟：

?1、注冊小程序

在開發之前，當然需要先注冊一個小程序賬號。

進入“微信公眾平臺”進行注冊。

這里需要注意的是郵箱必須是未被微信公眾平臺注冊、未被微信開放平臺注冊、未被個人微信號綁定的才有效。

提交之后登錄你注冊用的郵箱，會收到一個條“激活你的微信小程序”的郵件，點擊郵件中的激活鏈接去完善“信息登記”即可激活賬戶。

? 2、獲取AppID

登錄小程序賬號之后我們需要先填寫“小程序信息”，然后可以在左側菜單欄中找到“開發”選項，點擊進入該欄后進行點擊tab中的“開發設置”選項。就可以看到屬于我們的AppID，這是微信公眾平臺上的小程序ID。微信通過它來確定小程序“身份”及提供相應的功能接口。

3、安裝微信開發工具

在“微信官方文檔-小程序”的開發頁面中，我們可以找到“工具”選項，選擇適合自己電腦系統版本的進行下載（這里我用的是windows 64），雙擊運行下載好的軟件然后“下一步”到底即可，安裝完開發者工具后會自動在桌面添加“微信開發者工具”快捷圖標。通過點擊“微信開發者工具”圖標打開微信小程序開發工具，然后用自己的微信軟件掃描二維碼登錄，就可進入微信web開發者工具。

? 4、集成開發環境

安裝開發工具之后就可以進行開發了。

用你注冊小程序的微信賬號掃碼登錄“微信開發者工具”就可以開始創建小程序項目了。

下面是“微信開發者工具”打開項目之后的顯示界面。

官方工具中的代碼編輯功能很弱，只有基本的代碼編輯功能根本無法滿足撐項目快速開發的需求。

（不過調及試預覽功能還是很強大的）。

所以我們可以使用“微信開發者工具”再搭配一款IDE來一起開發。比如：VSCode，VSCode是一款免費開源的輕量級跨平臺代碼編輯器，集成了大部分代碼編輯的器的優點，集成GIT、代碼調試、語法高亮。最主要是擁有強大豐富的插件系統，幾乎支持所有主流的開發語言且運行穩定，系統內存占用率低非常適合搭建IDE。

5、開發第一個小程序開始：創建項目

創建小程序項目。

“微信開發者工具”支持小程序、小游戲、代碼片段及公眾號網頁項目開發，默認選擇小程序。

?點擊右側空白處的“+”號來創建新項目或者導入已有項目，這里的AppID就是前面注冊小程序的時候獲取的。

初始操作時，應該創建一個空目錄，用于存放項目文件。

6、創建app.js文件

在目錄中創建一個app.js文件，該文件作為項目的入口文件，通過App() 函數來注冊一個小程序的應用。該函數接受一個object參數(function 和 data)，比如小程序的生命周期函數。這里我們先不管那些生命周期函數，只要定義個空參數的App({})函數即可注冊小程序。

//app.js
App({})

7、創建一個hello world頁面

我們需要顯示“Hello World”內容，所以這里我們需要創建一個頁面。在目錄中創建一個helloworld.wxml文件，這里我用個視圖容器view標簽來顯示“Hello World”內容。

// helloworld.wxml
<view>Hello World</view>

8、注冊helloword頁面

小程序中的每個頁面都需要在頁面對應的 js 文件中進行注冊，所以這里我們需要在目錄中創建一個helloworld.js文件并通過Page() 函數用來注冊一個頁面。該函數同樣接受一個 object參數，可以是該頁面的初始數據、生命周期函數、事件處理函數等。這里我們還是先不管那些生命周期函數，只要定義個空參數的Page({})函數即可注冊頁面。

// helloword.js
Page({})

9、創建app.json文件

頁面注冊好了我們就需要來配置頁面路徑了，告訴小程序要加載的頁面在哪里。這就需要我們在根目錄下創建一個app.json文件，通過該文件來對小程序進行全局配置。而其中的pages對象就是用來指定小程序由哪些頁面組成，每一項都對應一個頁面的路徑（含文件名）信息。

注意：文件名不需要寫文件后綴，框架會自動去尋找對于位置的 .json, .js, .wxml, .wxss 四個文件進行處理。數組的第一項代表小程序的初始頁面（即首頁），小程序中新增/減少頁面時都需要對 pages數組進行修改。

// app.json文件
{
  "pages": [
    "helloworld"   //由于該文件目前存放在根目錄，所以這里直接填文件名
  ],
}

10、調試

接下來我們就可以打開“微信開發者工具”并切換到“導入項目”頁面，在目錄欄中選擇我們的項目文件夾。AppID沒有的可以選擇游客模式，點擊“導入”按鈕即可。程序會自動生成project.config.json配置文件和sitemap.json站點地圖配置文件（可以暫時忽略），在左側的模擬器中我們可以看到在小程序中顯示了我們的“Hello Word”內容。

?到這里我們就創建了一個最簡單的“Hello Word”小程序。

想美化頁面顯示

如果你想美化頁面顯示樣式。我們可以繼續創建一個helloword.wxss文件，在這里我們可以WXML 的組件樣式進行控制。WXSS的寫法和css相似，很容易上手的！

到此，以上簡單10步，10分鐘。我們就開發出了一個小程序，就已入門小程序開發了。

你已經是一個小程序開發者了。

補充知識

小程序目錄結構說明

一個小程序主體至少需要app.js和app.json這兩個文件組成且必須放在項目的根目錄（文件名也必須為app）。

app.wxss為全局樣式表，主要是用來美化視覺樣式的，沒有也可以，也能實現功能。

而通常的小程序頁面由四個文件組成，分別定義了頁面的：結構、樣式、功能邏輯、配置信息。

如下做簡單介紹：

app.js文件

每個小程序都需要在 app.js 中調用 App 方法來注冊小程序實例，是小程序的入口文件。

同時該文件也是用來定義小程序的全局數據和函數，控制、監聽小程序的全生命周期。

定義的函數及數據都是全局共享的，其他頁面可以直接使用全局函數和數據。

而生命周期函數可以針對不同場景可以調用不同的生命周期函數，如：

onlaunch：監聽小程序初始化；

onshow：監聽小程序顯示；

onhide：監聽小程序隱藏；

注意：App() 必須在 app.js 中注冊且只有一個 App 實例，通過 getApp 方法可以獲取到全局唯一的 App 實例，但不要在 App() 函數中調用 getApp() 方法，使用 this 就可以拿到 App 實例。

這里再講一點高級技巧，對于將來你做小程序開發很重要：代碼保護！

由文件名也可知，這是app.js是個js文件。而我們知道，js文件是明文的、小程序也是可以反編譯的。如果你辛苦開發了一個小程序，被別人反編譯，很輕松就可以獲得你寫的代碼，很容易就可以修改、復制你的程序。

那么，我們需要有產品保護意識：代碼是保護起來的。有一個平臺，叫作JShaman，傳統做前后端開發的程序員都知道，這是一個JS代碼保護平臺工具，可以把JS代碼進行混淆加密，使代碼不可讀不可分析，其目的就是防止自己別的代碼被別人復制修復了使用。

在小程序開發中，同樣可以用到這個平臺，可以把app.js中的代碼經JShaman加密了，再發布小程序。這樣即使別人反編譯了你的小程序，他也沒辦法用里面的代碼。

而且，經還有一個神奇的用于：過審。因為小程序很多了，很多互相拷貝的小程序也很多，代碼幾乎是一樣的，而小程序不允許同樣或雷同度過高的小程序發布，所以很多小程序卡在過審環節。而用JShaman加密代碼后，過審就不會因為代碼雷同而被卡。

回到正題，上面講了app.js。下面再介紹小程序其它三個重要文件。

app.json文件

該文件是一個json對象，用于對小程序進行全局配置（該文件中不能有注釋）。

它可以配置頁面路徑，窗口表現，tabBar標簽導航，網絡超時，debug模式，其中pages對象用來配置小程序的里面所有的頁面路徑（該對象是個數組且第一個是小程序的首頁），頁面路徑不需要寫任何后綴，系統會自動去加載同名的 .json、.js、.wxml、.wxss 文件。window對象用于設置小程序的窗口表現，包括狀態欄、導航條、標題、窗口背景色等。tabBar對象用于設置標簽導航，就是小程序窗口底部的菜單欄，可以實現快速切換頁面。

WXML文件

WXML是一套類似html的標簽語言，是用來構建頁面結構的。標簽雖然與HTML有點不同但用法基本一致，同時還具備了類似Vue框架的特性，支持列表循環、條件渲染、模板引用及數據綁定等功能。一段完整的WXML語句由一個開始標簽和一個結束標簽組成，在標簽中可以是內容也可以是其它WXML標簽。這里需要注意的是WXML要求標簽必須是嚴格閉合的，沒有閉合將會導致編譯錯誤。

WXSS文件

WXSS是一套樣式語言，用于描述 WXML 的組件樣式。通過定義WXSS來控制頁面的呈現樣式的，這個跟HTML中的CSS功能差不多（WXSS 具有 CSS 大部分特性并在CSS基礎上進行了擴充以及修改）。app.wxss與頁面中的.wxss文件不同之處在于它的作用域是全局，而頁面中的.wxss文件只能作用于當前頁面。