開發 | 掌握這 7 個要點,iOS 開發者也能快速入門小程式

ADVERTISEMENT

文 | Lefe

對於一名 iOS 開發者來說,微信小程式的出現,會讓我們感覺到些許的不安。

但接觸一段時間後,我發現,其實並不是想象中的那樣。

微信小程式不可能替代原生 app,也沒有絕對的優勢戰勝原生 app。

不過,

微信小程式固然有它的好處,比如我們需要用到的那些不常用的服務。對於小企業來說,小程式可以讓他們更便捷地宣傳他們的服務,或是給顧客一個更好的線下體驗。

那麼對於一個 iOS 開發的成員來說,開發小程式會有哪些挑戰呢?

回顧 iOS 開發過程

最基本的 iOS 開發,大致會有以下流程:

開發工具,Xcode

UI 層,頁面的搭建

網路層,基本的網路請求

頁面跳轉及傳值

事件

資料層,快取

小程式開發流程

小程式的開發流程,完全可以按照開發一個原生 app 的流程進行,我也是按照這個流程入門小程式的。

總體感覺沒那麼複雜,隻要你靜下心來仔細的去研究,那對你來說,開發一款微信小程式是很容易的。

1. 開發工具

我們使用 Xcode 進行 iOS 開發,下載直接安裝,新建一個項目,即可執行。

微信小程式使用官方提供的微信 Web 開發者工具,下載安裝後即可建立項目。但建立項目時,需要微信授權登入。

同樣,建立項目的時候微信提供了一個模板,開啟項目即可看到實時預覽的效果。不過這裡有一個比較坑的問題是,

啟動開發者工具時,不能連結 VPN

我建議,開啟微信 Web 開發者工具前,先主動關閉 VPN,等項目啟動後再開啟。

2. 搭建 UI 介面

對於 iOS 開發者來說,UI 佈局可以使用座標(Frame)來直接佈局一個檢視,也可以使用自動佈局。

對於微信小程式開發,建議使用 Flexbox 佈局。這是一種不一樣的佈局方式。

Flexbox 佈局,也叫彈性佈局,是 CSS3 提出的一種佈局解決方案。

ADVERTISEMENT

說到佈局時,必須說明一下 RPX。

RPX 的全稱是 responsive pixel,它是小程式自己定義的一個尺寸單位,可以根據當前裝置螢幕寬度進行自適應。

小程式中規定,所有的裝置螢幕寬度都為 750 rpx,根據裝置螢幕實際寬度的不同,1 rpx 所代表的實際畫素值也不一樣。

關注知曉程式(微訊號 zxcx0101),回覆「rpx」,一篇文章帶你看懂 RPX。

利用 Flexbox,隻需要幾行程式碼就可以搞定下面這樣的佈局。

關於 Flexbox 佈局,這裡不做更多的解釋。有興趣的同學可以找相關資料。

WXML 檔案:

WXSS 檔案:

3. 微信小程式沒有

scroll-view。但它特別好用,

我們隻需要把你建立的檢視新增到標籤中即可,你甚至不需要計運算元檢視的高度。

比如,我們做一個類似這樣的圖文混排的頁面。

對於這個頁面,Obj-C 下會如何實現呢?這一點已經夠 iOS 開發者想半天了。

看看小程式的實現吧,看完後,你絕對有想學小程式的衝動,而且它的流暢度也不亞於原生應用,隻是第一次進入時稍微慢點。

直接上程式碼:

WXML 檔案:

WXSS 檔案:

看到了嗎,就需要這麼幾行程式碼,而且圖片也會自動載入、自動等比縮放。是不是覺得很簡單呢?

通過以上的例子,相信讀者朋友已經大體上明白了 FlexBox 佈局的基本邏輯。

對於 UI 佈局來說,微信小程式的思想值得我們借鑑,主要有以下幾點:

各個檔案分工明確:WXML 負責頁面的佈局,也就是佈局檔案。

ADVERTISEMENT

WXSS 負責每個檢視的樣式,比如字型大小等樣式。

JS 監聽並處理小程式的生命週期函數、聲明全局變數,資料都在這裡。

佈局簡單:建立介面的時候,微信小程式更加簡單,而且會自動適配螢幕。不過,建議使用 RPX 為單位。

系統提供了常用的控製項:系統提供了我們常用的控製項,這樣,搭建介面的時候會省很多事。

既然佈局這麼簡單,iOS 方面會不會也有這中佈局方式?果不其然,我找到了 Yoga。它是 Facebook 實現的一個庫,有興趣的讀者可以研究一下。

4. 網路層

對於 iOS 開發來說,網路層的設計絕對是很重要的一部分,網路層設計的好會直接關係到應用的好壞,還有將來的維護成本。

不過好在,有一些優秀的三方庫,幫我們解決了很多問題,比如 AFNetworking,YTKNetwork 就是基於 AFNetworking 的封裝。

為了降低開發難度,微信小程式已經為我們做了網路層的封裝,但網路訪問必須通過 HTTPS 協議。偵錯環境下,HTTP 協議也可以請求成功,但會有警告。

以下是我寫的一個網路請求:

5. 頁面跳轉及傳值

iOS 中,頁面跳轉常用的函數有

UINavigationController

Modal

形式跳轉。

在小程式當中,我們使用官方提供的介面進行頁面跳轉

wx.navigateTo(OBJECT)

為例來說明。

url

是要跳轉到頁面的路徑,

nam

e

是給下一個頁面傳遞的資料。

這樣做,就如同 iOS 中的

Push

相信有 iOS 的基礎的人,理解這個概念是很容易的。

ADVERTISEMENT

6. 事件

iOS 中,可以為檢視新增一個事件,比如點選事件。而小程式中,也可以給檢視新增事件,而且可以攜帶一些參數。

在這裡,引用微信官方的一段話:

事件是檢視層到邏輯層的通訊方式。

事件可以將使用者的行為反饋到邏輯層進行處理。

事件可以繫結在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。

事件物件可以攜帶額外資訊,如id、dataset、touches。

bindtap

後的

bindMen

u

為檢視繫結的事件名,

data-name

中的

name

為事件傳遞的參數。

我們隻需要在

檔案中實現函數:

這樣就形成了一個繫結,點選事件後直接把資料傳遞到了

.js

檔案中,這樣大大降低了耦合度。

想想看,iOS 中如何實施這樣的實現呢?

7. 資料層、快取

iOS 中,我們可以使用 Sqlite、Realm、NSUserDefault 等,對資料做快取處理。而小程式中,我們使用 Storage 介面,對資料做快取處理。

每個微信小程式都可以有自己的本地快取,可以通過

wx.setStorage

wx.setStorageSync

)、

wx.getStorage

wx.getStorageSync

)、

wx.clearStorage

wx.clearStorageSync

),對本地快取進行設定、獲取和清理。本地快取最大為10MB。

總結

這篇文章,主要是為了幫助讀者瞭解小程式的開發過程。

小程式的開發過程,大體上與 iOS 的開發過程上一致。當然如果你有 RN 或者前端開發經驗,學習小程式會更容易。

那麼移動端開發者,如何學習小程式開發呢?我建議讀者,先學習一下 JavaScript、CSS 和 HTML。

有任何疑問,歡迎在評論區中提出來。

在微信後臺回覆「效率」,獲取讓小程式開發效率提升 100% 的祕籍。

在微信後臺回覆任意關鍵詞,還能獲得相關小程式推薦,趕緊試試吧!

▽ 點選「閱讀原文」,發現更多優質小程式。

» 知曉程式

ADVERTISEMENT