zoukankan      html  css  js  c++  java
  • 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.请见下章。
    
    
     
     
  • 相关阅读:
    Dictionary集合 字典
    装箱和拆箱
    List< >泛型集合
    Hashtable 键值对集合
    File 类 的基本操作
    简体转换繁体
    ArrayList集合长度的问题
    ArrayList  集合
    里式转换
    字符串中常用的方法
  • 原文地址:https://www.cnblogs.com/infernofranz/p/6055937.html
Copyright © 2011-2022 走看看