zoukankan      html  css  js  c++  java
  • cordova的安装与配置

    1、安装nodejs(自动包含npm)

    2、在命令行中通过npm语句npm install -g cordova 安装cordova(如果提示网络连接失败,需要设置网络代理,搭理网址:npm config --global set registry http://registry.cnpmjs.org)

    3、在命令行里通过安装成功的cordova,创建一个混合项目,创建语句:

    cordova create CordovaDemo com.first.helloworld HelloWorld

    CordovaDemo:项目文件夹名

    com.first.helloworld:项目包名

    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开发工具,导入项目以后需要注意调整你的sdk版本为5.1以上,并且,把你同时导入的jar包和项目关联起来

    7、此时项目可以正常运行。项目结构中,需要注意的是assets文件夹,这个文件夹包含了以后项目开发需要维护、修改的全部文件。

    8、在assets中的index.html页面是项目启动以后的首页。项目开发要从他开始。

    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_plugins.js

       cordova.js

      和自定义的app_model.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、 这时候,创建的项目可以正确的运行onsenui前端框架提供的任何组件。但是需要注意的是:onsenui里的组件需要放在<ons-page>标签里面,而且  不要直接在<ons-page>标签内书写纯文本信息。

      12、在index.html页面中,需要注意的是,<ons-page>标签推荐写在<ons-navigator>标签里,以方便页面的跳转。

      13、然后就可以在index的<ons-page>标签内对onsenui提供的各种组件进行显示效果的测试了。

      14、等熟悉了onsenui提供的各种组件的显示效果之后,就可以通过angularjs的配合实现数据的填充。

     
    
    

     

    
    

     

    
    
    
    
    
    
  • 相关阅读:
    selenium2学习:Page object
    selenium2学习:单元测试框架(6):自动发送邮件
    selenium2学习:单元测试框架(5):html测试报告
    selenium2学习:单元测试框架(4):Fixtures
    selenium2学习:单元测试框架(3):执行多级目录的用例、打印报告、跳过执行
    selenium2学习:单元测试框架(2):Discover
    优雅的找出ArrayList中重复的元素
    IntelliJ IDEA2017 + tomcat 即改即生效 实现热部署
    ContentType与SpiringMvc
    Mybatis批量更新比较
  • 原文地址:https://www.cnblogs.com/bpdxqx/p/6061719.html
Copyright © 2011-2022 走看看