本章主要描述此項目的結(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ī)锌云,安裝后就可以使用了荠医。