1.首先下载Node.js

官网:

直接默认安装,一路next。完成后windows+r打开运行窗口,输入CMD。

然后输入node -v 检测是否安装成功(-v不行就-verson)

成功后,npm自动也会安装,npm -v继续检测,出现版本表示安装成功。

图片 1

2.然后重头戏来了安装Cordova

  首先开一个代理不然那速度你会疯的;

  在命令行窗口输入:npm config –global set
registry 

   在命令行窗口输入:npm install -g
cordova

   然后坐等下载安装。

 然后cordova -v 检测是否成功

3.在命令行里通过安装成功的cordova创建一个混合项目。

这里创建一个命名为firstApp,id为com.cycle.first的app,放在CordovaDemo 文件夹下:

创建命令:cordova create CordovaDemo
com.cycle.firstApp firstApp -d

CordovaDemo :项目文件夹名称

com.cycle.first:项目包名称

firstApp :项目名称

 4.添加平台支持(搭载安卓平台
(IOS其他在android那里替换即可,看你需要))

通过cd CordovaDemo 进入到项目内 ,通过命令cordova platform add android

然后又是漫长的等待,为你创建的项目添加安卓运行平台

注意:如果DOM之前关掉了请重新添加代理

然后不用管DOM显示是否搭载成功,只要你的platforms目录下有android就可以了。

出现Y/n直接n不发送信息给该公司。

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.此时,说明项目创建成功。简单就搭建完成了,博主电脑原来就有SDK和ADT这里就不多少,如有需求请私聊。

用开发工具(eclipse
或AS)导入你的项目,如果eclipse 导入项目报错,检查SDK版本(点击项目右键,最后一项properties更改版本),5.1以上并且把导入的jar包。

如有问题先把jar包移除再添加,关联起来。

7.开启eclipse 和WebStorm
同时运行此项目,需要注意的是asserts文件夹,这个文件夹包含项目开发需要维护和修改的全部文件。例如:在对应的asserts下修改index.html里面数据,记得Ctrl+s保存一下,另一个IDE也会动态改变。

8.asserts文件夹下的index.html是项目启动的首页。

9.想要实现OnsenUIhe
和AngilarJS协作的混合项目,需要进行一下简单配置,因为页面是单页面应用(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。
另外,app_modal.js里内容只写一句即可:

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

10.在index.html页面的html标签了里引用在app_modal里声明的模块.

<html lang="en" ng-app="app" ng-csp>

11.在index.html页面指明页面的编码方式以后,其他页面编码方式也要相同,推荐UTF-8.

12.现在,创建的项目可以正确的运行OnsenUI前端框架提供的任何组件,但是需要注意:OnsenUI里的组件要放在
<ons-page>标签里,不要在<ons-page>里直接写纯文本信息,需要标签包裹起来。

13.在index.html页面里,需要注意,<ons-page>标签推荐放在<ons-navigator>标签里,方便页面跳转。

14.然后就可以对OnsenUI提供的各种组件进行显示效果测试。

15.熟悉各种OnsenUI的组件之后,就通过AngularJS的配合实现数据填充。

16.请见下章。