當(dāng)前端在談?wù)撐⑿判〕绦虻臅r候,iOS 開發(fā)在談?wù)撌裁础?/p>
本職是iOS 移動開發(fā)的,最近研究了一下比較火的微信小程序。前端0基礎(chǔ),研究也不是很透徹,所以大家一定要保持懷疑的態(tài)度看這一篇分享。由于是本職是iOS開發(fā)所以在開發(fā)小程序的時候也會按照之前iOS開發(fā)的一點點經(jīng)驗來搭建小程序。所以主要是從幾個應(yīng)用框架層來比較說明一下iOS 和 微信小程序之間的異同點。理論基礎(chǔ)來自官方文檔再加上自己一點點實踐(從圖可以看出這渲染跟原生App很相像了)
網(wǎng)絡(luò)層:這是必要的基礎(chǔ)建設(shè)。
iOS :蘋果規(guī)定從2017年1月起App內(nèi)的網(wǎng)絡(luò)鏈接強制使用HTTPS協(xié)議的,iOS 可以設(shè)置網(wǎng)絡(luò)請求數(shù)的。通過參數(shù)maxConcurrentOperationCount 來設(shè)置請求數(shù),但是也不是任意設(shè)置的,在2G網(wǎng)絡(luò)一次只能維持1個鏈接,3G是2個,在WiFi和4G網(wǎng)絡(luò)環(huán)境下是不限鏈接數(shù)的,這里說明下并不是并發(fā)鏈接數(shù)越多越好,越多占用帶寬越高,請求時間反而會延遲。
所以這里對小程序同時有5個網(wǎng)絡(luò)請求有點疑惑,是否不區(qū)分網(wǎng)絡(luò)?
這里數(shù)據(jù)回調(diào)處理比較類似。(小程序有點類似block)
小程序:為每一個小程序提供了10M的緩存,用來存儲數(shù)據(jù)和文件,現(xiàn)在是內(nèi)測階段,不知道以后會不會擴容。
數(shù)據(jù):看官方的API目前只支持”key-data”的簡單鍵值存儲以及set/get/remove/clear數(shù)據(jù)操作,還不支持?jǐn)?shù)據(jù)庫。
文件:在文件存儲方面,小程序是默認(rèn)都是臨時路徑,本次程序運行期間可以正常讀取,退出程序后就刪除。所以如果要持久存儲,需要再調(diào)用wx.saveFile放到本地存儲,下次打開程序還能正常訪問到。
iOS:為每一個App創(chuàng)建一個沙盒,沙河有3個文件夾Document/Library/tmp,根據(jù)這個文件夾的命名大概就可以猜出它們不同用途。iOS 這邊存儲方案就種類繁多,品種豐富。Core Data、SQLite、NSUserDefaul、keychain、plist、archive根據(jù)自己的需求選取數(shù)據(jù)存儲方案。這里只是簡單說明一下iOS 持久化存儲,其實它是非常龐大的一個點,iOS是一個小型的操作系統(tǒng),存儲和文件操作是有一套完整的方案。
在小程序中一個完整的頁面page是由.js/.json/.wxml/.wxss這四個文件組成,每個界面.js .wxml是必選項其它兩項選填。iOS并沒有這樣的強制規(guī)定,一個界面可以完全在一個UIViewController里面完成,復(fù)雜的頁面iOS也是可以通過類似的文件拆分使得結(jié)構(gòu)更加清晰明了。
iOS中一個完整界面可以只有一個UIViewController,在UIViewController中實現(xiàn)了頁面的大部分邏輯代碼,在可讀性可以規(guī)范一下頁面的代碼布局,屬性初始化,生命周期函數(shù),回調(diào)函數(shù),事件處理,自定義方法等。代碼結(jié)構(gòu)布局大概是這樣子,但是也不一定所有的UIViewController都要有。同樣小程序中也有同樣結(jié)構(gòu)數(shù)據(jù),生命周期,控件綁定事件,自定義方法。這樣可以提高代碼的可維護(hù)性和可讀性。畢竟小程序還沒有 control + 6這樣的快捷鍵。
看到上面對比,發(fā)現(xiàn)兩者還是很相似的,這樣對比看還是有助我們了解小程序。簡單看生命周期函數(shù),是不是很眼熟,很熟悉,很親切.....
在.json文件中可以配置導(dǎo)航欄的樣式,tarBar的配置,刷新控件,網(wǎng)絡(luò)超時時間等。一個小程序只有一個總的app.json公共配置,其它的page也有.json文件但是只能配置導(dǎo)航欄的樣式,其它都繼承app.json里面的公共配置。很重要的一點就是你創(chuàng)建所有的.js的文件都需要添加到app.json中。不添加編譯器也不會報錯,但是你會發(fā)現(xiàn)跳轉(zhuǎn)到某個頁面一直不成功一直顯示不出來,這個時候就要檢查一下有沒有在app.json中添加改文件了。
這個.wxml可以想象成在UIViewController里面放一些控件,比如這個頁面有多少圖片,按鈕,已經(jīng)控件之間的層級關(guān)系,綁定事件等。但是呢,在.wxml里面不能設(shè)置圖片的大小,圓角,位置。這時候.wsxx的作用就體現(xiàn)出來了,.wxss主要是用來描述.wxml組件的樣式。
舉個例子:在App 中應(yīng)用廣泛的UITableView在小程序中是怎么實現(xiàn)的
小程序提供了很多UI組件,基本可以滿足大部分界面需求。這些組件基本都能在iOS中找到相對應(yīng)的。在小程序中這些組件是有一些共同屬性,同時每個組件又有自己一些獨有的屬性。跟在iOS 中很多UI控件都繼承同一個大類UIView是一樣的道理的。
canvas:畫布。這是要單獨拿出來講,動畫這個東西呢,真是一言難盡,水太深,有點淌不動。iOS 動畫框架Core Animation 功能也是很龐大,有興趣可以看《iOS Core Animation: Advanced Techniques》
小程序消息通知并沒有實踐實現(xiàn)過,只能是看著文檔來瞎猜了。先看下iOS客戶端關(guān)于push消息通知的實現(xiàn)。
iOS :主要是devToken,Provider,APNs這三者之間的交互。App向注冊通知之后系統(tǒng)會返回一個devToken,然后將這個devToken上傳服務(wù)器Provider。Provider將要發(fā)送給用戶的消息和devToken發(fā)送給APNs,最后由APNs向用戶設(shè)備發(fā)送通知消息(iOS 10 新增了Notification Extension的擴展,使得Local Notification和Remote Notification都變得非常豐富。)
小程序:小程序這邊并不能像App那樣發(fā)送通知,但是提供了另一種通知方式-模板消息。這邊使用AppID 和 AppSecret 注冊獲取access_token。這個access_token是通過中控服務(wù)器來獲取和刷新。所以我想把access_token看作devToken,中控服務(wù)器就是Provider,微信下發(fā)模板消息的服務(wù)器就是APNs。
第三方支付接入客戶端都沒有接觸過。但是在微信小程序里面直接呼起微信支付應(yīng)該比較簡單,小程序也提供了接口,去看官方API吧。
開發(fā)工具調(diào)試頁面中wxml類似于Reveal界面調(diào)試工具,可以動態(tài)查看和修改應(yīng)用程序的界面,對于我這種新手學(xué)習(xí)和調(diào)試CSS各控件的樣式覺得非常的方便。開發(fā)工具還在不斷更新,補充一些新的功能,更新API,要是看到API跟本文有所不同請以官方API文檔為準(zhǔn),寫這篇文章的時候官方又有新的更新....
小程序是個小而美的東西,某些方面可以渲染的跟native一樣,也提供了消息通知和本地存儲的能力,完全可以替代一些對native要求不是很高的App。但從微信限定的10M內(nèi)存,頁面層級不能超過5層來說,小程序也不適合太過深度的用戶體驗。