一般來(lái)說(shuō)，我認(rèn)為小程序是一個(gè)沒(méi)有什么技術(shù)含量的東西，特別是現(xiàn)在有了組件庫(kù)，而且小程序生態(tài)不斷完善的情況下，只要對(duì)著文檔慢慢寫(xiě)就好，就是時(shí)間的問(wèn)題。然后這里也不是教大家怎么去寫(xiě)程序之類(lèi)的，而是本人在經(jīng)歷過(guò)后的一些小建議。

01、 技術(shù)選型

其實(shí)我覺(jué)得技術(shù)選型是非常重要的，直接關(guān)系到你后來(lái)的工作復(fù)雜度。怎么說(shuō)呢？因?yàn)樾〕绦虻拈_(kāi)發(fā)就是一個(gè)注重業(yè)務(wù)邏輯的過(guò)程，它與算法研究類(lèi)的研發(fā)工作不同。小程序的質(zhì)量高不高，用戶體驗(yàn)好不好完全取決于你的頁(yè)面設(shè)計(jì)，頁(yè)面的交互。

所以我覺(jué)得在選型的過(guò)程中有幾個(gè)特別值得注意的：

組件庫(kù)支持

可以說(shuō)組件就是整個(gè)程序的重要部分，因?yàn)榧偃缒?nbsp;自己寫(xiě)的話肯定會(huì)花費(fèi)大量的時(shí)間 ，即使你已經(jīng)寫(xiě)出來(lái)了可能也就是自己能用，兼容性也會(huì)有問(wèn)題。所以關(guān)于組件的開(kāi)發(fā)就 不推薦自己造輪子 了，我們還沒(méi)有這樣的時(shí)間和精力。

但是我們也不能隨便去選擇一個(gè)組件庫(kù)，我們必須要 根據(jù)小程序的頁(yè)面設(shè)計(jì) ，詳細(xì)列出里面所有的元素到底是采用何種方法/組件實(shí)現(xiàn)的，你 選擇的組件庫(kù)是否所有都滿足 。還有一個(gè)重要的是，組件庫(kù)的 社區(qū)反饋 如何，有沒(méi)有很多不可避免的BUG在里面。

這一點(diǎn)自己也深有體會(huì)，因?yàn)榻M件的兼容性問(wèn)題，自己往往會(huì)花費(fèi)幾天時(shí)間來(lái)做 兼容和適配 。現(xiàn)在我是選擇了 mpvue+vant 的形式來(lái)寫(xiě)的。設(shè)計(jì)圖上面的navbar是自定義而且是固定頂部的，一開(kāi)始也沒(méi)有怎么注意，覺(jué)得沒(méi)有問(wèn)題。但是，在我切換不同的機(jī)型的時(shí)候問(wèn)題就出來(lái)了，各種對(duì)不齊的情況接踵而來(lái)，特別是蘋(píng)果系列的機(jī)型（劉海屏）。

起初我想過(guò)自己去適配一下，但是發(fā)現(xiàn)頭發(fā)一直掉，應(yīng)該在提醒我不能這么搞了。后面就在github找到了一個(gè)可以適配的navbar組件，解決了我的問(wèn)題。也從側(cè)面說(shuō)明不能自己造輪子。

框架生態(tài)

因?yàn)樽罱K還是要編譯成官方的小程序格式，難免會(huì)有一些問(wèn)題。所以我們選擇一個(gè)小程序框架的時(shí)候也要考慮到這個(gè)問(wèn)題，看 它與官方的區(qū)別 在哪，有哪一些是不支持的，看一下 社區(qū)對(duì)它的評(píng)價(jià)如何 。

基本上我們 選擇一些用戶反饋比較積極 的就好， 不要選一些新興的框架 ，因?yàn)橥彩强颖容^多，而且你有時(shí)候發(fā)郵件問(wèn)他們幾個(gè)世紀(jì)都不回你的。如何選擇一個(gè)比較好的框架呢？可以看文章的最后github倉(cāng)庫(kù)，里面有很多關(guān)于小程序的資料，也有一些框架的排名和組件庫(kù)選擇。

框架語(yǔ)法

語(yǔ)法部分還不是最主要的，因?yàn)?nbsp;前端的語(yǔ)法 都一樣，那我說(shuō)這個(gè)的目的其實(shí)是說(shuō)小程序的開(kāi)發(fā)語(yǔ)法與官方的語(yǔ)法有 哪些不兼容 的，要注意一下，一般文檔都會(huì)給出來(lái)的。

目前小程序的開(kāi)發(fā)都可以使用vue語(yǔ)法來(lái)編寫(xiě)，可以說(shuō)是非常方便了，但是如果你不熟悉 小程序的生命周期 與 vue的生命周期就 可能會(huì)有一些問(wèn)題。我遇到的問(wèn)題就是怎么合理使用生命周期函數(shù)。有時(shí)候你的程序可能會(huì)報(bào)一些奇怪的錯(cuò)誤， 比如提示圖片加載失敗，然后圖片又顯示正常 。其實(shí)這就是頁(yè)面渲染的時(shí)候還沒(méi)有識(shí)別到圖片的原因，是后面加載的，這就是先后的問(wèn)題。

02 、開(kāi)發(fā)步驟

前期就是一些架構(gòu)設(shè)計(jì)以及技術(shù)選型的內(nèi)容，前期的選擇尤為重要，技術(shù)選型好，后面你會(huì)節(jié)省很多時(shí)間和工作量。

代碼結(jié)構(gòu)設(shè)計(jì)

開(kāi)發(fā)步驟也要設(shè)計(jì)，你要規(guī)劃一些目錄結(jié)構(gòu)，比如存放 組件的 、 圖片的 、 工具類(lèi)函數(shù)的 、 頁(yè)面類(lèi) 的等。雖然說(shuō)我們的初始化項(xiàng)目都會(huì)有相應(yīng)的目前結(jié)構(gòu)，但是你也要在它的基礎(chǔ)上進(jìn)行稍微的改造。讓我們的目前更加清晰。

一般來(lái)說(shuō)我們就從我提到的 組件 、 圖片 、 工具 、 頁(yè)面 幾個(gè)步驟出發(fā)。頁(yè)面部分我們基本上不用怎么改，因?yàn)轫?xiàng)目初始化都幫你設(shè)計(jì)好了。組件部分我們就新建一個(gè)組件文件夾，用于存放我們的自定義組件，方便后期的復(fù)用。值得注意的是，我們一定要 寫(xiě)好組件 ，讓我們的 復(fù)用效率更高 ，可以通過(guò) 傳參的形式來(lái)控制組件的形態(tài) 。

關(guān)于圖片的存儲(chǔ)我的建議就是可以 從功能上來(lái)劃分 ，比如tabbar的圖片，navbar的圖片，其他的圖片也是按照自己的功能來(lái)進(jìn)行劃分，這樣就顯得 邏輯結(jié)構(gòu)清晰 ，后續(xù)的 維護(hù) 更加方便容易。

項(xiàng)目的配置

這一方面的話看你的 具體業(yè)務(wù)需求 怎么樣，一般來(lái)說(shuō)我們經(jīng)常都會(huì)調(diào)用 第三方庫(kù)函數(shù)/接口 ，如定位等?，F(xiàn)在我做的這一個(gè)就用到了騰訊地圖的第三方接口，這里就不再詳細(xì)展開(kāi)。

我做的時(shí)候會(huì)出現(xiàn)域名不合法的情況，你需要在 小程序后臺(tái)進(jìn)行域名的配置 ，報(bào)錯(cuò)信息都告訴你怎么配置了，把那個(gè)域名加上去就好。又或者你的后臺(tái)請(qǐng)求接口有錯(cuò)誤的話一般就是你的接口 域名不是https協(xié)議 ，這就有點(diǎn)麻煩了，調(diào)試階段可以在開(kāi)發(fā)者工具的右上角詳情部分， 勾上不檢驗(yàn) 就好。

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

03、小結(jié)

好了，以上就是就本次項(xiàng)目的相關(guān)總結(jié)，但是項(xiàng)目本身還是沒(méi)有完善的，我也是在早期的設(shè)計(jì)上面下了一些功夫，主要還是讓自己在后面的開(kāi)發(fā)過(guò)程中少一些BUG和錯(cuò)誤，方便自己后期的維護(hù)。

其實(shí)業(yè)務(wù)類(lèi)的小程序更要主要組件的開(kāi)發(fā)和設(shè)計(jì)，因?yàn)楹芏囗?yè)面都會(huì)公用一個(gè)組件，假如你是復(fù)制粘貼那也未嘗不可，只是維護(hù)比較難而已。我們做每一個(gè)產(chǎn)品，在必不得已的情況下才會(huì)使用一些技巧性的東西，一般來(lái)說(shuō)都會(huì)做成一個(gè)可伸縮、可維護(hù)的產(chǎn)品，也是對(duì)自己的要求。