0.序言(yan)

       當前(qian)端在談論(lun)微信小(xiao)程序的時候，iOS 開發在談論(lun)什(shen)么。     

本(ben)職是(shi)iOS 移(yi)動開(kai)發(fa)的(de)，最近研究了一(yi)(yi)下比較火的(de)微(wei)信(xin)小(xiao)程(cheng)序(xu)(xu)。前(qian)端(duan)0基礎，研究也不是(shi)很(hen)透(tou)徹，所(suo)(suo)以大家一(yi)(yi)定(ding)要保持懷疑的(de)態度(du)看(kan)這(zhe)一(yi)(yi)篇分享(xiang)。由于是(shi)本(ben)職是(shi)iOS開(kai)發(fa)所(suo)(suo)以在(zai)開(kai)發(fa)小(xiao)程(cheng)序(xu)(xu)的(de)時候(hou)也會按照之前(qian)iOS開(kai)發(fa)的(de)一(yi)(yi)點(dian)點(dian)經驗來搭建小(xiao)程(cheng)序(xu)(xu)。所(suo)(suo)以主要是(shi)從幾(ji)個應用框(kuang)架層來比較說明一(yi)(yi)下iOS 和(he) 微(wei)信(xin)小(xiao)程(cheng)序(xu)(xu)之間的(de)異(yi)同點(dian)。理論基礎來自官方文(wen)檔再(zai)加上(shang)自己一(yi)(yi)點(dian)點(dian)實踐（從圖可(ke)以看(kan)出這(zhe)渲染跟原生App很(hen)相像了）

1.網絡層

 網絡層(ceng)：這是必要的基礎建設(she)。

 

 

小(xiao)程(cheng)(cheng)序(xu)：上圖是(shi)小(xiao)程(cheng)(cheng)序(xu)的后臺(tai)服(fu)(fu)務器配置(zhi)，必(bi)須(xu)要事(shi)先(xian)配置(zhi)好服(fu)(fu)務器，否(fou)則(ze)在程(cheng)(cheng)序(xu)中是(shi)無法正常(chang)請求(qiu)(qiu)的。一個小(xiao)程(cheng)(cheng)序(xu)同時只能有(you)一個 WebSocket連(lian)接，并且(qie)同時也(ye)只能有(you)5個網絡(luo)請求(qiu)(qiu)連(lian)接。請求(qiu)(qiu)的服(fu)(fu)務器地址必(bi)須(xu)是(shi)HTTPS協議的，看了后臺(tai)服(fu)(fu)務器地址配置(zhi)，上傳(chuan)和下載文件的服(fu)(fu)務器也(ye)是(shi)單(dan)獨設置(zhi)。很重要的一點也(ye)令人頭(tou)疼的是(shi)小(xiao)程(cheng)(cheng)序(xu)是(shi)不支(zhi)持H5頁(ye)面跳轉也(ye)是(shi)不支(zhi)持cookie。

iOS ：蘋果規定從2017年1月起App內的(de)(de)(de)網(wang)絡(luo)鏈(lian)(lian)接強(qiang)制使用HTTPS協議的(de)(de)(de)，iOS 可以設置網(wang)絡(luo)請(qing)求數(shu)(shu)(shu)的(de)(de)(de)。通過參數(shu)(shu)(shu)maxConcurrentOperationCount 來設置請(qing)求數(shu)(shu)(shu)，但是(shi)也(ye)不是(shi)任意設置的(de)(de)(de)，在2G網(wang)絡(luo)一(yi)次(ci)只能(neng)維持1個(ge)鏈(lian)(lian)接，3G是(shi)2個(ge)，在WiFi和4G網(wang)絡(luo)環境下是(shi)不限鏈(lian)(lian)接數(shu)(shu)(shu)的(de)(de)(de)，這里說(shuo)明(ming)下并不是(shi)并發鏈(lian)(lian)接數(shu)(shu)(shu)越(yue)多(duo)(duo)越(yue)好，越(yue)多(duo)(duo)占(zhan)用帶(dai)寬(kuan)越(yue)高，請(qing)求時間反而會延遲。

所以這里對小程序同時有(you)5個網絡請(qing)求有(you)點疑惑，是否不區分網絡？

這(zhe)里數(shu)據(ju)回調處(chu)理比較類(lei)似。（小(xiao)程序有點類(lei)似block)

 

 

1. // 網絡請求
2. wx.request({
3. url: '//aq.qq.com',
4. data: {
5. x: '' ,
6. y: ''
7. },
8. header: {
9. 'Content-Type': 'application/json'
10. },
11. success: function(res) {
12. console.log(res.data)
13. }
14. })

2.本地持久化存儲/數據層

 

小(xiao)程(cheng)序：為每一個小(xiao)程(cheng)序提供了10M的緩存，用來存儲數據和文件，現在是內測階段，不知(zhi)道以后會不會擴(kuo)容。

 數據(ju)(ju)：看官方的API目前只支持(chi)”key-data”的簡單(dan)鍵值(zhi)存(cun)儲以及set/get/remove/clear數據(ju)(ju)操作，還不(bu)支持(chi)數據(ju)(ju)庫(ku)。

文件(jian)(jian)：在文件(jian)(jian)存(cun)儲方面，小程(cheng)序是默(mo)認都是臨時(shi)路徑(jing)，本(ben)次程(cheng)序運行期間可以正常(chang)讀取(qu)，退出程(cheng)序后(hou)就刪除。所以如果要持久存(cun)儲，需要再調用wx.saveFile放到本(ben)地存(cun)儲，下次打(da)開程(cheng)序還(huan)能正常(chang)訪問到。

iOS：為每一(yi)個(ge)(ge)(ge)App創建一(yi)個(ge)(ge)(ge)沙盒(he)，沙河有3個(ge)(ge)(ge)文件夾Document/Library/tmp，根(gen)(gen)據這個(ge)(ge)(ge)文件夾的(de)(de)命名大概就可(ke)以猜出它們不同(tong)用(yong)途(tu)。iOS 這邊存(cun)(cun)儲(chu)方(fang)案(an)(an)就種類繁多，品種豐富(fu)。Core Data、SQLite、NSUserDefaul、keychain、plist、archive根(gen)(gen)據自己的(de)(de)需求選取數據存(cun)(cun)儲(chu)方(fang)案(an)(an)。這里只(zhi)是簡單(dan)說明一(yi)下iOS 持久化存(cun)(cun)儲(chu)，其實它是非(fei)常龐大的(de)(de)一(yi)個(ge)(ge)(ge)點，iOS是一(yi)個(ge)(ge)(ge)小型(xing)的(de)(de)操(cao)作系統，存(cun)(cun)儲(chu)和文件操(cao)作是有一(yi)套完整的(de)(de)方(fang)案(an)(an)。

3.業務層/UI層

        在小程序中一個(ge)完整的頁面page是(shi)由(you).js/.json/.wxml/.wxss這四(si)個(ge)文件組成(cheng)，每個(ge)界(jie)面.js .wxml是(shi)必選項其(qi)它兩項選填。iOS并沒(mei)有這樣的強制規定，一個(ge)界(jie)面可以(yi)完全(quan)在一個(ge)`UIViewController`里面完成(cheng)，復(fu)雜的頁面iOS也是(shi)可以(yi)通(tong)過(guo)類似的文件拆分使得結構更加清晰明了。

.js：頁面邏輯

        iOS中一(yi)個完整界(jie)面可以(yi)只有一(yi)個UIViewController，在UIViewController中實現了頁面的大部分邏(luo)輯(ji)代(dai)(dai)(dai)碼(ma)，在可讀性(xing)可以(yi)規(gui)范一(yi)下頁面的代(dai)(dai)(dai)碼(ma)布局，屬性(xing)初始化，生(sheng)命(ming)周期(qi)函數，回調函數，事件(jian)處理，自定義方法等(deng)。代(dai)(dai)(dai)碼(ma)結(jie)構(gou)布局大概(gai)是(shi)這樣(yang)(yang)(yang)子(zi)，但是(shi)也(ye)不一(yi)定所有的UIViewController都(dou)要有。同樣(yang)(yang)(yang)小(xiao)程(cheng)序中也(ye)有同樣(yang)(yang)(yang)結(jie)構(gou)數據(ju)，生(sheng)命(ming)周期(qi)，控件(jian)綁(bang)定事件(jian)，自定義方法。這樣(yang)(yang)(yang)可以(yi)提(ti)高(gao)代(dai)(dai)(dai)碼(ma)的可維(wei)護性(xing)和可讀性(xing)。畢竟小(xiao)程(cheng)序還沒有 control + 6這樣(yang)(yang)(yang)的快捷鍵。

        看到上面(mian)對比(bi)(bi)，發現兩者還是很相似(si)的(de)，這樣(yang)對比(bi)(bi)看還是有助我(wo)們(men)了解小程序(xu)。簡單對比(bi)(bi)一下生命周期函數。

 

.json 公共配置

        在(zai)(zai).json文件(jian)中(zhong)可以配(pei)(pei)置(zhi)導航(hang)(hang)欄的(de)樣(yang)式，tarBar的(de)配(pei)(pei)置(zhi)，刷新控件(jian)，網絡(luo)超時(shi)時(shi)間等。一(yi)個(ge)小程(cheng)序只有一(yi)個(ge)總(zong)的(de)app.json公共配(pei)(pei)置(zhi)，其(qi)它的(de)page也有.json文件(jian)但是(shi)只能配(pei)(pei)置(zhi)導航(hang)(hang)欄的(de)樣(yang)式，其(qi)它都繼(ji)承app.json里面的(de)公共配(pei)(pei)置(zhi)。很(hen)重要(yao)的(de)一(yi)點就(jiu)(jiu)是(shi)你創建(jian)所(suo)有的(de).js的(de)文件(jian)都需要(yao)添(tian)(tian)加(jia)到(dao)app.json中(zhong)。不(bu)添(tian)(tian)加(jia)編譯器也不(bu)會報錯，但是(shi)你會發(fa)現跳(tiao)轉到(dao)某個(ge)頁面一(yi)直不(bu)成功(gong)一(yi)直顯示不(bu)出來，這個(ge)時(shi)候就(jiu)(jiu)要(yao)檢(jian)查(cha)一(yi)下有沒有在(zai)(zai)app.json中(zhong)添(tian)(tian)加(jia)改文件(jian)了。

.wxml 頁面結構

.wxss 頁面組件樣式

         這(zhe)個.wxml可(ke)以想象成(cheng)在UIViewController里面(mian)放(fang)一些控件(jian)(jian)，比如這(zhe)個頁面(mian)有多少圖片(pian)，按(an)鈕(niu)，已經(jing)控件(jian)(jian)之間的層級關系，綁定事件(jian)(jian)等。但是呢(ni)，在.wxml里面(mian)不能(neng)設(she)置圖片(pian)的大小，圓(yuan)角，位置。這(zhe)時候(hou).wsxx的作用就體現出來(lai)了，.wxss主要是用來(lai)描述.wxml組件(jian)(jian)的樣式。

舉個例子：在App 中(zhong)應(ying)用廣泛的UITableView在小程序中(zhong)是怎么實現的

       小(xiao)程序(xu)提供(gong)了很多(duo)UI組(zu)件(jian)，基本可以滿足大部分界面需求。這些組(zu)件(jian)基本都(dou)能(neng)在(zai)iOS中(zhong)(zhong)找到相對(dui)應的(de)(de)。在(zai)小(xiao)程序(xu)中(zhong)(zhong)這些組(zu)件(jian)是(shi)有(you)(you)一些共同屬性，同時(shi)每個(ge)組(zu)件(jian)又有(you)(you)自己一些獨有(you)(you)的(de)(de)屬性。跟在(zai)iOS 中(zhong)(zhong)很多(duo)UI控件(jian)都(dou)繼(ji)承同一個(ge)大類(lei)UIView是(shi)一樣的(de)(de)道理(li)的(de)(de)。

 

4.動畫

canvas：畫布。這是要單(dan)獨拿出來講，動畫這個(ge)東西(xi)呢，真是一言難盡(jin)，水(shui)太深(shen)，有(you)點淌(tang)不動。iOS 動畫框架Core Animation 功能也是很(hen)龐大，有(you)興趣可以看《iOS Core Animation: Advanced Techniques》

5.消息通知

       小程序消息通知并沒有實踐實現過(guo)，只(zhi)能(neng)是看(kan)著文檔來(lai)瞎猜(cai)了。先看(kan)下iOS客戶端關于(yu)push消息通知的(de)實現。

iOS ：主要(yao)是(shi)devToken,Provider,APNs這三(san)者之(zhi)間(jian)的交互。App向(xiang)(xiang)注(zhu)冊通知(zhi)之(zhi)后系統會(hui)返回一個devToken，然后將這個devToken上(shang)傳服務器Provider。Provider將要(yao)發(fa)送(song)給(gei)用戶(hu)的消息和devToken發(fa)送(song)給(gei)APNs，最(zui)后由(you)APNs向(xiang)(xiang)用戶(hu)設備發(fa)送(song)通知(zhi)消息（iOS 10 新增了Notification Extension的擴展，使得Local Notification和Remote Notification都(dou)變得非(fei)常豐富。）

 小程序：小程序這邊并不能像App那樣發送通知，但是提供了另一種通知方式-模板(ban)消息。這邊使用(yong)AppID 和(he) AppSecret 注冊獲(huo)(huo)取access_token。這個access_token是通過中控服(fu)務器(qi)來獲(huo)(huo)取和(he)刷新。所以我想把access_token看作devToken,中控服(fu)務器(qi)就是Provider,微信下發模板(ban)消息的服(fu)務器(qi)就是APNs。

小結：devToken是(shi)(shi)客戶端獲(huo)取上傳(chuan)到Provider服(fu)務器(qi)，這邊access_token是(shi)(shi)中控(kong)服(fu)務器(qi)來維護。還有(you)小程序中模(mo)板消(xiao)息(xi)的(de)發起方還是(shi)(shi)要(yao)求證一下，跟微信服(fu)務器(qi)交互的(de)是(shi)(shi)中控(kong)服(fu)務器(qi)還是(shi)(shi)小程序本(ben)身？具體(ti)模(mo)板消(xiao)息(xi)參(can)數設置官(guan)方文檔。

6.支付

        第三方支(zhi)付(fu)接(jie)(jie)(jie)入客(ke)戶端都(dou)沒有接(jie)(jie)(jie)觸過。但是在微信小(xiao)程(cheng)序里(li)面直接(jie)(jie)(jie)呼起微信支(zhi)付(fu)應該(gai)比較簡單(dan)，小(xiao)程(cheng)序也提供了接(jie)(jie)(jie)口(kou)，去看官方API吧。

7.開發工具

       開發工(gong)具(ju)調試頁面中wxml類似于Reveal界面調試工(gong)具(ju)，可以動態查看和(he)修改應用(yong)程序的(de)界面，對于我這種(zhong)新(xin)(xin)(xin)手(shou)學習和(he)調試CSS各控件的(de)樣式覺得(de)非(fei)常的(de)方便。開發工(gong)具(ju)還在不(bu)(bu)斷(duan)更(geng)新(xin)(xin)(xin)，補充一(yi)些新(xin)(xin)(xin)的(de)功能，更(geng)新(xin)(xin)(xin)API，要(yao)是看到API跟本文有所不(bu)(bu)同請(qing)以官方API文檔為準，寫這篇文章(zhang)的(de)時(shi)候官方又(you)有新(xin)(xin)(xin)的(de)更(geng)新(xin)(xin)(xin)....我需要(yao)一(yi)個全(quan)局搜索功能。

8.總結

       小(xiao)(xiao)(xiao)程序是(shi)個(ge)小(xiao)(xiao)(xiao)而美的(de)(de)東西，某些方(fang)面(mian)可以渲染的(de)(de)跟(gen)native一樣，也提供(gong)了消息通知和本地存儲的(de)(de)能力，完全(quan)可以替代(dai)一些對native要求不是(shi)很(hen)高的(de)(de)App。但從微信(xin)限定的(de)(de)10M內存，頁(ye)面(mian)層級不能超(chao)過5層來說，小(xiao)(xiao)(xiao)程序也不適合太過深(shen)度的(de)(de)用戶體驗。