小時光茶社

導語：本文章的主要目的就是針對兩類人： 一類是沒有做過小程序開發，但是想了解小程序整個開發過程及環境和開發中需要注意哪些問題的人，你適合讀本文的入門篇，可以幫你節省至少幾天的時間。 另一類人就是你寫過小程序，但是想對小程序更深入的了解，并想對你的小程序進行一定程度上的優化，那你更適合閱讀本文進階篇，本文給出了一些優化的方向及方法，可供參考。 好了，現在讓我們來開啟小程序的前生今世探險之旅吧。

目錄

(一) 入門

????a) 運行環境

????b) 開發姿勢? ?

????c)? 一個DEMO

????d) 特有的脾氣

????e) 踩過的坑

(二) 進階

????a )原理

????b) 性能優化

????c) 新的寫碼姿勢

????d) 頁面間通信

入門

運行環境

一圖勝千言，我這就不多廢話，先上一個圖，來講明下整個運行的環境流程。

總結：小程序前端代碼是統一上傳到微信服務器，用戶訪問小程序時，微信客戶端自動會去拉取小程序前端所有代碼，小程序代碼里再調用API從服務器取回數據，并把數據渲染到頁面，然后展示給用戶。

開發姿勢

1. 準備階段
圖示：

注冊小程序管理員帳號地址如下：https://mp.weixin.qq.com/wxopen/waregister?action=step1

關聯對應的公眾號，可以關聯也可以不關聯，主要是看業務需求。

關于小程序和公眾號的區別，首先兩個在管理端登錄的平臺地址是不一樣的，其次可以理解為都是屬于微信平臺的一個應用，這兩個應用可以設置關聯，前提是注冊公眾號與小程序的主體信息（即身份信息）需一致。關聯后可以在公眾號里引導跳轉到小程序，小程序與公眾號就成為了一套登錄體系。

小程序的名字不可和非同主體的公眾號名字一樣。

2. 開發體驗階段
圖示：

只有在小程序管理后臺設置為開發者權限的用戶才可以掃碼訪問開發版本小程序，同理體驗版也只有設置為體驗者權限的用戶才可以掃碼訪問體驗版小程序。

開發版可以有多個，即一個開發就是提交一個開發版，互不沖突。但是體驗版只有一個，即從眾多開發版里設置一個版本做為體驗版。

3. 完成階段
圖示：

只有小程序完成發布上線，全體微信用戶才可以訪問。發布上線是管理員在微信小程序管理后臺從體驗版或是眾多提交的開發版里選一個提交審核成為現網版。

4.?維護&升級階段

在小程序管理后臺可以把當前現網的版本隨時回退到老版本，也可以隨時掛小程序暫停公告。

小程序每次發布一個新的版本后，當用戶訪問小程序時，依然訪問的是老版本（微信客戶端會異步去下載新版本），當小程序生存周期結束后再啟動小程序時，就會訪問最新版小程序。基礎庫1.9.9以后，也可以用強制升級接口進行強制升級并啟動。接口名為：wx.getUpdateManager()，只在現網版生效。

備注：
當小程序進入后臺，客戶端會維持一段時間的運行狀態，超過一定時間后（目前是5分鐘）會被微信主動銷毀。
當短時間內（5s）連續收到兩次以上收到系統內存告警，會進行小程序的銷毀。

一個DEMO

我這里以一個最簡單的Demo讓大伙快速的了解整個小程序的開發方式，以及編碼規則和組成小程序的各個部件說明。至于具體詳細的教程，我想小程序官網寫得非常詳細了，我這里就不再復述。官網詳細教程地址為：

https://developers.weixin.qq.com/miniprogram/dev/index.html?

1. 創建一個小程序

在微信開發者工具上創建一個新的項目，填寫上你在微信管理端申請的小程序的APPID，界面如下：

會自動生成一個目錄結構的demo。

效果：

2.?文件結構

2.1? 每個小程序頁面都是由四個文件組件（json,?wxml,?wxss,js）。
2.2? app.js?為整個小程序的入口文件，app.json為整個小程序的全局配置文件，wxss為全局樣式文件。
2.3 project.config.json?為項目配置文件
2.4 pages/?下面為具體的頁了，比如index,?代表首頁，其由四個文件組件,?json文件為可選文件，可有可無。
2.5 utils/目錄下存放的是自己寫的公共JS
2.6 lib/目錄下存入引入外部的一些公共JS文件
2.7 behaviors/?存放的是小程序自定義的行為JS
2.8 components/?存放的是小程序自定義的組件
2.9 img/?存放的是一些ICO圖片

3.?生命周期

3.1 js為入口文件，每個頁面都會經過該頁，其onLauch觸發條件為第一次冷啟動后執行一次，onShow的觸發條件為點擊退出小程序按鈕，然后在沒有被回收時，又從任務欄呼起小程序時。由上圖知道每個小程序的所有頁面都會在第一次啟動時全部加載。
3.2 每個頁面的路由都需要在app.json里定義，否則找不到該路由。如下：

其中pages?就是路由的相關配置;?window為小程序窗口風格相關的配置；tabBar為底部導航欄的配置。
3.3 Page頁面的onload為第一次加載這個頁面時執行，onshow為每次從后臺又重新回到前臺時會被調用。onReady為整個頁面初次渲染完后執行。

3.4? 小程序啟動方式：冷啟動，熱啟動
? ? a)?小程序初次啟動時微信客戶端會把小程序整個代碼下載到手機里，并訪問小程序首頁，假如用戶已經打開過某小程序，然后在一定時間內再次打開該小程序，此時無需重新啟動，只需將后臺態的小程序切換到前臺，這個過程就是熱啟動。
? ? b)?冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動。（主要場景有：小程序被回收后，小程序被主動銷毀后，小程序掃碼進入時等）

3.5 一個頁的基本代碼寫法，如下為index.js

4. 微信原生API

微信原生API主要是開放微信的原生能力，提供一些H5沒有的能力，有網絡類，媒體類，文件操作類，數據存儲類，位置獲取類，設備信息類，界面等接口。
詳細見地址：https://developers.weixin.qq.com/miniprogram/dev/api/?

5. 組件

a). 組件包括兩類，一類為微信官網定義好的組件，其中只有<canvas/>?<video/>?<map/>?<textarea/>幾個組件為原生渲染，其它組件都是為webview渲染，具體這些組件的使用方式參考下面地址的教程：https://developers.weixin.qq.com/miniprogram/dev/component/另一類就是開發者自己定義的組件，我這里主要是重點講下開發者如何自定組件，以及組件與引用他的父頁如何做數據交換。

b). 定義一個組件

我們在開發中，總會有這樣的場景就是有一個功能包括界面，邏輯在多個地方都需要反復使用到，比如我們開發的是商城，每個商品用戶點擊購買時，會彈出一個選擇規格，尺寸，顏色的層，這個層基本在好多頁面和購買行為處都需要使用，如果不把其寫成一個組件，意外著要冗余N份一樣的代碼。這時候我們就可以把JS+視圖抽出來成為一個組件。

定義一個組件：

組件里的properties是對外開放的屬性，每個屬性有三個字段來標明：type表示屬性類型，value?表示屬性初始值、?observer?表示屬性值被更改時的響應函數。
data里的變量用于渲染組件，其實和properties的調用是一樣的，都是用this.data.xxx來調用，組件獲取到父頁面傳遞進來的數據，就可以像頁面操作data數據一樣的操作了。

c).? 父頁面傳數據到組件

引用頁面即父頁面比如為home.wxml，數據傳遞到子頁面就是通過properties開放出來的字段傳遞到組件頁，引用時傳遞，包括開放出來的事件。
home.json?
需要先在Json配置文件里聲明引用的組件

?home.js
父頁面里獲取需要傳遞給組件的值，通過this.setData渲染到頁面，頁面再傳遞給組件。

home.wxml
用聲明里的組件名，開始引入給組件，其中isshow,?btns,title都為組件開放出來的數據。

?d).? 組件傳數據到父頁面

這里推薦使用event的發布，訂閱模式來把數據傳遞給父頁面。對于event不熟悉可以參閱進階篇里的”頁面間通信”這一節。
先在父頁home.js訂閱一個事件,?下面只給出部分代碼：

即當收到Info這個事件有發布時，就執行setinfo()函數，處理想著數據，setinfo函數為home.js里的一個方法，其入參e，就是發布事件時所傳遞的參數。
然后在組件里處理完后，發布事件，代碼如下：

當組件獲取到數據通過emit的方式發布事件，把數據發送出去，而所有監聽到info事件的函數都可以正確收到數據。

6. 事件

事件是指視圖層到邏輯層的通訊方式，將用戶的行為反饋到邏輯層上處理，邏輯層上處理后通過setData把數據又渲染到頁面。
目前在界面上綁定一個事件由bind?+?事件類型或?catch+事件類型，bind的方式綁定事件不會阻止事件冒泡，catch的方式綁定會阻止事件冒泡。事件類型如下：

比如綁定一個點擊事件：
<view>{{name}}</view><view?bindtap=”fun”></view>,fun為寫在邏輯層的響應函數,看上面代碼，fun又會把界面上的值變化”這是一個傳說”。視圖層的值以{{}}包裹。更多的語句參考這一節說明:?https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

7. 行為
7.1? behaviors?是用于組件間代碼共享的特性。
7.2? 每個?behavior?可以包含一組屬性、數據、生命周期函數和方法，組件引用它時，它的屬性、數據和方法會被合并到組件中，生命周期函數也會在對應時機被調用。每個組件可以引用多個?behavior?。?behavior?也可以引用其他?behavior?。
7.3 定義

7.4 組件里引用
在?組件behaviors?屬性定義段中將它們逐個列出即可

8.?存儲
8.1.本地數據永久性存儲
8.2.同一小程序存儲大小限定為10M
8.3.和H5的storage存儲無半點毛線關系
8.4.以用戶維度來隔離，A不可取到B用戶數據
8.5.當存儲空間不足，會自動清除好久沒使用的小程序緩存
8.6.目前微信API提供存儲相關的原生接口有如下：

9. 運營
9.1. 擴展快速運營的能力

會不會有這樣的場景，就是有時候需要開發一些活動或是運營頁在小程序里打開，這時候就需要用到小程序的web-view組件了，而不用每次開發小程序代碼然后走發布審核流程了，該組件允許加載一個H5地址的頁面，并可以在該頁面跳回到小程序。在web-view里打開的H5頁暫不支持H5的支付方式，需要支付的話，要重新跳回到小程序頁再拉起小程序的支付來完成支付。我這邊的寫法是編寫一個跳轉的webview,后臺配置相應的運營或是活動地址，獲取該地址然后調用公共的webview完成跳轉，跳轉公共函數如下：

小程序中轉頁pages/webView/webView?代碼如下：
webView.js代碼

webview.wxml代碼：

?9.2.整個小程序的運營和推廣方式，我們一般是二維碼掃碼，或是和其它小程序合作鏈接，加入微信推廣聯盟，直接好友轉發小程序頁面等方式。

特有的脾氣

1. 所以api請求必須是https,?在IDE上調試時可以勾選右側面板上檢驗HTTPS證書以方便調試，但在手機上則需要在手機上的小程序打開調試模式方可不檢驗htts證書。

2. 小程序跳轉h5頁必須是以打開webview（小程序有一個打開web-view組件）的方式打開不可跳轉到外部H5頁。目前H5頁不可跳小程序，只有在小程序以web-view組件打開的H5里才可以跳回到小程序。

3. 以web-view組件方式打開的H5里沒辦法用H5的方式來支付。

4. APP可以跳轉到小程序，小程序只能被動跳轉到APP，不可主動跳轉到APP，被動是指只有當APP主動跳入小程序，小程序才可以跳回到APP。

5. 小程序是跨平臺的，必須運行在微信客戶端里。

6. 小程序的渲染方式為webview的方式渲染，而非原生渲染，只有<canvas/>?<video/>?<map/>?<textarea/>幾個組件才是原生渲染。

7. 小程序目前統一使用rpx單位來隔離機器之間屏幕大小的差異，以達到適配，讓開發者更加專注業務。

8. 小程序開發不能使用Nodejs的擴展，可能官方是考慮到太大的原因。

9. 目前一個小程序不可超過2M，如果小程序做了分包，則所有包加起來不可超過8M，每個包不可超過2M。

10. 小程序里請求的API域名需在小程序管理后臺添加到域名白名單方可訪問，小程序web-view組件打開的H5地址也需在小程序管理后臺添加到業務白名單，并生成一個文件上傳到業務服務器，?驗證通過方可在小程序里打開這個H5地址（在H5里通過ifram，或是跳轉涉及到的域名都需加入業務白名單方可訪問）。

11. 微信開發者工具下JS是跑在chrome內核，IOS下是跑在Jscore內核，安卓下是跑在X5內核。

12. 小程序里沒有window,document對象，沒有cookie的概念。

13. 小程序的鏈接地址不是以https開頭，而是類似這樣的/pages/xx/ccc/?id=23?,?參數寫法和h5是一樣的。

14. 小程序原生API好多對基礎庫的支持版本有要求，建議在微信管理后臺設置最低基礎庫為1.9以上，當基礎庫小于這個版本的用戶訪問小程序時，微信會提示用戶升級微信客戶端。

15. 小程序的每次的版本發布，都需要經過微信部門的審核通過，才可發布，時間1小時到1天不等。

踩過的坑

1. 就是在寫頁面的時候，如果頁面上有倒計時功能，在小程序onhide后沒有停掉倒計時，在iphone下就會觸發內存不夠，小程序被回收，而在把小程序切回到前臺界面上，小程序又沒有重新渲染，從而導致白屏。建議在onhide里及時結束倒計時，onshow里再重新啟動。

2. 安卓下圖片地址如圖以//開頭，則訪問不了。建議后臺API返回的地址都帶上https

3. 手速很快且頁面延遲稍卡的情況下，會重復進入同個頁面N次，然后回退時要回退N次才能回退到上一頁，建議用一個跳轉函數包裝下微信的原生頁面跳轉函數并在里面做點擊限速。

4. 如果自己開發的小程序連續更新了N個版本，用戶一直沒有更新的情況下，突然有一天訪問我們小程序，會偶現加載小程序信息超時的錯誤，從而進入不了小程序。具官方回復是時序出錯已修復，但一直時而還會偶現。

5. 在微信上查看小程序的數據及管理小程序，請分別搜索官網的”小程序數據助手”，”小程序開發助手”。

6. 更多官網已知BUG大伙可以在這里查閱https://developers.weixin.qq.com/home?action=get_specific_blog_list&lang=zh_CN&token=880302536&blogcategory=8?

進階

原理

了解整個原理有助于編寫高效的代碼，先上總預覽圖：微信加載完小程序后會啟動兩個線程來分別跑視圖層和邏輯層代碼，等于兩個代碼分處于不同的容器。那就涉及到這兩個容器之間的數據通信和交互，目前view層到Server層傳遞方式為”響應事件”，server層到view層則是”setData”數據。Server層的解析器為jscore,?view層的解析器為webview。

setData的背后原理圖：

View始終使用的是一個線程，因為setData不可太頻繁，否者就會阻塞，線程被阻塞后，view上的事件也沒法響應，表現就會很卡。

通過dom?diff算法只把差異的數據更新到虛擬DOM上，因為虛擬DOM其實就是和實際的WXML節點一一對應的關系，也就更新到了相應的wxml上，不會重新渲染，只會渲染被更新部分。

性能優化

1. setData使用注意：

從上面原理圖得知，每次執行setData就是一次頁面變更，雖然不是重新渲染，但是這個setData的使用如果不合理，非常影響性能，比如setData一次內容太多，就會導致和虛擬DOM里的結構對比時間過長，對于如果首屏加載時間有要求的話，可以盡量只setData可視區域的數據，這樣提升對比和渲染效果。setData也不可太過頻繁，因為多次頻繁setData數據到webview線程，會導致阻塞,因為webview線程一直編譯執行渲染，從而沒法響應界面上的事件，也沒辦法把事件傳遞到邏輯層JS，所以界面看著就卡頓。當前頁面進入后臺態后，不應該繼續setData操作，因為所有的webview共用的是一個JS線程，他會搶占資源，從而影響當前顯示頁面的流暢度。

2.?預加載：

優化前小程序每個頁面的訪問都會先啟動一個webview來裝載，然后再加載頁面，webview的啟動會耗時大概200-300毫秒，如果在當前頁面停留超過2秒，小程序會在后臺提前啟動webview,?這里的優化主要是立即點擊的情況，即當點擊的時候去先加載要跳入的頁面的API數據與創建webview的時間并行，這樣當一進入頁面加載時，就可以直接拉數據進行渲染了。從而節省了API加載時間，如上圖。
另一種優化是在特定的場景下，即比較明確可以預知到當前用戶會訪問哪個頁面，然后開啟一條線程，提前加載下一個頁面的API數據，并把加載好的數據發送到要打開的頁面處的監聽函數處即可，主要是節省下API加載時間，當加載頁面時就可以立馬渲染數據了。

3.?分包，分小程序：

因為小程序的初次訪問都會先從遠程下載主包小程序代碼到本地手機，然后再運行，因此這個小程序主包的大小就直接影響到下載的速度。下載速度占用時間長了，那整個小程序打開的速度時間就拉長了，為此我們使用小程序分包功能，讓主包盡可能的體積最小且可用，這樣就可以快速的啟動。盡量控制每個包在1M以內（主包和分包）。
如果小程序體積實在過大，可以按功能模塊分成多個小程序，小程序之間再設置為互相關聯，就可以相互跳轉訪問了。

4.?減少webview：

我們每個頁面的加載都會通過創建一個webview來裝載，但是多個webview是共用一個線程的，因為webview過多就會消耗大量內存，為此我們需盡可能保持層級最少，及時調用wx.redirectTo（）等函數御載頁面，從而控制webview的數量。

?新的寫碼姿勢

1.?用小程序開發的同學應該知道，小程序沒辦法引入node包，只能在小程序IDE工具上開發，假如我們有如下的場景，比如我們的樣式是用less寫的，比如我們對代碼有一套自己的規范需要檢測，甚至我們用的是vue代碼來寫小程序，等等這樣的場景，如何實現呢，先上一個代碼目錄結構圖：

2.?我這里使用的是gulp來對代碼進行編譯，編譯之后生成目標代碼，就是和小程序要求的目錄結構一樣的了。至于gulp的使用不在本教程說明范圍，可以自行百度。

我這里的gulp主要做了三個事：一是把less編譯成瀏覽器可以識別到的css；二是對代碼編碼規范進行檢測；三是把小ICO圖標轉成base64的圖片在樣式里引入。
當然你可以做更多的一些事情，反正只要提升你的編碼質量和效率的事都可以，甚至你都可以自己寫一個對VUE代碼轉化為小程序代碼的工具都成，沒有你做不到，只有想不到。生成小程序目標代碼后就可以在IDE工具上看效果及微調試了。而寫代碼一般是在其它的代碼編碼工具里。
另：推薦好用的工具函數JS，underscore.js?http://www.css88.com/doc/underscore/?

頁面間通信

有時候在開發過程中會有這樣的場景，就是小程序頁面A需要和小程序頁面B通信，子組件需要和父組件通信，有沒有一種快速統一的通信方式呢？這里提供一種方式給大家參考，就是使用訂閱和發布模式，引入一個開源的JS封裝類，然后就可以用統一的方式愉快的在各個頁面以及子與父組件之前愉快的通信了。先講使用方式，源碼附在后面。
使用方式如下：

1. App.js里初始化事件類，假設事件所在的文件名為event.js
const?Event?=?require('./lib/event');
App({
….
evt:new?Event(),?//即把這個事件初始化給一個全局變量
})

2. 訂閱事件,?比如在A頁想知道B頁數據變化后，立馬做出相應變化
Page（{
…
getxxx:function?()?{
getApp().evt.on(“aaa”，this.?changeinfo);?//aaa為事件名
},
changeinfo?:?function?(objxx){?//這里是響應訂單事件處理函數
},
onUnload:?function()?{
getApp().evt.off();?//注銷所有當前頁面的訂閱事件
}
}）

3. 發布事件
Page({
…
setmmm:function()?{
getApp().evt.emit(“aaa”,?objxx);?//aaa為事件名，和訂閱名一致，objxx?為需要發送的參數
},
})
event.js代碼如下：

關注我們?

總結

以上是生活随笔為你收集整理的微信小程序入门与进阶的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。