小程序開發的一些細節,你有注意嗎?

最近的弄的小程序差不多有點東西了,就來寫一些關於小程序的感悟吧

01 前言

一般來說,我認爲小程序是一個沒有什麼技術含量的東西,特別是現在有了組件庫,而且小程序生態不斷完善的情況下,只要對着文檔慢慢寫就好,就是時間的問題。然後這裏也不是教大家怎麼去寫程序之類的,而是本人在經歷過後的一些小建議。

02 技術選型

其實我覺得技術選型是非常重要的,直接關係到你後來的工作複雜度。怎麼說呢?因爲小程序的開發就是一個注重業務邏輯的過程,它與算法研究類的研發工作不同。小程序的質量高不高,用戶體驗好不好完全取決於你的頁面設計,頁面的交互。

所以我覺得在選型的過程中有幾個特別值得注意的:

  • 組件庫支持
  • 框架生態
  • 框架語法

基本上就是這些,首先來說一下第一個關於組件庫的支持。

組件庫支持

現在的組件庫特別多,基本上是可以滿足我們日常開發的需要,之前我寫了一篇關於《前端人應該掌握的工具》裏面有寫到,大家感興趣的可以去看一下。

可以說組件就是整個程序的重要部分,因爲假如你自己寫的話肯定會花費大量的時間,即使你已經寫出來了可能也就是自己能用,兼容性也會有問題。所以關於組件的開發就不推薦自己造輪子了,我們還沒有這樣的時間和精力。

但是我們也不能隨便去選擇一個組件庫,我們必須要根據小程序的頁面設計,詳細列出裏面所有的元素到底是採用何種方法/組件實現的,你選擇的組件庫是否所有都滿足。還有一個重要的是,組件庫的社區反饋如何,有沒有很多不可避免的BUG在裏面。

這一點自己也深有體會,因爲組件的兼容性問題,自己往往會花費幾天時間來做兼容和適配。現在我是選擇了mpvue+vant的形式來寫的。設計圖上面的navbar是自定義而且是固定頂部的,一開始也沒有怎麼注意,覺得沒有問題。但是,在我切換不同的機型的時候問題就出來了,各種對不齊的情況接踵而來,特別是蘋果系列的機型(劉海屏)。

起初我想過自己去適配一下,但是發現頭髮一直掉,應該在提醒我不能這麼搞了。後面就在github找到了一個可以適配的navbar組件,解決了我的問題。也從側面說明不能自己造輪子。

框架生態

因爲最終還是要編譯成官方的小程序格式,難免會有一些問題。所以我們選擇一個小程序框架的時候也要考慮到這個問題,看它與官方的區別在哪,有哪一些是不支持的,看一下社區對它的評價如何

基本上我們選擇一些用戶反饋比較積極的就好,不要選一些新興的框架,因爲往往也是坑比較多,而且你有時候發郵件問他們幾個世紀都不回你的。如何選擇一個比較好的框架呢?可以看文章的最後github倉庫,裏面有很多關於小程序的資料,也有一些框架的排名和組件庫選擇。

框架語法

語法部分還不是最主要的,因爲前端的語法都一樣,那我說這個的目的其實是說小程序的開發語法與官方的語法有哪些不兼容的,要注意一下,一般文檔都會給出來的。

目前小程序的開發都可以使用vue語法來編寫,可以說是非常方便了,但是如果你不熟悉小程序的生命週期vue的生命週期就可能會有一些問題。我遇到的問題就是怎麼合理使用生命週期函數。有時候你的程序可能會報一些奇怪的錯誤,比如提示圖片加載失敗,然後圖片又顯示正常。其實這就是頁面渲染的時候還沒有識別到圖片的原因,是後面加載的,這就是先後的問題。

03 開發步驟

前期就是一些架構設計以及技術選型的內容,前期的選擇尤爲重要,技術選型好,後面你會節省很多時間和工作量。

代碼結構設計

開發步驟也要設計,你要規劃一些目錄結構,比如存放組件的圖片的工具類函數的頁面類的等。雖然說我們的初始化項目都會有相應的目前結構,但是你也要在它的基礎上進行稍微的改造。讓我們的目前更加清晰。

一般來說我們就從我提到的組件圖片工具頁面幾個步驟出發。頁面部分我們基本上不用怎麼改,因爲項目初始化都幫你設計好了。組件部分我們就新建一個組件文件夾,用於存放我們的自定義組件,方便後期的複用。值得注意的是,我們一定要寫好組件,讓我們的複用效率更高,可以通過傳參的形式來控制組件的形態

關於圖片的存儲我的建議就是可以從功能上來劃分,比如tabbar的圖片,navbar的圖片,其他的圖片也是按照自己的功能來進行劃分,這樣就顯得邏輯結構清晰,後續的維護更加方便容易。

項目的配置

這一方面的話看你的具體業務需求怎麼樣,一般來說我們經常都會調用第三方庫函數/接口,如定位等。現在我做的這一個就用到了騰訊地圖的第三方接口,這裏就不再詳細展開。

我做的時候會出現域名不合法的情況,你需要在小程序後臺進行域名的配置,報錯信息都告訴你怎麼配置了,把那個域名加上去就好。又或者你的後臺請求接口有錯誤的話一般就是你的接口域名不是https協議,這就有點麻煩了,調試階段可以在開發者工具的右上角詳情部分,勾上不檢驗就好。

但是如果你要上線的話就需要有https的服務器放置你的接口了。

04、小結

好了,以上就是就本次項目的相關總結,但是項目本身還是沒有完善的,我也是在早期的設計上面下了一些功夫,主要還是讓自己在後面的開發過程中少一些BUG和錯誤,方便自己後期的維護。

其實業務類的小程序更要主要組件的開發和設計,因爲很多頁面都會公用一個組件,假如你是複製粘貼那也未嘗不可,只是維護比較難而已。我們做每一個產品,在必不得已的情況下才會使用一些技巧性的東西,一般來說都會做成一個可伸縮、可維護的產品,也是對自己的要求。

小程序倉庫:https://github.com/justjavac/awesome-wechat-weapp

本文使用 mdnice 排版

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