截止目(mu)前(qian)為止，自(zi)己開發(fa)過不下十款小程序(xu)。算(suan)是(shi)有(you)些經驗，其實對于一(yi)(yi)個熟(shu)悉(xi)了前(qian)端開發(fa)的(de)工(gong)(gong)程師(shi)，小程序(xu)的(de)入門會非常(chang)簡單，無非是(shi)要多熟(shu)悉(xi)些API和小程序(xu)的(de)開發(fa)工(gong)(gong)具。本質上和寫一(yi)(yi)個H5頁面沒有(you)什么區別。

抽象化

做的(de)越多，就(jiu)越覺得其實每個小(xiao)程序都(dou)差不(bu)多。慢慢的(de)就(jiu)能夠(gou)抽出一些通用(yong)的(de)代(dai)碼(ma)，作為(wei)公用(yong)模塊。但是(shi)小(xiao)程序的(de)一個限(xian)制就(jiu)是(shi)，代(dai)碼(ma)必須在項目(mu)的(de)根目(mu)錄(lu)(lu)下。這個是(shi)由于(yu)小(xiao)程序框架的(de)限(xian)制，如果在根目(mu)錄(lu)(lu)之外，require模塊的(de)時候，會找不(bu)到對應的(de)文件，因為(wei)路徑會解析失敗(bai)。

這樣帶(dai)來的(de)(de)問題就(jiu)是，需要借(jie)助其他方法(fa)來做到模塊(kuai)(kuai)甚至(zhi)頁面的(de)(de)復用。A、B兩人獨(du)自開(kai)發(fa)一個項(xiang)目，A、B共用的(de)(de)模塊(kuai)(kuai)C。兩個人開(kai)發(fa)還好，如(ru)果有四(si)五個人，項(xiang)目也很多，各自拷貝C模塊(kuai)(kuai)就(jiu)違背了軟件開(kai)發(fa)的(de)(de)DRY原則(ze)。C模塊(kuai)(kuai)的(de)(de)迭代(dai)會導致代(dai)碼管理很混亂(luan)。因此需要設計合理的(de)(de)框架來滿足開(kai)發(fa)需求。

按照(zhao)流行的(de)套路，把生(sheng)產環境與發(fa)布環境隔離。我(wo)們需要(yao)新開辟一(yi)個空間，專門在這個地(di)方寫代碼，然后(hou)需要(yao)用到的(de)公(gong)共組(zu)件都從同一(yi)個地(di)方取，并且生(sheng)成最(zui)終可(ke)以在小程(cheng)序(xu)上運行的(de)代碼。這樣，對(dui)于公(gong)共組(zu)件，我(wo)們就可(ke)以只用維護一(yi)份(fen)代碼。

 

實現

具體實現起來會遇到一下幾個問題

 

1、require路徑解析問題。

common目錄下的(de)代(dai)碼最終(zhong)會(hui)構(gou)建到每個項(xiang)目中，如App1/common。App1/pages/index/index.js 需要依賴common目錄下的(de)模(mo)塊，就需要寫(xie)(xie)很長的(de)相(xiang)對路(lu)徑(jing)（小程序(xu)只支(zhi)持相(xiang)對路(lu)徑(jing)）。所以(yi)我們建立一個規則(ze)，凡是依賴common目錄下的(de)模(mo)塊，就直接(jie)寫(xie)(xie)common/xxx.js，由構(gou)建工具來(lai)解析路(lu)徑(jing)。

2、組件依賴問題

組件之間的(de)依賴用(yong)相(xiang)對路徑

3、wxml與wxss的同步問題

由(you)于小程序(xu)不像vue一樣，三個文(wen)件(jian)整合在一起，而是分開了。但使用(yong)組件(jian)的時(shi)候，需要將這三部分分別require/import一次，顯(xian)得有(you)(you)(you)點(dian)繁瑣，尤其是依賴的組件(jian)有(you)(you)(you)點(dian)多的時(shi)候。依賴構建工具，一旦發現(xian)組件(jian)下有(you)(you)(you)wxml與wxss文(wen)件(jian)則自動(dong)同步(bu)到項目下，并且在項目的wxml注入(ru)相應(ying)的依賴。

4、頁面級的復用

調用組件的方式還是太繁瑣，有時候我們(men)需要直(zhi)接(jie)復用頁(ye)面。直(zhi)接(jie)從common目錄下(xia)拷貝一個頁(ye)面到(dao)項目中，并自動在(zai)app.json插入配置。

{
  "pages":[
    "pages/index/index",
    "pages/common/common" // auto insert
  ]
}