本章主要描述此項目的結(jié)構(gòu)設(shè)計以及在編寫代碼時需要注意的幾個點(diǎn)彤灶。
先從目錄結(jié)構(gòu)說起
其中node_modules文件夾內(nèi)存放的是項目所用到的一些依賴包学搜，通過npm包管理工具安裝柑船。關(guān)于如何使用請參考《使用Node.js和Koa框架實現(xiàn)前后端交互》
service里的WebAppService.js用來請求后臺接口
static目錄存放項目所用到的css、js和圖片
view層存放各種頁面模板
app.js是整個程序的入口文件，編寫了各個頁面的路由地址惹资，同時也是程序的前臺接口
編碼特點(diǎn)：使用ejs模板技術(shù)將頁面拆分成了多個模塊哮兰，某些模塊可以重復(fù)使用毛萌，使頁面代碼結(jié)構(gòu)變的更清晰，更容易理解喝滞。
項目源碼 https://pan.baidu.com/s/1hs9Xngg 密碼: 75ug
源碼已貼上阁将，大家可以拿去研究一下，哪里不清楚可以在留言區(qū)提問右遭，我會認(rèn)真回答做盅。
然后再說一下打包問題缤削，打包我使用的是Hbuider，一款超好用的編輯器吹榴，它可以將WebApp項目打包成Android或IOS的安裝包亭敢。
Hbuider下載 http://www.dcloud.io/
安裝好之后打開Hbuider，選擇【文件】【新建】【移動App】图筹，然后我們只留下unpackage和manifest.json文件帅刀，其他的全部刪除。
雙擊manifest.json文件去配置你的打包程序远剩。
其中應(yīng)用名稱就是手機(jī)上顯示的名稱扣溺，appid點(diǎn)云端獲取自動生成。這里重點(diǎn)說一下頁面入口
頁面入口要填WebAPP站點(diǎn)的外網(wǎng)地址瓜晤，所以我們先要在服務(wù)器上創(chuàng)建一個WebAPP站點(diǎn)锥余，并將項目源碼上傳到服務(wù)器的站點(diǎn)目錄花嘶。端口要和app.js里的端口一致
然后需要在服務(wù)器上安裝nodejs環(huán)境宇色，并通過node app.js命令去啟動服務(wù)。
這樣頁面入口就可以填寫為http://120.25.77.100:8888息堂，然后就是上傳APP的圖標(biāo)和啟動頁圖片足画。
然后添加NativeUI(原生UI控件)和Webview(窗口管理)模塊
Ctrl+S【保存】着绷，然后選擇【發(fā)行】【發(fā)行為原生安裝包】
然后就可以通過點(diǎn)擊手動下載將打好的包下載到本地，再通過QQ發(fā)送到你的手機(jī)锌云，安裝后就可以使用了荠医。
