OnsenUI和AngularJS配合搭建混合應用的基本步驟

時間 2019-11-18

標籤 onsenui angularjs 配合搭建混合應用基本步驟欄目 AngularJS 简体版

原文原文鏈接

混合開發的熱潮已經掀起，實現混合開發的方式不少。今天給你們介紹一個實現混合開發的基本方法—OnsenUI和AngularJS配合。css

OnsenUI是一個能夠實現混合開發的前端框架，包含了不少前端設計中須要的各類組件及網頁路由等。詳情參考OnsenUI官方網站：https://onsen.io/。html

AngularJS是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。AngularJS是比較新的技術，版本1.0是在2012年發佈的。如今已經有了2.0版本，相比1.0版本性能有了很大的提高。詳情參考AngularJS官方網站：https://angularjs.org/。前端

你們簡單瞭解一下OnsenUI和AngularJS以後，我給你們說一下實現一個混合框架的基本步驟。node

1：首先安裝nodejs（裏面自動包含了npm），後面我們須要用到npm。android

2：打開 cmd 命令行，進入在你想存放混合項目的磁盤，我們以 D 盤爲例。在命令行中輸入ios

npm install -g cordova 全局安裝 cordova （若是提示網絡鏈接失敗，須要設置網絡代理。代理網址爲：npm config--global set registryangularjs

http://registry.cnpmjs.org）npm

3：在命令行裏經過安裝成功的cordova，建立一個混合項目。建立的語句爲：瀏覽器

cordova create CordovaDemo com.jredu.hellloworld HelloWorld前端框架

CordovaDemo：項目文件夾名稱

com.jredu.hellloworld：項目包名稱

HelloWorld：項目名稱

4：經過 cd CordovaDemo 命令進去到文件夾內，經過如下命令cordova platform add android爲你的建立的項目添加安卓運行平臺（ios平臺的添加同樣）。

5：運行平臺添加成功之後，還須要添加調用手機底層組件的一系列插件，如下面添加設備插件爲例子：

cordova plugin add cordova-plugin-device

其餘插件的安裝以下所示，不一一解釋。根據項目須要有選擇的進行安裝便可，不必所有安裝。

cordova-plugin-device 基本設備信息

cordova-plugin-network-information 網絡鏈接信息

cordova-plugin-battery-status 電池狀態信息

cordova-plugin-device-motion 加速度信息

cordova-plugin-device-orientation 指南針信息

cordova-plugin-geolocation 定位數據

cordova-plugin-camera 相機

cordova-plugin-media-capture 媒體捕獲

cordova-plugin-media 媒體播放器

cordova-plugin-file 訪問文件

cordova-plugin-file-transfer 文件傳遞

cordova-plugin-dialogs 消息提示對話框

cordova-plugin-vibration 振動提醒

cordova-plugin-contacts 聯繫人

cordova-plugin-globalization 全球化

cordova-plugin-splashscreen 閃屏(啓動畫面)

cordova-plugin-inappbrower 瀏覽器

cordova-plugin-console 控制檯

cordova-plugin-statusbar 狀態欄

6：項目建立成功，用開發工具（Eclipse或AS）導入你建立的項目。若是用的是Eclipse開發工具，導入項目之後須要注意調整你的sdk版本爲5.0以上，而且，把你同時導入的jar包和項目關聯起來。

7：此時項目能夠用Eclipse啓動並正常運行。項目結構中，須要注意的是assets文件夾。這個文件夾包含了之後項目開發須要維護和修改的所有文件。

8：在assets中的index.html頁面是項目啓動之後的首頁。項目開發要從它開始。在index頁面指明頁面的編碼方式之後，其餘頁面的編碼方式也須要和index統一（推薦UTF-8）。

9：想要實現OnsenUI和AngularJS協做的混合項目，還須要進行如下的簡單配置。由於項目是單頁面應用（SPA），因此項目運行期間用到的css和js文件，須要所有聲明在index.html頁面。

（1）：引入必需要引入的兩個css文件：onsenui.css（組件）和onsen-css-components-blue-basic-theme.css（主題）。

（2）：引入幾個必須引入的js文件：angular.js、onsenui.js、cordova.js、cordova_plugins.js和自定義的app_modal.js。注意:cordova.js和cordova_plugins.js只用在調用手機底層功能的時候纔有用，因此在瀏覽器運行項目的時候，須要屏蔽這兩個js文件。