微信小程序從入門到精通（一） 基礎知識與代碼構成

來源：超達科技 發布時間：2018-03-29瀏覽：3761次

微信小程序從入門到精通（一） 基礎知識與代碼構成

前言

離上次寫博客又有將近3個月了，一方面是換了新公司實在忙的要命，另一方面是因為自己確實懈怠了不少，有時突然感覺自己想學的東西很多，想重新拾起1、2年前的android開發技能，已經快忘光了，然而目前工作主要是java彩票系統的業務開發，也基本不做運維了，擔心linux也要和android一樣慢慢忘掉了，此時才體會到孔老夫子提出的“溫故知新”這四個字的重要性啊，隨著年齡的增長，技術必然不能止步不前，一位大學時的友人問我能否接個小程序開發的私活，思來想去，這么久沒有認真學一下新的技術，索性接下來邊學邊做，回首過去，我13年自學開發微信公眾號，14年自學開發android，而且均略有小成，所以想借此機會找一找當初的那種學習狀態，畢竟我還有一個未完成的全棧夢想呢，哈哈，廢話不多說，如標題，從今天開始我就會堅持學習開發一段時間微信小程序，并把這個過程記錄下來。

代碼構成

從代碼構成開始吧，畢竟萬物起源于hello world~什么帳號申請、IDE下載之類的我就不在此贅述了，先來看一個最簡單的小程序的文件結構，第一次啟動IDE會提示可以創建一個簡單的QuickStart項目：

如上圖，我們就以這個最簡單的快速啟動模板項目的代碼為例，看一看一個小程序項目的基本結構：

如上圖，此處重點注意一下標記出的4個文件：

1. wxml

同html很類似，這個文件描述了小程序頁面的結構，如上圖，我們可以看到view、button、image等標簽，這些標簽在小程序中被按功能包裝了起來，這一點就類似于android開發中的控件概念。還有在上圖中我們看到了一些表達式，例如：wx:if=”{{ }}”，第一眼的感覺仿佛是jsp的jstl或者freemarker的動態表達式（c:if等），其實不然，實際上它是數據綁定與條件渲染的結合，那么問題來了，什么是數據綁定，什么又是條件渲染呢？首先來看看數據綁定，QuickStart項目給出的示例代碼是這樣的：

<!--wxml--><view> {{message}} </view>12

// page.jsPage({  data: {    message: 'Hello MINA!'
  }})123456

如上所示，通過 {{ }} 的語法把一個變量綁定到界面上，就叫數據綁定，然后在js中為我們這個變量設置狀態（值），如上的例子所示，WXML 中的動態數據均來自對應 Page 的 data，我們把data可以理解成一個固定的json key，包含了所有WXML中的變量定義，如下所示：

  data: {
   xxx:'',
   xxx:'',   ...
  }12345

既然說到數據綁定，自然也就不能不說MVVM模式，從傳統的MVC到MVP再到MVVM，這種模式在android開發中有較為廣泛的應用，還有前端開發中的Vue、React等框架，同時微信小程序也是采用了這種思想。說完了數據綁定，再簡單看看條件渲染，通過wx:if即可判斷是否需要渲染該代碼塊，依舊以QuickStart項目中的代碼片段為例：

<view class="userinfo">
  <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
  <block wx:else>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </block></view>1234567

如上所示，可以看到在button中有wx:if判斷條件，意思就是當條件成立小程序頁面才會渲染這個button，否則就會在頁面上渲染下面的wx:else中的WXML代碼，而wx:else前面有個block標簽，也很好理解，由于wx:else里有2個標簽（image和text），所以需要用block包起來做為一個整體進行渲染，所以把block理解成塊級元素即可，這樣我們就算初步理解了數據綁定和條件渲染了，接下來看看樣式文件——index.wxss。

2. wxss

wxss文件就相當于html中的css文件，具有 CSS 大部分的特性，而不同的是小程序新增了一個尺寸單位rpx，同android開發中的dp類似都是為了解決不同屏幕大小的設備像素比的問題，在官方文檔中是這樣定義的：

可以根據屏幕寬度進行自適應，規定屏幕寬為750rpx。

如上所示，也就是說我們可以根據不同設備的寬度的邏輯像素進行換算，例如iphone6的邏輯像素是375px，物理像素是750px，所以1rpx=0.5邏輯像素=1物理像素，小程序中的rpx單位正是以iphone6的屏幕分辨率為基準設計的，因為在iphone6的326ppi像素密度下，1rpx=1物理像素，所以我們在開發時也盡量使用iphone6作為視覺標準，關于移動開發中用到的這些諸如“物理像素”、“邏輯像素”、“dpr”、“dpi”等等不清楚的，可以參考我之前寫過的一篇博客（移動開發中“單位”的那些事兒），對這些都做了詳細的闡述。關于wxss還有一些常用的基礎知識點跟css很類似，例如全局/局部樣式、選擇器等等，以幾種常見的選擇器為例：

1. .class   .intro

2. #id #firstname

3. element view

如上所示，樣式選擇器、id選擇器、組件選擇器，同css完全一樣，沒有任何區別。關于wxss還有一點了解一下就是全局樣式和局部樣式，在實際開發中會比較常用：

定義在 app.wxss 中的樣式為全局樣式，在 page 的 wxss 文件中定義的樣式為局部樣式。

如上所示，把多個頁面通用的樣式可以寫在app.wxss中進行全局定義，而每個頁面個性化的那部分樣式寫在page下各自的wxss文件中，看完了樣式文件，接下來我們看看相對更加重要的js事件交互。

3.js

同樣的與web中的javascript類似，js在小程序中也是負責解決頁面的動態交互，依舊以QuickStart項目中的示例代碼為例：

<view>{{ msg }}</view><button bindtap="clickMe">點擊我</button>12

如上所示，如果我們希望在點擊按鈕時候做一些事情，那么就需要在js中去寫相關的邏輯代碼了，在上面的代碼中我們看到button組件中聲明了這樣一個屬性bindtap，這就牽扯到事件的概念了，同時需要注意的是bindtap="clickMe"稱為綁定事件，需要分為兩部分看，分別是：

1. bindtap

2. clickMe

如上所示，bindtap我們稱為key，而clickMe稱為value，也就是說事件綁定的寫法是key/value形式的，首先來看一下key——bindtap，key我們也需要分為兩部分看：

1. bind

2. tap

bind是一個動詞，代表綁定動作，而tap是一個名詞，代表真正的事件，那么小程序中都有哪些事件呢？隨意列舉幾個先簡單看一下：

所以bindtap共同構成了我們事件綁定的key，這里引用官方文檔的一句話：

在小程序中，key 以bind或catch開頭，然后跟上事件的類型。

也就是說，我們事件綁定中的key的這個動詞，只能是bind或catch，那它們兩個又有什么區別呢？官方文檔中解釋的很清楚：

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

如上所示，我們先有個大體的印象，至于什么冒泡事件以后再說，本篇blog僅僅作為一個基礎入門篇，現在我們已經清楚了bindtap表示綁定了一個觸摸事件，那接下來看一下key/value中的value。在上面的代碼中value的值是clickMe，這相當于一個函數名，類似于我們在html中寫的onclick函數：

<button id="btn1" name="btn" onclick="clickMe();"/>1

所以說value我們僅需要在js中對應的去定義好即可，至于怎么定義，官方文檔中也給出了明確的說明：

在相應的Page定義中寫上相應的事件處理函數，參數是event。

同時也給出了示例代碼：

Page({  tapName: function(event) {
    console.log(event)
  }
})12345

如上所示，我們的事件綁定函數需要定義在Page中，tapName就是對應的函數名，同時我們發現事件處理函數還有一個參數event，下面通過運行程序點擊button看一下event里都有什么數據：

如上圖，點擊button后我們在控制臺可以看到一組json格式的數據，這就是該事件所包含的一些相關信息，例如事件類型（tap）、時間戳和控件位置坐標等等，在本篇blog中暫不做過多說明，我們大致了解一下即可?，F在我們已經理解了關于事件綁定的相關使用方法，那么再回頭看一下上圖中的代碼，細心的朋友可能會注意一下第10行：

canIUse: wx.canIUse('button.open-type.getUserInfo')1

如上所示，將wx.canIUse這個東東的返回值賦值給了canIUse變量，那么這行代碼是什么意思呢？這就要提一下小程序給我們提供的API了，這是小程序非常nice的一點，通過這些API，我們可以方便的調用微信小程序為我們提供的能力，例如獲取用戶信息、本地存儲、微信支付等，而不用再像android開發那樣去集成對接第三方SDK再去寫繁瑣的實現代碼等等，所以說小程序API很棒很nice，可以讓我們直接調用API快速實現一些功能性問題，從而把精力集中在產品自身的業務邏輯上。下面簡單看一下官方文檔中對于小程序API的通用說明：

1.wx.on 開頭的 API 是監聽某個事件發生的API接口，接受一個 CALLBACK 函數作為參數。當該事件觸發時，會調用 CALLBACK 函數。
 2.如未特殊約定，其他 API 接口都接受一個OBJECT作為參數。
 3.OBJECT中可以指定success, fail, complete來接收接口調用結果。

簡單了解一下，并注意下第2點，也就是說一般的API接口都會接受一個OBJECT做為參數，就如同我們上面簡易教程的代碼wx.canIUse('button.open-type.getUserInfo')，接下來我們具體看一下wx.canIUse(String)這個API的使用方法，官方文檔中做了詳細的說明：

判斷小程序的API，回調，參數，組件等是否在當前版本可用。

如上所示，這個API主要是做一些組件在當前版本的可用性check，接下來我們看一下參數說明，也就是button.open-type.getUserInfo 代表什么意思，在官方文檔中給出了兩種參數形式，分別是：

1. api.method.param.options

2. component.attribute.option

如上所示，可以理解成有兩個重載方法，第一種傳4個參數，第二種傳3個參數，我們上面的例子顯然是第二種方式，再來看一下這些參數名的含義：

• api 代表 API 名字

• method 代表調用方式，有效值為return, success, object,callback

• param 代表參數或者返回值

• options 代表參數的可選值

• component 代表組件名字

• attribute 代表組件屬性

• option 代表組件屬性的可選值

現在就清楚了，我們例子中的參數'button.open-type.getUserInfo'表示open-type屬性為getUserInfo的button組件。大致了解了js之后，我們最后看一下app.json這個文件。

4. app.json

先來直接看一下官方文檔中對app.json的概述：

app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。

如上所示，暫且理解為一個全局配置，有點類似于android中的manifest文件，下面看一下QuickStart項目中的app.json文件的具體代碼：

{
  "pages":[    "pages/index/index",    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }}123456789101112

如上所示，只有短短12行的json格式文件，可以看到有2個key，分別是pages和window，下面就具體看一下這兩項配置的作用，引用官方文檔的原話：

pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。

如上所示，pages對應一個字符串數組，文檔說它們描述了小程序所有的頁面路徑，換句話說，就是小程序中的所有頁面都需要在app.json文件中聲明具體的路徑，注意理解我這里用的聲明（declare）這個詞，也就是說如果創建了某個wxml文件卻沒有在app.json中做聲明配置，那么就意味著小程序找不到這個頁面，當然也就無法正常顯示了。下面先看一下我們demo項目中的頁面文件目錄：

如上圖，可以看到pages目錄下有兩個目錄，分別是index和logs，每個目錄下放的是頁面樣式等相關文件，目錄名與文件名相同，這里注意我們在app.json定義的第一個路徑是pages/index/index，但是我們在pages/index目錄下有3個文件，只在配置中寫文件的前綴不寫后綴就可以自動匹配所有文件嗎？答案是肯定的，文檔中也說明了這一點：

文件名不需要寫文件后綴，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。

如上所示，這樣我們就清楚了在app.json中可以不用配置文件后綴，當然前提是文件前綴必須一致，這一點很重要。最后還有一個細節性的點，就說pages配置的這個數組的第一項代表小程序的初始頁面，上面我們配置的第一項是index，所以小程序的啟動頁就是index.wxml了，關于pages先說這么多，接下來看看window這個配置項，繼續看官方文檔中對于window這個配置項的概述：

window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。

如上所示，說白了就是一些狀態欄、導航條的樣式設置等，也不多總共就7個配置項，包括狀態欄、導航條、標題、窗口背景色，在說配置之前我們首先需要明白哪里是狀態欄、導航條等等，下面具體看一下模擬器中的界面：

如上圖，標記出的這一塊就是導航條（navigationBar），所以我們在QuickStart項目中配置的下面這3項都是關于navigationBar的：

    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"123

如上所示，依次看一下，第一個顧名思義就是導航條的背景色了，這里給的是白色（#fff），注意下僅支持HexColor（十六進制顏色值，例如：#fff000），不像css中還可以寫成單詞形式（red、white等等）。下面我們隨意修改一下就可以更清楚的看出navigationBar的范圍了：

如上圖，第二個配置navigationBarTitleText代表導航條標題，也就是上圖中的WeChat字樣，當然配置在app.json中是全局的標題，如果我們自定義的頁面需要個性化的標題也很簡單，直接在該頁面的目錄下創建自己的xxx.json進行配置即可，優先級自然就不用說了。第三個配置navigationBarTextStyle**代表導航欄標題顏色，默認白色（white），并且僅支持白色和黑色（ black/white）**這兩種顏色，下面分別看一下這兩種樣式的效果圖：

上面詳細解析了window配置項中的3個，那么下面就把剩下的4個也依次了解一下：

如上所示，首先來看backgroundColor——窗口的背景色，那窗口指的是哪里呢？看一下官方文檔中的這張圖：

如上圖，background位于navigationBar和page之間，但是我們在模擬器中并不能看到，原因是它需要下拉才能顯示這片區域，所以我們首先需要把上面4個配置項中的enablePullDownRefresh屬性設置為true來開啟下拉刷新。開啟之后設置一個背景顏色（#ffff00），然后在模擬器中來嘗試一下下拉刷新動作：

如上圖，這就是小程序自帶的下拉刷新，我們可以清楚的看到background區域，接下來看一下backgroundTextStyle屬性，默認為light且僅支持light/dark這兩個屬性值，默認的效果在上面的動圖中已經看過了，那我們修改為dark再看一下下拉的樣式：

如上圖，很明顯下拉刷新的loading樣式發生了改變。下面接著看剩下的最后一個window配置項——onReachBottomDistance，官方文檔的解釋是：

頁面上拉觸底事件觸發時距頁面底部距離，單位為px，默認值為50。

如上所示，這個屬性提到了上拉觸底（onReachBottom），這個操作類似于android中的上拉加載的概念，通常用于分頁數據的加載，在此我們暫不做過多介紹，先了解有這么個東西就行，以后在實際應用中再做詳細說明，到此為止關于app.json中的window的所有屬性配置項就全部介紹完畢了，同時我們的第一個QuickStart項目的代碼中最重要的4個文件（wxml、wxss、js、app.json）也算是全部介紹完畢了。

總結

本篇blog以QuickStart項目為例，整體介紹了微信小程序的項目結構以及4個最重要的文件類型，并適當與android開發做了比較，算是對小程序做了一個入門性的認識以及建立一個大體的概念模型，在后續的blog中會逐步深入去研究小程序的技術點，直到最終能寫出一個漂亮完整的小程序！周末愉快，The End。