HTML5開發(fā)APP技術(shù)文檔

一、環(huán)境參數(shù)

1、技術(shù)語言：HTML、CSS、ES6、Node.js等；

2、框架：Vue.js 2.x、Cordova；

3、開發(fā)系統(tǒng)：mac、windows等；

4、環(huán)境配置： node 6+ npm 3+ （最好下載Node.js官方最新版本） 、jdk1.8、SDK（請(qǐng)直接下載Androidstudio軟件官方最新版本，已集成AndroidSDk，建議以默認(rèn)路徑安裝） 。

二、系統(tǒng)環(huán)境變量配置（以window7為例）

1、AndroidSDK配置

A）添加用戶變量配置，如下圖所示：

變量名：ANDROID_HOME

變量值：以安裝的路徑為主，默認(rèn)路徑為C:\Users\用戶名\AppData\Local\Android\sdk

B）在用戶變量PATH添加，如下圖所示：

;%ANDROID_HOME%\platform-tools;

C）在系統(tǒng)變量PATH添加，如下圖所示

默認(rèn)路徑為C:\Users\用戶名\AppData\Local\Android\sdk\tools

D）說明：在cmd環(huán)境運(yùn)行‘a(chǎn)ndroid'命令，如下圖所示，即表示環(huán)境變量配置成功。

2、JDK配置

A）添加系統(tǒng)變量，如下圖所示

變量名：JAVA_HOME

變量值：安裝JDK目錄

B）在系統(tǒng)變量PATH添加，如下圖所示：

;% JAVA_HOME%\ bin;

C ）添加系統(tǒng)變量，如下圖所示：
變量名：CLASSPATH

變量值：;.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

D）說明：在cmd環(huán)境運(yùn)行‘javac'命令，如下圖所示，即表示環(huán)境變量配置成功。

三、Cordova +VUE 項(xiàng)目環(huán)境搭建

1、Cordova

A）安裝：npm install –g cordova

B）常用命令：

l 創(chuàng)建項(xiàng)目：cordova create 項(xiàng)目名；如下圖所示，即成功創(chuàng)建。

l 添加平臺(tái)：首先cmd進(jìn)入創(chuàng)建的項(xiàng)目，然后執(zhí)行cordova platform add android –save或cordovaplatform add ios –save，如下圖所示，即成功創(chuàng)建。

l 檢查平臺(tái)設(shè)置狀況：cordovaplatform ls ，如下圖所示，即成功創(chuàng)建。

l 創(chuàng)建APP：cordova build android或 cordova build ios，如下圖所示，即成功創(chuàng)建。

l 測(cè)試APP： cordova emulate android，如下圖所示，即成功創(chuàng)建。

2、集成VUE

A）安裝vue工具：npm install --g vue-cli

B）創(chuàng)建項(xiàng)目：首先cmd進(jìn)入cordova創(chuàng)建的項(xiàng)目，然后執(zhí)行vue init webpack，如下圖所示，即成功

C）npm install 安裝vue項(xiàng)目開發(fā)依賴包，如下圖所示，即成功。

3、項(xiàng)目相關(guān)說明

A）最終項(xiàng)目目錄：

B）修改項(xiàng)：

l 清空www文件夾里面的文件

l 找到config文件夾，修改index。Js

默認(rèn)：

修改后：

l 開發(fā)好項(xiàng)目后，運(yùn)行命令npm run build，接著運(yùn)行cordova build android，最后cordovaemulate android，就可以預(yù)覽項(xiàng)目。