OnsenUI和AngularJS配合搭建混合应用基本步骤(Cordova安装与创建平台项目等)(一)
1.首先下载Node.js
官网:https://nodejs.org/en/楼主下的是v.7.1.0
直接默认安装,一路next。完成后windows+r打开运行窗口,输入CMD。
然后输入node -v 检测是否安装成功(-v不行就-verson)
成功后,npm自动也会安装,npm -v继续检测,出现版本表示安装成功。
2.然后重头戏来了安装Cordova
首先开一个代理不然那速度你会疯的;
在命令行窗口输入:npm config --global set registry http://registry.cnpmjs.org
在命令行窗口输入: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.请见下章。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步