第三章【APP項目結(jié)構(gòu)與打包】

本章主要描述此項目的結(jié)構(gòu)設(shè)計以及在編寫代碼時需要注意的幾個點(diǎn)彤灶。

先從目錄結(jié)構(gòu)說起

01.png

其中node_modules文件夾內(nèi)存放的是項目所用到的一些依賴包学搜,通過npm包管理工具安裝柑船。關(guān)于如何使用請參考《使用Node.js和Koa框架實現(xiàn)前后端交互》

service里的WebAppService.js用來請求后臺接口

static目錄存放項目所用到的cssjs和圖片

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】图筹,然后我們只留下unpackagemanifest.json文件帅刀,其他的全部刪除。

app.png

雙擊manifest.json文件去配置你的打包程序远剩。

apps.png

其中應(yīng)用名稱就是手機(jī)上顯示的名稱扣溺,appid點(diǎn)云端獲取自動生成。這里重點(diǎn)說一下頁面入口

頁面入口要填WebAPP站點(diǎn)的外網(wǎng)地址瓜晤,所以我們先要在服務(wù)器上創(chuàng)建一個WebAPP站點(diǎn)锥余,并將項目源碼上傳到服務(wù)器的站點(diǎn)目錄花嘶。端口要和app.js里的端口一致

04.png

然后需要在服務(wù)器上安裝nodejs環(huán)境宇色,并通過node app.js命令去啟動服務(wù)。

ser.png

這樣頁面入口就可以填寫為http://120.25.77.100:8888息堂,然后就是上傳APP的圖標(biāo)和啟動頁圖片足画。

02.png
03.png

然后添加NativeUI(原生UI控件)Webview(窗口管理)模塊

01.png

Ctrl+S【保存】着绷,然后選擇【發(fā)行】【發(fā)行為原生安裝包】

db.png

然后就可以通過點(diǎn)擊手動下載將打好的包下載到本地,再通過QQ發(fā)送到你的手機(jī)锌云,安裝后就可以使用了荠医。

xz.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市桑涎,隨后出現(xiàn)的幾起案子彬向,更是在濱河造成了極大的恐慌,老刑警劉巖攻冷,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件娃胆,死亡現(xiàn)場離奇詭異,居然都是意外死亡等曼,警方通過查閱死者的電腦和手機(jī)里烦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來禁谦,“玉大人胁黑,你說我怎么就攤上這事≈莶矗” “怎么了丧蘸?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長遥皂。 經(jīng)常有香客問我力喷,道長刽漂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任弟孟,我火速辦了婚禮贝咙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拂募。我一直安慰自己庭猩,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布没讲。 她就那樣靜靜地躺著,像睡著了一般礁苗。 火紅的嫁衣襯著肌膚如雪爬凑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天试伙,我揣著相機(jī)與錄音嘁信,去河邊找鬼。 笑死疏叨,一個胖子當(dāng)著我的面吹牛潘靖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蚤蔓,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼卦溢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了秀又?” 一聲冷哼從身側(cè)響起单寂,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吐辙,沒想到半個月后宣决,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡昏苏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年尊沸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贤惯。...
    茶點(diǎn)故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡洼专,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出孵构,到底是詐尸還是另有隱情壶熏,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布浦译,位于F島的核電站棒假,受9級特大地震影響溯职,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜帽哑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一谜酒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妻枕,春花似錦僻族、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至愕掏,卻和暖如春度秘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背饵撑。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工剑梳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人滑潘。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓垢乙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親语卤。 傳聞我的和親對象是個殘疾皇子追逮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,314評論 25 707
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,297評論 4 31
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看粹舵,也希望更多的人看到...
    小小字符閱讀 8,178評論 7 35
  • jHipster - 微服務(wù)搭建 CC_簡書[http://www.reibang.com/u/be0d56c4...
    quanjj閱讀 816評論 0 2
  • 一日午后羊壹,順著清泥河徜徉,看見許多人在釣魚齐婴。
    caoxia閱讀 212評論 0 2