制作微信小程序的小白簡單入門教程

Posted on by

小程序已經成為國內前端的一個重要業務，跟 Web 和手機 App 有著同等的重要性。小程序開發者供不應求，市場招聘需求極其旺盛，企業都搶著要。

盡管如此，小程序的教程卻很缺，要麼是不夠系統，要麼就是跳躍性太大，很多關鍵的地方寥寥數語，初學者摸不著頭腦。我自己學的時候，就苦於找不到好一點的教程。

本文就是我的小程序學習筆記，整理成教程的形式，希望對於初學者有用。需要學會的主要知識點，我都會講到，我的目標是你讀完這個教程，就能學會怎麼寫小程序。

考慮到很多同學並沒有開發經驗，小程序是他們接觸的第一個開發領域。我會講得比較細，希望新人也能沒有困難地閱讀這個教程。

一、小程序是什麼？

學習小程序之前，先簡單說一下，它到底是什麼。

字面上講，小程序就是微信裡面的應用程序，外部代碼通過小程序這種形式，在微信這個手機 App 裡面運行。

但是，更準確的說法是， 小程序可以視為隻能用微信打開和瀏覽的網站。 小程序和網頁的技術模型是一樣的，用到的 JavaScript 語言和 CSS 樣式也是一樣的，隻是網頁的 HTML 標簽被稍微修改成瞭 WXML 標簽。所以，小程序頁面本質上就是網頁。

小程序的特殊之處在於，雖然是網頁，但是它不支持瀏覽器，所有瀏覽器的 API 都不能使用，隻能用微信提供的 API。這也是為什麼小程序隻能用微信打開的原因，因為底層全變瞭。

二、小程序的優勢

小程序最大的優勢，就是它基於微信。

微信 App 的功能（比如拍照、掃描、支付等等），小程序大部分都能使用。微信提供瞭各種封裝好的 API，開發者不用自己實現，也不用考慮 iOS 和安卓的平臺差異，隻要一行代碼就可以調用。

而且，開發者也不用考慮用戶的註冊和登錄，直接使用微信的註冊和登錄，微信的用戶自動成為你的用戶。

三、知識準備

由於小程序基於網頁技術，所以學習之前，最好懂一點網頁開發。具體來說，下面兩方面的知識是必需的。

（1）JavaScript 語言：懂基本語法，會寫簡單的 JS 腳本程序。

（2）CSS 樣式：理解如何使用 CSS 控制網頁元素的外觀。

此外，雖然 HTML 標簽和瀏覽器 API 不是必備知識，但是瞭解瀏覽器怎麼渲染網頁，對於理解小程序模型有很大的幫助。

總的來說，先學網頁開發，再學小程序，是比較合理的學習途徑，而且網頁開發的資料比較多，遇到問題容易查到解決方法。但是，網頁開發要學的東西太多，不是短期能掌握的，如果想快速上手，先學小程序，遇到不懂的地方再去查資料，也未嘗不可。

四、開發準備

小程序開發的第一步，是去微信公眾平臺註冊，申請一個 AppID，這是免費的。

申請完成以後，你會得到一個 AppID（小程序編號） 和 AppSecret（小程序密鑰），後面都會用到。

然後，下載微信提供的小程序開發工具。這個工具是必需的，因為隻有它才能運行和調試小程序源碼。

開發者工具支持 Windows 和 MacOS 兩個平臺。我裝的是 Windows （64位）的版本，這個教程的內容也是基於該版本的，但是 MacOS 版本的操作應該是完全一樣的。

安裝好打開這個軟件，會要求你使用微信掃描二維碼登錄。

登錄後，進入新建項目的頁面，可以新建不同的項目，默認是新建小程序項目。

點擊右側的+號，就跳出瞭新建小程序的頁面。

如果直接新建小程序，會生成一個完整的項目腳手架。對於初學者來說，這樣反而不利於掌握各個文件的作用。更好的學習方法是，自己從頭手寫每一行代碼，然後切換到"導入項目"的選項，將其導入到開發者工具。

導入時，需要給小程序起一個名字，並且填寫項目代碼所在的目錄，以及前面申請的 AppID。

五、 hello world 示例

下面，就請大傢動手，跟著寫一個最簡單的小程序，隻要五分鐘就能完成。

第一步，新建一個小程序的項目目錄。名字可以隨便起，這裡稱為wechat-miniprogram-demo。

你可以在資源管理器裡面，新建目錄。如果熟悉命令行操作，也可以打開 Windows Terminal（沒有的話，需要安裝），在裡面執行下面的命令，新建並進入該目錄。

> mkdir wechat-miniprogram-demo
> cd wechat-miniprogram-demo

第二步，在該目錄裡面，新建一個腳本文件app.js。這個腳本用於對整個小程序進行初始化。

app.js內容隻有一行代碼。

App({});

上面代碼中，App()由小程序原生提供，它是一個函數，表示新建一個小程序實例。它的參數是一個配置對象，用於設置小程序實例的行為屬性。這個例子不需要任何配置，所以使用空對象即可。

第三步，新建一個配置文件app.json，記錄項目的一些靜態配置。

app.json采用 JSON 格式。JSON 是基於 JavaScript 語言的一種數據交換格式，隻有五條語法規則，非常簡單，不熟悉 JSON 的同學可以參考這篇教程。

app.json文件的內容，至少必須有一個pages屬性，指明小程序包含哪些頁面。

{ "pages": [ "pages/home/home" ] }

上面代碼中，pages屬性是一個數組，數組的每一項就是一個頁面。這個示例中，小程序隻有一個頁面，所以數組隻有一項pages/home/home。

pages/home/home是一個三層的文件路徑。

  • 所有頁面都放在pages子目錄裡面。
  • 每個頁面有一個自己的目錄，這裡是pages下面的home子目錄，表示這個頁面叫做home。頁面的名字可以隨便起，隻要對應的目錄確實存在即可。
  • 小程序會加載頁面目錄pages/home裡面的home.js文件，.js後綴名可以省略，所以完整的加載路徑為pages/home/home。home.js這個腳本的文件名也可以隨便起，但是習慣上跟頁面目錄同名。

第四步，新建pages/home子目錄。

$ mkdir -p pages/home

然後，在這個目錄裡面新建一個腳本文件home.js。該文件的內容如下。

Page({});

上面代碼中，Page()由小程序原生提供，它是一個函數，用於初始化一個頁面實例。它的參數是一個配置對象，用於設置當前頁面的行為屬性。這裡是一個空對象，表示不設置任何屬性。

第五步，在pages/home目錄新建一個home.wxml文件。WXML 是微信頁面標簽語言，類似於 HTML 語言，用於描述小程序的頁面。

home.wxml的內容很簡單，就寫一行hello world。

hello world

到這一步，就算基本完成瞭。現在，打開小程序開發工具，導入項目目錄wechat-miniprogram-demo。如果一切正常，就可以在開發者工具裡面，看到運行結果瞭。

點擊工具欄的"預覽"或"真機調試"按鈕，還可以在你的手機上面，查看真機運行結果。

六、WXML 標簽語言

上一節的home.wxml文件，隻寫瞭最簡單的一行hello world。實際開發中，不會這樣寫，而是要加上各種標簽，以便後面添加樣式和效果。

小程序的 WXML 語言提供各種頁面標簽。下面，對home.wxml改造一下，加上兩個最常用的標簽。

<view>
  <text>hello world</text>
</view>

上面的代碼用到瞭兩個標簽：<view>和<text>。

<view>標簽表示一個區塊，用於跟其他區塊分隔，類似 HTML 語言的<div>標簽。<text>表示一段行內文本，類似於 HTML 語言的<span>標簽，多個<text>標簽之間不會產生分行。

註意，每個標簽都是成對使用，需要有閉合標記，即標簽名前加斜杠表示閉合，比如<view>的閉合標記是</view>。如果缺少閉合標記，小程序編譯時會報錯。

由於我們還沒有為頁面添加任何樣式，所以頁面的渲染效果跟上一節是一樣的。後面添加樣式時，大傢就可以看到標簽的巨大作用。

七、小程序的項目結構

總結一下，這個示例一共有4個文件，項目結構如下。

|- app.json |- app.js |- pages |- home |- home.wxml |- home.js

這就是最簡單、最基本的小程序結構。所有的小程序項目都是這個結構，在上面不斷添加其他內容。

這個結構分成兩層：描述整體程序的頂層 app 腳本，以及描述各個頁面的 page 腳本。

八、項目配置文件 app.json

頂層的app.json文件用於整個項目的配置，對於所有頁面都有效。

除瞭前面提到的必需的pages屬性，app.json文件還有一個window屬性，用來設置小程序的窗口。window屬性的值是一個對象，其中有三個屬性很常用。

  • navigationBarBackgroundColor：導航欄的顏色，默認為#000000（黑色）。
  • navigationBarTextStyle：導航欄的文字顏色，隻支持black（黑色）或white（白色），默認為white。
  • navigationBarTitleText：導航欄的文字，默認為空。

下面，改一下前面的app.json，加入window屬性。

{ "pages": [ "pages/home/home" ], "window": { "navigationBarBackgroundColor": "#ff0000", "navigationBarTextStyle": "white", "navigationBarTitleText": "小程序 Demo" } }

上面代碼中，window屬性設置導航欄的背景顏色為紅色（#ff0000），文本顏色為白色（white），標題文字為"小程序 Demo"。

開發者工具導入項目代碼，就可以看到導航欄變掉瞭。

除瞭窗口的樣式，很多小程序的頂部或尾部，還有選項欄，可以切換到不同的選項卡。

這個選項欄，也是在app.json裡面設置，使用tabBar屬性，這裡就不展開瞭。

到此這篇關於制作微信小程序的小白簡單入門教程的文章就介紹到這瞭,更多相關微信小程序入門教程內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：