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文件。

（3）另外，app_modal.js里的内容只写一句便可:

var app = angular.module('app', ['onsen']);

10：在index页面的html标签里引用在app_modal里声明的模块。<html ng-app="app" ng-csp>

11：这时候，建立的项目能够正确的运行onsenui前端框架提供的任何组件。可是须要注意的是：onsenui里的组件须要放在<ons-page>标签内，并且不要直接在<ons-page>标签内书写纯文本信息。

12：在index页面中，须要注意的是，<ons-page>标签推荐写在<ons-navigator>标签内，以方便页面的跳转。

13：而后就能够在index的<ons-page>标签内对onsenui提供的各类组件进行显示效果的测试了。

14：等熟悉了onsenui提供的各类组件的显示效果之后，就能够经过angularjs的配合实现数据的填充。

到如今为止，项目搭建已经成功。你们快去尝试一下吧。