微信小程序從入門到精通（一） 基礎(chǔ)知識(shí)與代碼構(gòu)成

來源：超達(dá)科技 發(fā)布時(shí)間：2018-03-29瀏覽：3919次

微信小程序從入門到精通（一） 基礎(chǔ)知識(shí)與代碼構(gòu)成

前言

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

代碼構(gòu)成

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

如上圖，我們就以這個(gè)最簡單的快速啟動(dòng)模板項(xiàng)目的代碼為例，看一看一個(gè)小程序項(xiàng)目的基本結(jié)構(gòu)：

如上圖，此處重點(diǎn)注意一下標(biāo)記出的4個(gè)文件：

1. wxml

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

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

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

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

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

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

<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判斷條件，意思就是當(dāng)條件成立小程序頁面才會(huì)渲染這個(gè)button，否則就會(huì)在頁面上渲染下面的wx:else中的WXML代碼，而wx:else前面有個(gè)block標(biāo)簽，也很好理解，由于wx:else里有2個(gè)標(biāo)簽（image和text），所以需要用block包起來做為一個(gè)整體進(jìn)行渲染，所以把block理解成塊級元素即可，這樣我們就算初步理解了數(shù)據(jù)綁定和條件渲染了，接下來看看樣式文件——index.wxss。

2. wxss

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

可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為750rpx。

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

1. .class   .intro

2. #id #firstname

3. element view

如上所示，樣式選擇器、id選擇器、組件選擇器，同css完全一樣，沒有任何區(qū)別。關(guān)于wxss還有一點(diǎn)了解一下就是全局樣式和局部樣式，在實(shí)際開發(fā)中會(huì)比較常用：

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

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

3.js

同樣的與web中的javascript類似，js在小程序中也是負(fù)責(zé)解決頁面的動(dòng)態(tài)交互，依舊以QuickStart項(xiàng)目中的示例代碼為例：

<view>{{ msg }}</view><button bindtap="clickMe">點(diǎn)擊我</button>12

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

1. bindtap

2. clickMe

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

1. bind

2. tap

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

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

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

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

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

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

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

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

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

同時(shí)也給出了示例代碼：

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

如上所示，我們的事件綁定函數(shù)需要定義在Page中，tapName就是對應(yīng)的函數(shù)名，同時(shí)我們發(fā)現(xiàn)事件處理函數(shù)還有一個(gè)參數(shù)event，下面通過運(yùn)行程序點(diǎn)擊button看一下event里都有什么數(shù)據(jù)：

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

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

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

1.wx.on 開頭的 API 是監(jiān)聽某個(gè)事件發(fā)生的API接口，接受一個(gè) CALLBACK 函數(shù)作為參數(shù)。當(dāng)該事件觸發(fā)時(shí)，會(huì)調(diào)用 CALLBACK 函數(shù)。
 2.如未特殊約定，其他 API 接口都接受一個(gè)OBJECT作為參數(shù)。
 3.OBJECT中可以指定success, fail, complete來接收接口調(diào)用結(jié)果。

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

判斷小程序的API，回調(diào)，參數(shù)，組件等是否在當(dāng)前版本可用。

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

1. api.method.param.options

2. component.attribute.option

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

• api 代表 API 名字

• method 代表調(diào)用方式，有效值為return, success, object,callback

• param 代表參數(shù)或者返回值

• options 代表參數(shù)的可選值

• component 代表組件名字

• attribute 代表組件屬性

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

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

4. app.json

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

app.json 是對當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。

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

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

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

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

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

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

文件名不需要寫文件后綴，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑下 .json, .js, .wxml, .wxss 四個(gè)文件進(jìn)行整合。

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

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

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

如上圖，標(biāo)記出的這一塊就是導(dǎo)航條（navigationBar），所以我們在QuickStart項(xiàng)目中配置的下面這3項(xiàng)都是關(guān)于navigationBar的：

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

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

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

上面詳細(xì)解析了window配置項(xiàng)中的3個(gè)，那么下面就把剩下的4個(gè)也依次了解一下：

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

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

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

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

頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離，單位為px，默認(rèn)值為50。

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

總結(jié)

本篇blog以QuickStart項(xiàng)目為例，整體介紹了微信小程序的項(xiàng)目結(jié)構(gòu)以及4個(gè)最重要的文件類型，并適當(dāng)與android開發(fā)做了比較，算是對小程序做了一個(gè)入門性的認(rèn)識(shí)以及建立一個(gè)大體的概念模型，在后續(xù)的blog中會(huì)逐步深入去研究小程序的技術(shù)點(diǎn)，直到最終能寫出一個(gè)漂亮完整的小程序！周末愉快，The End。