小程式簡介

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

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

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

​1、註冊小程式

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

​ 2、獲取AppID

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

3、安裝微信開發工具

在“微信官方文件-小程式”的開發頁面中，我們可以找到“工具”選項，選擇適合自己電腦系統版本的進行下載（這裡我用的是Windows 64），雙擊執行下載好的軟體然後“下一步”到底即可，安裝完開發者工具後會自動在桌面新增“微信開發者工具”快捷圖示。通過點選“微信開發者工具”圖示開啟微信小程式開發工具，然後用自己的微信軟體掃描二維碼登入，就可進入微信web開發者工具。

​ 4、整合開發環境

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

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

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

所以我們可以使用“微信開發者工具”再搭配一款IDE來一起開發。比如：VSCode，VSCode是一款免費開源的輕量級跨平臺程式碼編輯器，集成了大部分程式碼編輯的器的優點，整合GIT、程式碼除錯、語法高亮。最主要是擁有強大豐富的外掛系統，幾乎支援所有主流的開發語言且執行穩定，系統記憶體佔用率低非常適合搭建IDE。

5、開發第一個小程式開始：建立專案

建立小程式專案。

初始操作時，應該建立一個空目錄，用於存放專案檔案。

6、建立app.js檔案

在目錄中建立一個app.js檔案，該檔案作為專案的入口檔案，通過App() 函式來註冊一個小程式的應用。 該函式接受一個object引數(function 和 data)，比如小程式的生命週期函式。這裡我們先不管那些生命週期函式，只要定義個空引數的App({})函式即可註冊小程式。

//app.jsApp({})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.jsPage({})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檔案只能作用於當前頁面。

掌握以上內容，你便入門了小程式開發，是名小程式開發人員了。