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

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

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

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

一、小程序是什么？

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

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

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

小程序的特殊之處在于，雖然是網(wǎng)頁，但是它不支持瀏覽器，所有瀏覽器的 API 都不能使用，只能用微信提供的 API。這也是為什么小程序只能用微信打開的原因，因為底層全變了。

二、小程序的優(yōu)勢

小程序最大的優(yōu)勢，就是它基于微信。

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

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

三、知識準備

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

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

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

此外，雖然 HTML 標簽和瀏覽器 API 不是必備知識，但是了解瀏覽器怎么渲染網(wǎng)頁，對于理解小程序模型有很大的幫助。

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

四、開發(fā)準備

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

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

然后，下載微信提供的小程序開發(fā)工具。這個工具是必需的，因為只有它才能運行和調(diào)試小程序源碼。

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

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

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

點擊右側(cè)的+號，就跳出了新建小程序的頁面。

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

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

五、 hello world 示例

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

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

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

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

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

app.js內(nèi)容只有一行代碼。

App({});

上面代碼中，App()由小程序原生提供，它是一個函數(shù)，表示新建一個小程序?qū)嵗?。它的參?shù)是一個配置對象，用于設置小程序?qū)嵗男袨閷傩?。這個例子不需要任何配置，所以使用空對象即可。

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

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

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

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

上面代碼中，pages屬性是一個數(shù)組，數(shù)組的每一項就是一個頁面。這個示例中，小程序只有一個頁面，所以數(shù)組只有一項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。該文件的內(nèi)容如下。

Page({});

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

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

home.wxml的內(nèi)容很簡單，就寫一行hello world。

hello world

到這一步，就算基本完成了?，F(xiàn)在，打開小程序開發(fā)工具，導入項目目錄wechat-miniprogram-demo。如果一切正常，就可以在開發(fā)者工具里面，看到運行結(jié)果了。

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

六、WXML 標簽語言

上一節(jié)的home.wxml文件，只寫了最簡單的一行hello world。實際開發(fā)中，不會這樣寫，而是要加上各種標簽，以便后面添加樣式和效果。

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

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

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

<view>標簽表示一個區(qū)塊，用于跟其他區(qū)塊分隔，類似 HTML 語言的<div>標簽。<text>表示一段行內(nèi)文本，類似于 HTML 語言的<span>標簽，多個<text>標簽之間不會產(chǎn)生分行。

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

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

七、小程序的項目結(jié)構(gòu)

總結(jié)一下，這個示例一共有4個文件，項目結(jié)構(gòu)如下。

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

這就是最簡單、最基本的小程序結(jié)構(gòu)。所有的小程序項目都是這個結(jié)構(gòu)，在上面不斷添加其他內(nèi)容。

這個結(jié)構(gòu)分成兩層：描述整體程序的頂層 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"。

開發(fā)者工具導入項目代碼，就可以看到導航欄變掉了。

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

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

到此這篇關于制作微信小程序的小白簡單入門教程的文章就介紹到這了,更多相關微信小程序入門教程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論