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

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

1、技術語言：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（請直接下載Androidstudio軟件官方最新版本，已集成AndroidSDk，建議以默認路徑安裝） 。

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

1、AndroidSDK配置

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

變量名：ANDROID_HOME

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

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

;%ANDROID_HOME%\platform-tools;

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

默認路徑為C:\Users\用戶名\AppData\Local\Android\sdk\tools

D）說明：在cmd環(huá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)境運行‘javac'命令，如下圖所示，即表示環(huán)境變量配置成功。

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

1、Cordova

A）安裝：npm install –g cordova

B）常用命令：

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

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

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

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

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

2、集成VUE

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

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

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

3、項目相關說明

A）最終項目目錄：

B）修改項：

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

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

默認：

修改后：

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

最新評論