聯系我們(men) 服務熱線0951-5155303 客服熱線0951-5155292
當前位置：主頁 > 網絡知識 > 微信開發知識 > 正文

如何快速又高效地(dì)編寫微(wēi)信小(xiǎo子生)程序？

2017-05-19 22:29:29

       &nbs票村p;廣州小(xiǎo)程序開發正在互聯覺得，微(wēi)信小(xiǎo)朋關程序是一個工(gōng)程，就和蓋房子(zi)一樣，打好(快拿hǎo)了地(dì)基，才能保證後續工(放什gōng)程師(shī)建立在可靠牢固的基礎話空上。


        微(wēi)信小(xiǎo)程序開發者需房學要經常新(xīn)建項目，每次都要重複“修哥日改項目結構 -> 從老項目中(zhōng)複笑樹制粘貼文件 -> 删除一些老項目中(zhōng)代碼對妹”這樣的過程，實在是…費心費力。另一個痛點是：每次新(xīn)建小(xi從路ǎo)程序頁面要生成三個文件名相同的文件 ( .wxml、報離.wxss 和 .js )，命令行太長（據微(wēi)信同事：也可以到這在 app.json 的 pages 輛知;字段下添加新(xīn)頁面的路徑，保存後也會生成對應的文南讀件）。



        目标

        我們(men)現在有兩個目标：

       吧綠 1、根據通用模闆新(xīn)建項目

        2、一鍵新(xīn)建頁面目錄以及在目錄金靜中(zhōng)的三個文件 ：.wxml、 聽靜.wxss 和 .js也可以直接在 app線愛.json 的 pages 字段創建頁面，保存後生成這房街三個文件。筆(bǐ)者沒有采用這個方法的緣由一個是開始時不(bù)知中新道有此功能，另一個是不(bù)合平時的操作北少(zuò)習慣，再者想到 js 文件初始化後，需要引入常用庫，要制他插入代碼片段，所以保留了這個功能。

       &東木nbsp;這兩個需求其實很簡單，不(bù)需要 GU信刀I，所以我們(men)可以做一個 npm身西 命令行工(gōng)具。想象一下這個命令行用起來(lái)應該是什麼樣的呢：些媽

      文唱  ~ npminstallwxapp -g ~ wxapp -i myapp 兵外&& cd myapp ~ wxapp -場民plist

        用流程圖示意就是：

北京網站建設資訊 - 如何高效編寫微(wēi)信小(xiǎo)程序？ - (1)

      &n他作bsp; 實現

       &n腦友bsp;正式開始之前，請先确認本地(dì)的開發環境，開發者的本地(dì)環境空物是：

        ~npm-v3.10.10~node-vv6.9.4筆們

       &nbs黃嗎p;我們(men)把問題分解為三步：

        1、實現命令行工(gōng)具，可以在任習會意目錄直接運行

     頻內   2、通過輸入不(bù)同的命令行參數，以執行不(bù書他)同的功能

       &nbs子現p;3、考慮項目模闆的存放位置，是集成到工(gōng)具中(z話錢hōng)，還是和工(gōng)具分開呢

       &n樹窗bsp;不(bù)用擔心，都很容易解決，我們(me草秒n)一個個看(kàn)。

        命令行工(gōng)具

      &n問紙bsp; package.json 中(zhōng)有一個字段是 bin：

        { ..."bin": {"mywxap如朋p":"./index.js"} }
        這個字段可以将開發者希望執行的腳本注冊到環境變量 (PA土道TH) 中(zhōng)，不(bù)同的 key 刀紅對應執行不(bù)同的腳本。也就是說現在，當我們(men)直接在命令行中(zh她雜ōng)執行：
        ~ mywxapp

      &nbs市火p; 等價于在 terminal 中(zhōng)執行：

     在從   ~/path/to/index.js


      


      &n這不bsp; 執行 index.js 時，可以通過&n土拿bsp;process.argv 文還;獲取執行時的參數，但是要從參數數組中(z中這hōng)拆分出參數無疑很麻煩。不(bù這雪)過，npm 發展至今，處理命令行參數的庫肯定存亮音在，就是commander。簡單好(hǎo)用易上手，那麼第二個問題也解決啦。些還



      &聽舊nbsp; 項目模闆的存放位置

       海話 考慮項目模闆的存放位置，是集成到工(gōng)具中(zh花下ōng)，還是和工(gōng)具分開呢？


        村資;開發者選擇分開管理。 在一個單獨的離她模闆代碼倉庫中(zhōng)管理模闆内容，方便我水就們(men)維護。目前的模闆還比較簡單（詳見下文“他短模闆詳解”），隻有标準目錄結構，預期後面會加上自動(dòng)化的部分（時村比如 less -> wxss），所以未來(lái)會改動快對(dòng)比較頻繁。


      &nb做海sp; download-git-repo 可以把給定地(dì)址的倉庫内容拷貝到執行目錄中(zh得坐ōng)。API 簡單，所以就是它了。


     靜說   問題都解決了，現在就讓我們(men)看(kàn)劇靜看(kàn)僞代碼（注意：僞碼中(zhōn我影g)沒有考慮出錯情況）：

const mkdirp = require(\'mkdirp\'); c路歌onst download = require(\'downloa什是d-git-repo\'); // 創建項目functioni美商nitProj(projName){if(currentDir.exs森飛its(projName)) console.warn(projName 事黑\'項目已經存在于當前目錄中(zhōng)，請使用别的名字\')學商;elsedownload(\'path/to/tmpl\', cu拍火rrentDir \'/\'projName); }多討 // 注冊頁面functionregisterPage(pagesName)車能 { // 讀配置文件readFile(configFile,f線湖unction(data){ // 将新(xīn)建的所有頁面都寫入配置市南文件中(zhōng)for(nameinp白姐agesName){ data.pages.pu又為sh(\'pages/\'name \'/\'name);議事 } writeFile(configFile); }); } 樂劇// 創建頁面functioncreatePage(pages) {fo器腦r(var indexinpages) { var pag子內e = pages[index]; mkdirp(pagePath,明見function(){ createFil了湖e(page \'.wxml\'); createFile街錢(page \'.wxss\'); createFile(page \'.唱說js\'); }) } // 将頁面注冊到 app.json 中(兵志zhōng) registerPage(pages)風生; }



       章議 使用

       計舞; 在編寫好(hǎo)了這個工(gōng)具之後，民吧隻需要在本地(dì)全局使用的話：

      &n我友bsp; npminstall -g

     山吃   在本地(dì)開發過程中(zhōng)，如果更新(xīn兒看)了開發版本的代碼，需要更新(xīn)同步到全制唱局，這時候需要執行：

       &nbs拿劇p;npmlink


        日冷;就會看(kàn)到安裝到環境變量中(zhōng)的工很刀(gōng)具目錄地(dì)址已經和開發目錄關聯起來(lá飛男i)了：

~/Documents/kmokidd/cli-build$npmlink多音/usr/local/bin/wxapp -> /東笑usr/local/lib/node_modules/@km高報okidd/wxapp-generator/見開index.js/usr/local/bin/no科一de_modules/@kmokidd/wxapp-和科generator -> /User見的s/kmokidd/Documents/kmokidd/cli-build會麗/index.js



       &nb了能sp;使用起來(lái)是這樣的：




       &n大廠bsp;發布 NPM 插件

       答妹 如果和筆(bǐ)者一樣，希望在多個機(jī)器上使用這吧對個工(gōng)具，可以選擇發布到 npm 外廠官網上。發布步驟非常簡單，基本上就是：

      &nbs近鄉p; npmloginnpmpublish

        不(bù)過廣州微(wēi)信小(xiǎo)程序開發正在互聯考慮到，放紙項目模闆畢竟是因人而異的東西(xī)，所一輛以選擇了發布 scope package，也就是在插件的 pa水快ckage.json 中(zhōng)的民腦 name 字段使用 @scopeN國間ame/wxapp-generator 這樣得個的值。

      &nb動火sp; 如果你(nǐ)也有類似的想法，并且也是個喝區 npm 免費用戶，那麼發布的時候要執行：

      我車  npmpublish --access public

       了信; scope 對使用沒有任何影(yǐng)響，但是安裝的時候要記得帶上 sc湖現ope name 執行：

        npminstall@scopeName/wxapp-g哥唱enerator-g

        冷校模闆詳解

        一千個人中(zhōng)有一千種項目模闆。根據業務/個人愛好(hǎo)請制不(bù)同，大家的項目模闆可能也相去甚遠。筆(bǐ)者自覺目前的模闆用起來(自志lái)還不(bù)錯，将在這一節介紹一下。坐玩以下是項目的文件結構：

        wxapp ├── app.js ├── app.json 雜件├── app.wxss ├──base-styles/ ├── im姐也ages/ ├── pages/ │ ├──了媽 tmpl/ ├── utils / │ ├── view.學麗js │ ├── util.js │ ├為熱── polyfiil.js └── └── Deferred.js

        之所以采用這樣的結構，是希望盡可能解耦 UI 邏輯與業務邏輯。但是由員短于完全解耦是不(bù)可能的，基本思路是單純的“變量分離廠市”。通常 UI 的改變是通過 class 的切對放換或者内聯樣式的調整，所以筆(bǐ)者的思路，是将“要理一切換的 class”或者“要調整的内聯樣式”作(zuò)為變量，由于大部分情況懂拍下業務邏輯和 UI 變化是聯動(dòng)的，通過抽離出來(如頻lái)的變量，實現在業務邏輯中(zhōng)簡單直白議學地(dì)改變 UI。


       &nb內可sp;可能看(kàn)到這裡(lǐ)，讀者會有些困惑，那讓我老店們(men)直接以「企鵝聽(tīng)書」為例，具象地(dì)看(kàn)看(機來kàn)筆(bǐ)者是怎麼做的吧。聽(tīn日鐵g)書的界面會出現變化的時以下兩種場景：

        1、一共有兩種播放器：minibar 和 全屏的播放器，播放輛湖器的播放按鈕有“播放”和“暫停”兩種狀态（圖片）切換，這個車對可以通過 class 來(lái)控制。

       &nb朋路sp;2、當播放器進入全屏模式後，節目列表将被隐藏；點擊箭頭以後，節目列表照就将重新(xīn)顯示出來(lái)。


      購麗  上文的文件結構中(zhōng)的 view.js 就是 UI 師風邏輯的代碼。pages/ 目錄中(zhōng)的 js坐樂 文件将通過import 引用 view.js，view.js 中(放火zhōng)的接口分為“通用”和“頁面使用”這兩個類型：

module.exports = { // 通用 general: { hid了麗e: \'hide\', // 變量分離在此 sh劇弟ow: \'show\'}, // 播放器頁面 playerView : 就近{ class: { listItemPlayi對喝ng: \'playing\'} } // 其他頁面如果也有需要，以頁面為單雪子位添加... }


        如果未來(lái)出現更多 UI 變化的場景，可以再通過變量添加上去，師電比如 pageView.id。

       讀我 舉個超級簡單的例子(zi)（如下），模拟工(gōng)作(z很學uò)流程：

北京網站建設資訊 - 如何高效編寫微(wēi)信小(xiǎo)程序？ - (3)

  1. 在 wxss 中(zhōng)定義好(hǎo)控制不(bù)同樣式的&nb兵自sp;class
  2. 将需要變化的 class 寫到 view.拍不js 中(zhōng)，并暴露接口
  3. 在 wxml 中(zhōng)的對應結構中(zhōng)器國綁定 event handler
  4. 在對應的 page.js 裡(lǐ)實現 ev議樹ent handler 的具體(tǐ)讀錢内容，也就是切換 class 的觸發條件


       數花 老司機(jī)一看(kàn)就知道是 MVVC 模式，這樣兒錢分離也就是為了 UI 有獨立的控制器，不(bù)至于和業務邏輯耦喝睡合嚴重，在頁面開發的階段就可以完成 UI 上的變化。從這個角度上看銀也(kàn)，小(xiǎo)程序反而能給 UI 工(gōng)程師(s錯海hī)更多控制 UI 邏輯的能力，确定好(hǎo)放家代碼規範和接口。

        總結

       &nbs請師p;初始化一個項目是開始編碼的第一步，值得多花一些時間(jiān)找到合适團隊合用舞适自己的項目模闆。

推薦閱讀

現在開始您的品牌之旅

  • 銀川總公司

    0951-5155303

在線留言

售前 售後 建議 應聘