【博學(xué)網(wǎng)課】如何快速開(kāi)發(fā)輕量級(jí)App

快速開(kāi)發(fā)輕量級(jí)App

前端React Native，后臺(tái)Node.js，用輕量級(jí)架構(gòu)開(kāi)發(fā)一款直接在AppStore上線的App，只需一周時(shí)間！

第1章 課程大綱和App演示

介紹整個(gè)課程的內(nèi)容、業(yè)務(wù)架構(gòu)、技術(shù)選型以及App的功能演示。

1-1 課程簡(jiǎn)介

1-2 App功能演示

1-3 后臺(tái)系統(tǒng)演示

第2章 Node.js服務(wù)開(kāi)發(fā)

介紹了Node.js環(huán)境搭建、JSON數(shù)據(jù)文件的讀取以及開(kāi)發(fā)了基礎(chǔ)的服務(wù)接口。該接口主要提供客戶端（含Native端和PC web端）調(diào)用，用于數(shù)據(jù)展示和數(shù)據(jù)存儲(chǔ)。

2-1 第二章內(nèi)容簡(jiǎn)介

2-2 Node環(huán)境搭建

2-3 Express創(chuàng)建項(xiàng)目

2-4 服務(wù)接口設(shè)計(jì)

2-5 數(shù)據(jù)讀取接口

2-6 數(shù)據(jù)存儲(chǔ)接口

2-7 閱讀模塊配置接口

第3章 Node.js開(kāi)發(fā)后臺(tái)系統(tǒng)

講解了通過(guò)調(diào)用第二章的接口，開(kāi)發(fā)簡(jiǎn)易的后臺(tái)CMS系統(tǒng)。該CMS系統(tǒng)主要用于配置頁(yè)面數(shù)據(jù)和存儲(chǔ)列表數(shù)據(jù)。

3-1 后臺(tái)系統(tǒng)開(kāi)發(fā)講解

3-2 接口&后臺(tái)開(kāi)發(fā)總結(jié)

第4章 React Native環(huán)境搭建和入門

主要講解React Native的環(huán)境搭建、項(xiàng)目運(yùn)行的注意事項(xiàng)以及生命周期的簡(jiǎn)單介紹。通過(guò)該章，可以簡(jiǎn)單快速的了解下React Native的基礎(chǔ)知識(shí)。

4-1 React Native環(huán)境搭建

4-2 React Native運(yùn)行項(xiàng)目注意事項(xiàng)

4-3 ReactNative生命周期簡(jiǎn)單介紹

第5章 App主體界面框架搭建

第五章是App開(kāi)發(fā)的開(kāi)端，是App開(kāi)發(fā)的第一步。本章主要介紹搭建App整體的UI框架和實(shí)現(xiàn)主體頁(yè)面的組件化。

5-1 界面結(jié)構(gòu)搭建(1)

5-2 主體界面組件化

第6章 App 衛(wèi)生間模塊開(kāi)發(fā)

介紹了衛(wèi)生間模塊開(kāi)發(fā)。整個(gè)功能的核心是使用高德地圖JS-API，例如搜索附近2km以內(nèi)的衛(wèi)生間以及展示衛(wèi)生間的基礎(chǔ)信息。同時(shí)為了方便用戶使用App，還開(kāi)發(fā)了路徑導(dǎo)航功能。

6-1 衛(wèi)生間模塊之WebView組件開(kāi)發(fā)

6-2 衛(wèi)生間模塊之錯(cuò)誤提示水平垂直居中

6-3 衛(wèi)生間之地圖模塊開(kāi)發(fā)

6-4 地圖比例尺位置移動(dòng)

6-5 定位成功和失敗的事件監(jiān)聽(tīng)

6-6 顯示衛(wèi)生間并導(dǎo)航(上)

6-7 顯示衛(wèi)生間并導(dǎo)航(下)

6-8 附近的衛(wèi)生間模擬器演示

第7章 App 工具類封裝

不論是客戶端還是服務(wù)端，工具類的封裝是十分必要的。因此針對(duì)該應(yīng)用封裝了工具類，方便其他組件復(fù)用。

7-1 工具類的封裝

第8章 App 閱讀模塊開(kāi)發(fā)

閱讀模塊是整個(gè)App的重點(diǎn)，主要包括整體功能以及各模塊設(shè)計(jì)。例如推薦專題的開(kāi)發(fā)、列表數(shù)據(jù)的渲染、分類組件的開(kāi)發(fā)等等。

8-1 閱讀模塊功能設(shè)計(jì)

8-2 五大模塊創(chuàng)建和加載

8-3 搜索組件UI開(kāi)發(fā)

8-4 推薦專題完成

8-5 熱門推薦組件UI完成

8-6 分類組件UI開(kāi)發(fā)完成

8-7 推薦主題數(shù)據(jù)渲染

8-8 分類專題數(shù)據(jù)渲染

8-9 列表組件數(shù)據(jù)傳遞

8-10 列表使用listview組件

8-11 數(shù)據(jù)列表展示

8-12 完善詳情頁(yè)

第9章 App 天氣模塊開(kāi)發(fā)

調(diào)用了高德地圖開(kāi)放平臺(tái)天氣接口，向用戶展示當(dāng)前天氣的信息，例如溫度、風(fēng)向等。

9-1 天氣模塊開(kāi)發(fā)（上）

9-2 天氣模塊開(kāi)發(fā)（中）

9-3 天氣模塊（下）

第10章 App 設(shè)置模塊開(kāi)發(fā)

主要提供了App的使用幫助、功能介紹、使用條款等信息。

10-1 設(shè)置模塊UI開(kāi)發(fā)

10-2 設(shè)置功能開(kāi)發(fā)

第11章 App 打包和上線

介紹了jsbundle 打包和優(yōu)化加載、現(xiàn)有App的集成以及整體打包上線。

11-1 jsbundle打包和優(yōu)化加載

11-2 與現(xiàn)有App集成&擴(kuò)展補(bǔ)充

11-3 整體App效果展示

11-4 證書&打包&結(jié)語(yǔ)