小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。例如你要蓋房子,如果沒有任何人指導幫助你,你需要一磚一瓦的從地上開始累積,而且還不能夠保證房子是否結實。而此時,框架的作用就好像是有一位建筑設計大師,他告訴你蓋房子首先需要打牢地基,布設承重柱、承重墻,房梁應該建在什么地方,同時還給你把每間屋子的作用規劃好,最后竟然把這些都親手給你實現,而你要做的只是拿著建筑材料去把地基、每一面墻、房頂等需要填補的磚瓦給補上即可。同理,接下來你要學習的小程序框架就幫你從邏輯層和視圖層兩個層面開發小程序,你要做的就是分別開發這兩個層面的代碼即可,其他的交給微信處理。下面跟我一起來搭建開發小程序的框架吧。
搭建小程序框架:舉例
第1章 簡單例子剖析
整個小程序框架系統分為兩部分:邏輯層(App Service)和 視圖層(View)。小程序提供了自己的視圖層描述語言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數據傳輸和事件系統,讓開發者能夠專注于數據與邏輯。
框架的核心是一個響應的數據綁定系統,可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新。通過這個簡單的例子來看:
開發者通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定,所以在頁面一打開的時候會顯示 Hello WeChat!;當點擊按鈕的時候,視圖層會發送 changeName 的事件(什么是事件我們稍后詳解)給邏輯層,邏輯層找到并執行對應的事件處理函數;回調函數(請讀者到公眾號的“教你使用開發工具”部分查看詳解)觸發后,邏輯層執行 setData 的操作,將 data 中的 name 從 WeChat 變為 MINA,因為該數據和視圖層已經綁定了,從而視圖層會自動改變為 Hello MINA!。
通過上邊的例子讀者已經對小程序的開發框架有了初步的了解,下邊再介紹一下框架的其他考慮
1、頁面管理
框架管理了整個小程序的頁面路由,可以做到頁面間的無縫切換,并給以頁面完整的生命周期。開發者需要做的只是將頁面的數據、方法、生命周期函數注冊到框架中,其他的一切復雜的操作都交由框架處理。
2、基礎組件
框架提供了一套基礎的組件,這些組件自帶微信風格的樣式以及特殊的邏輯,開發者可以通過組合基礎組件,創建出強大的微信小程序 。
3、豐富的API
框架提供豐富的微信原生 API,可以方便的使用微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。
搭建小程序框架:場景值
第2章 知曉場景值
這一章我們先來介紹下微信的場景值,場景值用來描述用戶進入小程序的路徑。這里直接拿個實際的例子吧,場景值的意義讀者自己可以體會。
案例分析:
將一個小程序通過“添加到我的小程序”操作,然后從微信聊天窗口下拉打開這個新添加的小程序即可領取優惠券。
這個操作的業務邏輯是首先判斷用戶收藏小程序,然后再給予優惠券獎勵。知道了業務邏輯,這時候你就可以去查詢小程序是否有判斷用戶收藏了小程序的場景值(不過并沒有,只有一個通過微信下拉小程序進入的場景1089),經過分析我們確定了要使用的場景值是1089,即通過判斷用戶是通過微信下來進入小程序即可,然后進入程序獲得優惠券。
代碼部分很簡單,只需要在app.js的onlaunch(onlaunch方法是當小程序加載完畢后就執行的方法)中判斷場景值(記得onlaunch要加options)
options.scene就是對應的場景值邏輯代碼如下:
補充:
官方文檔寫道由于Android系統限制,目前還無法獲取到按 Home 鍵退出到桌面,然后從桌面再次進小程序的場景值,對于這種情況,會保留上一次的場景值。(不過我感覺現在已經解決了,你退回手機桌面之后,在后臺是可以直接再次點擊直接進入小程序的)
(如果有人覺得分享值得,可以在后臺留言,看到后我會繼續更新下去)