iOS開發初探小程序(上)

樓主本人是一枚iOS程序媛,團隊內部分享本人選題是小程序研究,所以以一個iOS開發的視角記錄一下探究歷程,如果有誤,歡迎大佬們評論區指正。

首先附上小程序項目官方搭建步驟:
https://developers.weixin.qq.com/miniprogram/introduction/qcloud.html

搭建項目時所用的賬號可以自己申請一個,使用未開通過其他公號服務的郵箱就能申請了,一個個人賬號目前只能開發一款小程序,開發設置裏配置域名(域名必須要用創建項目時所用的APPID賬號下的域名,也就是說如果你想玩一下某個demo,必須要把demo裏請求的域名添加進你自己的賬號域名設置裏)
這裏寫圖片描述
小程序:上圖是小程序的後臺服務器配置,必須要事先配置好服務器,否則在程序中是無法正常請求的。自己玩的話域名其實可以抓取一個數據源來嘗試一下。一個小程序同時只能有一個 WebSocket連接,並且同時也只能有5個網絡請求連接。請求的服務器地址必須是HTTPS協議的,看了後臺服務器地址配置,上傳和下載文件的服務器也是單獨設置。小程序不支持H5頁面跳轉也不支持cookie。

iOS :蘋果規定從2017年1月起App內的網絡鏈接強制使用HTTPS協議的,iOS 可以設置網絡請求數的。通過參數maxConcurrentOperationCount 來設置請求數,但是也不是任意設置的,在2G網絡一次只能維持1個鏈接,3G是2個,在WiFi和4G網絡環境下是不限鏈接數的,這裏說明下並不是併發鏈接數越多越好,越多佔用帶寬越高,請求時間反而會延遲。

這裏數據回調處理比較類似。(小程序有點類似block)
這裏寫圖片描述

2.本地持久化存儲/數據層
小程序:同一個微信用戶,同一個小程序 storage 上限爲 10MB,用來存儲數據和文件。

數據:看官方的API目前只支持”key-data”的簡單鍵值存儲以及set/get/remove/clear數據操作,還不支持數據庫。

文件:在文件存儲方面,小程序是默認都是臨時路徑,本次程序運行期間可以正常讀取,退出程序後就刪除。所以如果要持久存儲,需要再調用wx.saveFile放到本地存儲,下次打開程序還能正常訪問到。

iOS:爲每一個App創建一個沙盒,沙河有3個文件夾Document/Library/tmp,根據這個文件夾的命名大概就可以猜出它們不同用途。iOS 這邊存儲方案就種類繁多,品種豐富。Core Data、SQLite、NSUserDefaul、keychain、plist、archive根據自己的需求選取數據存儲方案。這裏只是簡單說明一下iOS 持久化存儲,其實它是非常龐大的一個點,iOS是一個小型的操作系統,存儲和文件操作是有一套完整的方案。

3.業務層/UI層
在小程序中一個完整的頁面page是由.js/.json/.wxml/.wxss這四個文件組成,每個界面.js .wxml是必選項其它兩項選填。iOS並沒有這樣的強制規定,一個界面可以完全在一個UIViewController裏面完成,複雜的頁面iOS也是可以通過類似的文件拆分使得結構更加清晰明瞭。

.js:腳本邏輯文件
.js文件類似iOS中的UIViewController,iOS中一個完整界面可以只有一個UIViewController,在UIViewController中實現了頁面的大部分邏輯代碼,頁面的代碼佈局,屬性初始化,生命週期函數,回調函數,事件處理,自定義方法等。小程序中也有同樣結構數據,生命週期,控件綁定事件,自定義方法。這樣可以提高代碼的可維護性和可讀性。
頁面代碼佈局規範

看到上面對比,發現兩者還是很相似的,這樣對比看還是有助我們瞭解小程序。簡單看生命週期函數,是不是很眼熟,大概都是與iOS一一對應的…..
生命週期

.json 配置文件
一個小程序只有一個總的app.json公共配置,在.json文件中可以配置導航欄的樣式,tarBar的配置,刷新控件,網絡超時時間等。其它的page中創建的.json文件只能配置導航欄的樣式,其它都繼承app.json裏面的公共配置(類似iOS的基類)。自定義創建的所有.js的文件頁面都需要添加到app.json中,同時,減少頁面也需要把相對應的文件路徑從 pages 數組裏刪除。不添加編譯器也不會報錯,但是你會發現跳轉到某個頁面一直不成功一直顯示不出來,這個時候就要檢查一下有沒有在app.json中添加該文件了。
另:json文件裏面不能寫註釋
這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述
app.json官方配置文檔:
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

.wxml 頁面結構 wxss 頁面組件樣式
這個.wxml可以想象成在UIViewController裏面放一些控件,比如這個頁面有多少圖片,按鈕,以及控件之間的層級關係,綁定事件等,類似於iOS中的View層。但是呢,在.wxml裏面不能設置圖片的大小,圓角,位置等屬性。這時候.wsxx的作用就體現出來了,.wxss主要是用來描述.wxml組件的樣式。

舉個例子:在App 中應用廣泛的UITableView在小程序中是怎麼實現的
這裏寫圖片描述
小程序實現UITableView

小程序提供了很多UI組件,基本可以滿足大部分界面需求。這些組件基本都能在iOS中找到相對應的。在小程序中這些組件是有一些共同屬性,同時每個組件又有自己一些獨有的屬性。跟在iOS 中很多UI控件都繼承同一個大類UIView是一樣的道理的。
組件列表
附上各個組件的屬性地址:
https://developers.weixin.qq.com/miniprogram/dev/component/
總結
以上是小程序入門篇,有了這些,一個小程序的小框架就出來了,再根據不同的UI組合就能弄一個簡單的demo玩一玩,想要深入開發就得多寫多敲熟能生巧。小程序是個小而美的東西,某些方面可以渲染的跟native一樣,也提供了消息通知和本地存儲的能力,完全可以替代一些對native要求不是很高的App。但從微信限定的10M內存,頁面層級不能超過5層來說,小程序也不適合太過深度的用戶體驗。有空再深入研究,中篇和下篇敬請期待~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章