混合开发的热潮已经掀起，实现混合开发的方式很多。今天给大家介绍一个实现混合开发的基本方法—OnsenUI和AngularJS配合。

OnsenUI是一个可以实现混合开发的前端框架，包含了很多前端设计中需要的各种组件及网页路由等。详情参考OnsenUI官方网站：https://onsen.io/。

AngularJS是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS是比较新的技术，版本1.0是在2012年发布的。现在已经有了2.0版本，相比1.0版本性能有了很大的提升。详情参考AngularJS官方网站：https://angularjs.org/。

大家简单了解一下OnsenUI和AngularJS之后，我给大家说一下实现一个混合框架的基本步骤。

1：首先安装nodejs（里面自动包含了npm），后面咱们需要用到npm。

2：打开 cmd 命令行，进入在你想存放混合项目的磁盘，咱们以 D 盘为例。在命令行中输入

npm install -g cordova 全局安装 cordova （如果提示网络连接失败，需要设置网络代理。代理网址为：npm config--global set registry

http://registry.cnpmjs.org）

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的配合实现数据的填充。

到现在为止，项目搭建已经成功。大家快去尝试一下吧。

OnsenUI和AngularJS配合搭建混合应用的基本步骤的更多相关文章

  1. angularjs+requlirejs 搭建前端框架（1）

    第一部分:发发牢骚吧 随着富前端时代的逐渐深入,越来越多的前端技术框架层出不穷,可以说是百花齐放.让我们这些爱好前端的人疲于奔命,今天学习这个框架,明天研究那个框架,哎,说不出的蛋疼...感觉好累.. ...

  2. Angularjs环境搭建

    Angularjs架构搭建      1.搭建Angularjs项目           1)在package.json中配置如下,然后 npm install下载包     {   "na ...

  3. 基于VPN搭建混合云架构需要考虑的网络因素

     Joy Qiao from MSFT Wed, Jan 21 2015 8:44 AM 很多用户在搭建混合云架构时,会使用到微软Azure虚拟网络中的 VPN功能,来实现Azure中的虚拟网络与用户 ...

  4. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  5. python webdriver 从无到有搭建混合驱动自动化测试框架的过程和总结

    一步一步实现混合驱动自动化测试框架的搭建 混合驱动自动化测试框架,是一个非常高级的框架,非常好用,但也很难,不好掌握,需要多练习,就像搭建数据驱动框架一样,需要自己去一点一点的写,一边搭建一边做思路整 ...

  6. JSP动态网站环境搭建应用中的详细步骤(Tomcat和Apache/IIS的整合)

    链接地址:http://www.cnblogs.com/dartagnan/archive/2011/03/25/2003426.html JSP动态网站环境搭建应用中的详细步骤(Tomcat和Apa ...

  7. WIN7 环境下搭建 PHP7(64 位)操作步骤

    WIN7 环境下搭建 PHP7(64 位)操作步骤 一.安装与配置 Apache 1.下载 Apache下载地址:https://www.apachelounge.com/download/ 2.安装 ...

  8. Windows下通过GitHub+Hexo搭建个人博客的步骤

    Windows下通过GitHub+Hexo搭建个人博客的步骤  https://blog.csdn.net/namechenfl/article/details/90442312 https://bl ...

  9. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

随机推荐

  1. 安装Pomelo

    安装pomelo的过程中会使用到C++编译器. 请确保你的Windows系统满足以下两个条件: python(2.5<version<3.0). VC++ 编译器,包含在Visual St ...

  2. eclipse xml自动提示

    找到所需要的dtd文件: window->preferences->xml->xml catalog : public id 输入对应的字符串:

  3. CodeForces757B

    B. Bash's Big Day time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...

  4. js中的 arguments ，实参的集合

    当 传递的参数个数不确定时,,可使用 arguments ..

  5. Java多线程基础——Lock类

    之前已经说道,JVM提供了synchronized关键字来实现对变量的同步访问以及用wait和notify来实现线程间通信.在jdk1.5以后,JAVA提供了Lock类来实现和synchronized ...

  6. iOS开发中@property的属性weak nonatomic strong readonly等介绍

    @property与@synthesize是成对出现的,可以自动生成某个类成员变量的存取方法.在Xcode4.5以及以后的版本,@synthesize可以省略. 1.atomic与nonatomica ...

  7. Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSInvocation setArgument:atIndex:]: index (3) out of bounds [-1, 2]'

    这是相机调用方法的时候参数错误

  8. 简易封装手机浏览器touch事件

    做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...

  9. stringBuffer的使用及字符串比较的区别

    /* * 关于equals()和==: 对于String简单来说就是比较两字符串的Unicode序列是否相当,如果相等返回true; * 而==是比较两字符串的地址是否相同,也就是是否是同一个字符串的 ...

  10. jMeter入门实例

    在大家开始看的时候先声明这篇文章不是我写的我只是照着他讲的安装好了,我觉得很有用就想保留下来.分享给大家. 人们对从认识事物都有一个具体到抽象的过程,学习Jmeter也不例外,通过一个实例来进行学习, ...