小程序簡介

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

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

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

​1、註冊小程序

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

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

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

​ 2、獲取AppID

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

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

​ 4、集成開發環境

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

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

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

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

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

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

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

創建小程序項目。

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

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

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

6、創建app.js文件

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

<code>//app.js
App({})/<code>

7、創建一個hello world頁面

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

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

8、註冊helloword頁面

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

<code>// helloword.js
Page({})/<code>

9、創建app.json文件

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

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

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

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 方法來註冊小程序實例，是小程序的入口文件。

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

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

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

onlaunch：監聽小程序初始化；

onshow：監聽小程序顯示；

onhide：監聽小程序隱藏；

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

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

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

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

在小程序開發中，同樣可以用到這個平臺，可以把app.js中的代碼經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文件只能作用於當前頁面。

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

閱讀更多 WangLiwen 的文章

關鍵字: 微信 搭建 Windows