• https://nodejs.org/en/2、安装cordova环境 Window下行执行命令行: npm install -g cordova Mac下执行命令行 sudo npm install -g cordova 还不行,使用sudo -i npm install -g cordova安装前设置代理:npm ...

    1、下载node.js,进行安装
    https://nodejs.org/en/

    2、安装cordova环境
    Window下行执行命令行:
    npm install -g cordova
    Mac下执行命令行
    sudo npm install -g cordova
    还不行,使用sudo -i npm install -g cordova

    安装前设置代理:npm config set registry http://registry.cnpmjs.org
    最新可用代理:npm config set registry=http://registry.npmjs.org
    npm config set proxy=”http://10.22.98.21:8080”
    //此处10.22.98.21:8080为我公司的代理,需要设置成实际的,无代理则不需设置

    3、创建cordova项目
    ①、创建一个agilime的文件夹和一个AgileMe的项目
    cordova create agileme cn.zhoujingen.agileme AgileMe
    其中,agileme为文件夹名称,cn.zhoujingen.agileme为app id,AgileMe为工程名

    ②、进入文件夹
    cd agileme

    ③、添加Android或iOS平台
    cordova platform add android或cordova platform add ios

    ④、build Android或iOS项目
    cordova build android或cordova build ios

    ⑤、启动Android或Xcode模拟器
    cordova emulate android或cordova emulate ios

    更新Cordova命令:
    npm update -g cordova
    Cordova更新完毕后,还需要更新项目环境:
    Android环境:cordova platform update Android
    Mac环境:cordova platform update ios

    4、插件安装命令(可选):
    默认安装位置为:
    ①、Android环境:项目根目录下\platforms\android\platform_www\plugins\
    ②、iOS环境:项目根目录下\platforms\ios\platform_www\plugins\
    备注:安装完成后,自动会在platform_www\cordova_plugins.js中进行插件信息配置。如从GitHub下载插件源码,则需手动在该文件中进行配置

    更新已安装插件命令:
    cordova plugin ls

    删除已安装插件命令:
    cordova plugin rm cordova-plugin-camera

    照相机:cordova plugin add cordova-plugin-camera
    图片选择器:cordova plugin add cordova-plugin-imagepicker
    条形码扫描器:phonegap、cordova plugin add phonegap-plugin-barcodescanner
    短信:cordova plugin add cordova-plugin-contacts
    设备:cordova plugin add cordova-plugin-device
    设备动作?:cordova plugin add cordova-plugin-device-motion
    设备方向?:cordova plugin add cordova-plugin-device-orientation
    提示框:cordova plugin add cordova-plugin-dialogs
    文件:cordova plugin add cordova-plugin-file
    文件传输:cordova plugin add cordova-plugin-file-transfer
    多媒体:cordova plugin add cordova-plugin-media
    多媒体捕获:cordova plugin add cordova-plugin-media-capture
    网络信息:cordova plugin add cordova-plugin-network-information
    地理位置:cordova plugin add cordova-plugin-geolocation
    国际化:cordova plugin add cordova-plugin-globalization
    不知道是什么:cordova plugin add cordova-plugin-inappbrowser
    屏幕闪烁:cordova plugin add cordova-plugin-splashscreen
    振动:cordova plugin add cordova-plugin-vibration

    展开全文
  • 注意:IOS开发环境只能在MAC系统上搭建。 1.安装 Node.js Cordova需要Node.js环境,访问https://nodejs.org 下载安装, LTS版本即可,不要最新版。 2.安装 Cordova 执行下述命令把Cordova做为全局模块...


    注意:IOS开发环境只能在MAC系统上搭建。


    1.安装 Node.js

    Cordova需要Node.js环境,访问https://nodejs.org 下载安装, LTS版本即可,不要最新版。


    2.安装 Cordova

    执行下述命令把Cordova做为全局模块安装,可在任何目录执行。

    $ sudo npm install -g cordova


    3.安装 XCode

    XCode是Apple提供的开发工具,一般MAC系统都默认安装好了。如无或需要更新,请到MAC的App Store去下载或更新。


    4.安装ios调试和部署支持模块

    $ sudo npm install -g ios-sim   //for 模拟器

    $ sudo npm install --unsafe-perm=true -g ios-deploy  //for 真机


    5.检查所有需要安装的模块是否都已经安装

    $ cordova requirements

    如有需要的模块未安装则会打印醒目的红色提示。


    6.创建APP工程

    $ cordova create hello com.xbrother.hello HelloWorld


    hello: 工程存放的路径名

    com.xbrother.hello:  ios app的bundle id, 要用这种反域名格式,并且要和之后提供的Provision File 匹配

    HelloWorld: 项目称


    以下的命令需要转到hello目录去执行。


    7.添加IOS 平台

    $ cordova platform add ios –save


    8.添加console插件,让JS的console.log可以输出

    $ cd hello

    $ cordova plugin add cordova-plugin-console


    8.为模拟器编译,运行

    $ cordova build ios

    $ cordova emulate ios


    9.真机的编译调试部署需要开发者帐号,并且生成合法的Provision File, 这一步的内容请参阅苹果的文档http://developer.apple.com,有详细描述。 


    10.把下载的Provision File 放到 ~/Library/MobileDevice/Provisioning 目录

    Provisioning Profiles 文件夹cd进不去,可以用open在finder中显示


    11.用文本工具打开Provision File, 找到UUID部分并记下;


    12.在hello目录创建 build.json 文件,内容如下:

    {

         "ios": {

             "debug": {

                 "codeSignIdentity": "iPhone Development",

                     "provisioningProfile": "d2769690-9890-40c0-a3b9-6fddec449aa8" 

             },

             "release": {

                 "codeSignIdentity": "iPhone Distribution",

                 "provisioningProfile": ""

             }

         }

    }

    用在上一步记录的UUID替换文中的部分。


    13.先用命令行编译一遍

    $ cordova build --device ios


    14.把iPhone用USB连接到电脑;


    15.用XCode 打开hello/platforms/ios/HelloWorld.xcodeproj 工程文件,点击运行按钮即可。调试窗口就可以看到console.log的输出。

    如图:


     


    展开全文
  • 安装Cordova CLI1. cordova的安装: 1.1 安装cordova需要先安装node.js。 1.2 如果你没有安装git client,需要下载并安装一个git客户端。 1.3 使用node.js的依赖包管理工具npm来进行cordova安装。 打开终端...

    安装Cordova CLI1. cordova的安装:

    • 1.1 安装cordova需要先安装node.js

    • 1.2 如果你没有安装git client,需要下载并安装一个git客户端。

    • 1.3 使用node.js的依赖包管理工具npm来进行cordova安装。
      打开终端输入如下命令:
      sudo npm install -g cordova

      显示上面的内容说明cordova环境安装成功了

    2.创建cordova的项目
    • 2.1 新建一个cordova的项目
      打开终端输入如下命令,该命令可能需要一些时间来完成:
      cordova create hello com.example.hello HelloWorld [--template templatePath]
    Parameter Description Notes
    hello参数是必填 将为你的项目生成一个hello目录 www子目录是应用程序的主页,以及各种资源(css,js,img),遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统,而不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。
    com.example.hello 参数可选 App ID 如果不填写这个参数,第三个参数就要省略,默认值是 io.cordova.hellocordova,但建议你填写一个适当的值。
    HelloWorld参数可选 应用程序的项目名 这个参数的默认值是 HelloCordova,但建议你填写一个适当的值。
    [--template templatePath] 参数可选,一般不填写 使用模板创建一个项目。 所有文件和文件夹的模板将被复制到新的项目。平台和插件可能包含在一个模板。这个参数是可选的。模板的路径可以是一个本地路径,NPM模块或Git URL。
    • 2.2 添加平台
      所有后续命令需要在项目的目录中运行,其范围内或任何子目录:
      cd hello
      在构建项目之前,您需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK,和你是否已经安装SDK。从Mac运行这些:
      cordova platform add ios

      显示上面的内容就完成一个项目的创建操作
    • 迭代项目 在hello目录中运行下面的命令来构建项目:
      cordova build
      或 指定生成iOS平台的代码项目:
      cordova platform add ios

    3. cordova项目开发
    • 3.1 cordova默认使用的 index.html 文件说明
      打开路径中Xcode工程:

      /Users/iwevon/Cordova/hello/platforms/ios/HelloWorld.xcodeproj

      为了避免混淆,移除(Remove References) 两个文件/文件夹的引用

      上图文件是cordova默认使用的 indecx.html 文件
    • 3.2 Events Cordova生命周期事件

      • deviceready 当Cordova加载完成会触发
        将index.html中的文本替换成如下文本:

        <!DOCTYPE html>
        <html>
        <head>
        <title>Device Ready Example</title>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
        // Wait for device API libraries to load
        //
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        // device APIs are available
        //
        function onDeviceReady() {
            // Now safe to use device APIs
            alert(“onDeviceReady");
        }
        </script>
        </head>
        <body onload="onLoad()">
        </body>
        </html>

        运行结果:



      • pause 当应用程序进入到后台会触发
        resumes 应用程序从后台进入到前台会触发
        将index.html中的文本替换成如下文本:

        <!DOCTYPE html>
        <html>
        <head>
        <title>Pause Example</title>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
        // Wait for device API libraries to load
        //
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
           document.addEventListener("resume", onResume, false);
        }
        // device APIs are available
        //
        function onDeviceReady() {
            document.addEventListener("pause", onPause, false);
        }
        // Handle the pause event
        //
        function onPause() {
             console.log("onPause");
        }
        // Handle the resume event
        //
        function onResume() {
             console.log("onResume");
        }
        </script>
        </head>
        <body onload="onLoad()">
        </body>
        </html>

        打开Safari,使用开发调试查看运行结果:



    3.3 Plugin APIs

    • cordova-plugin-console Cordova Console Plugin
      • 1> 安装
        cordova plugin add cordova-plugin-console

        显示上面的内容说明console插件安装成功了
      • 2>示例
        将index.html中的文本替换成如下文本:
        <!DOCTYPE html>
        <html>
        <head>
          <title>Hello World</title>
          <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
          <script type="text/javascript" charset="utf-8">
           document.addEventListener("deviceready", onDeviceReady, false);
           function consoleLog(){
                  console.log("console.log works well");
           }
          function consoleError(){
              console.error("console.error works well");
          }
          function consoleException(){
              console.exception("console.exception works well");
          }
          function consoleWarn(){
              console.warn("console.warn works well");
          }
          function consoleInfo(){
              console.info("console.info works well");
         }
          function consoleDebug(){
              console.debug("console.debug works well");
        }
          function consoleAssert(){
              console.assert("console.assert works well");
        }
          function consoleDir(){
              console.dir("console.dir works well");
          }
          function consoleDirxml(){
              console.dirxml("console.dirxml works well");
          }
          function consoleTime(){
              console.time("console.time works well");
          }
        function consoleTimeEnd(){
              console.timeEnd("console.timeEnd works well");
            }
          function consoleTable(){
              console.table("console.table works well");
        }
          </script>
          <style type="text/css">
              button {
                  width: 200px;height:26px;font-size: 20px;padding: 1px;margin-left: 100px;
              }
          </style>
        </head>
        <body>
          <div ><br/><br/>
              <br/><button onclick="consoleLog()">consoleLog</button><br/>
              <br/><button onclick="consoleError()">consoleError</button><br/>
              <br/><button onclick="consoleException()">consoleException</button><br/>
              <br/><button onclick="consoleWarn()">consoleWarn</button><br/>
              <br/><button onclick="consoleInfo()">consoleInfo</button><br/>
              <br/> <button onclick="consoleDebug()">consoleDebug</button><br/>
              <br/><button onclick="consoleAssert()">consoleAssert</button><br/>
              <br/> <button onclick="consoleDir()">consoleDir</button><br/>
              <br/> <button onclick="consoleDirxml()">consoleDirxml</button><br/>
              <br/><button onclick="consoleTime()">consoleTime</button><br/>
              <br/><button onclick="consoleTimeEnd()">consoleTimeEnd</button><br/>
              <br/><button onclick="consoleTable()">consoleTable</button><br/>
          </div>
          </div>
        </body>
        </html>
        运行结果:

        Safari+Xcode+Simulator运行结果



        以上如果有错,试试下边的

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

         

    展开全文
  • Mac下Cordova环境搭建

    2016-02-11 17:03:12
    Mac下Cordova环境搭建一、检查JS运行环境打开命令行,运行以下命令 如果不能打出版本号,需要去https://nodejs.org下载运行环境,是一个pkg,安装。laomao:~ laomao$ npm -v 2.14.12二、安装Cordova在命令行运行...

    Mac下Cordova环境搭建

    一、检查JS运行环境

    打开命令行,运行以下命令
    如果不能打出版本号,需要去https://nodejs.org下载运行环境,是一个pkg,安装。

    laomao:~ laomao$ npm -v
    2.14.12

    二、安装Cordova

    在命令行运行以下命令,安装Cordova
    这里由于是用的sudo系统管理命令,所以需要输入系统密码。

    laomao:~ laomao$ sudo npm install -g cordova@6.0
    Password:
    npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
    /usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
    cordova@6.0.0 /usr/local/lib/node_modules/cordova
    ├── underscore@1.7.0
    ├── q@1.0.1
    ├── ansi@0.3.1
    ├── nopt@3.0.1 (abbrev@1.0.7)
    ├── update-notifier@0.5.0 (is-npm@1.0.0, semver-diff@2.1.0, chalk@1.1.1, string-length@1.0.1, repeating@1.1.3, configstore@1.4.0, latest-version@1.0.1)
    └── cordova-lib@6.0.0 (valid-identifier@0.0.1, opener@1.4.1, properties-parser@0.2.3, semver@4.3.6, shelljs@0.3.0, cordova-app-hello-world@3.10.0, nopt@3.0.6, xcode@0.8.0, dep-graph@1.1.0, npmconf@2.1.2, aliasify@1.9.0, npm@2.14.18, request@2.47.0, tar@1.0.2, init-package-json@1.9.3, cordova-serve@1.0.0, cordova-js@4.1.3)
    

    三、创建项目,增加平台

    运行以下命令,创建一个cordova项目

    laomao:~ laomao$ cordova create MyCordovaApp
    Creating a new cordova project.

    以iOS为例,增加iOS平台(官网的示例是浏览器的)

    laomao:~ laomao$ cd MyCordovaApp/
    laomao:MyCordovaApp laomao$ ls
    config.xml  hooks       platforms   plugins     www
    laomao:MyCordovaApp laomao$ pwd
    /Users/laomao/MyCordovaApp
    laomao:MyCordovaApp laomao$ cordova platform add ios
    Adding ios project...
    iOS project created with cordova-ios@4.0.1
    Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
    Fetching plugin "cordova-plugin-whitelist@1" via npm
    Installing "cordova-plugin-whitelist" for ios

    编译代码,只截取其中一部分Log,编译出来的Log实在太多了

    laomao:MyCordovaApp laomao$ cordova build
    Building project  : /Users/laomao/MyCordovaApp/platforms/ios/HelloCordova.xcodeproj
        Configuration : Debug
        Platform      : emulator

    四、运行项目

    项目目录下,有个platforms文件夹,找到对应的平台,打开项目,运行。

    五、总结

    1、流程真的是非常简单,难就难在那堵墙,有很多网站打不开。
    2、文档在http://cordova.apache.org/docs/en/latest/guide/overview/有繁体中文版的文档,很多专业词汇看起来比英文还难受,建议直接看英文版的。

    iOS交流群,379152758,欢迎加入

    展开全文
  • 原文:Apache Cordova for ios环境配置 1.安装针对iOS的工具 https://technet.microsoft.com/ZH-cn/library/dn757054.aspx#ios 2.使用 Parallels 生成适用于 iOS 的 Cordov...
    展开全文
  • Cordova 开发环境搭建

    2018-06-03 10:06:03
    1 前言 现在跨平台开发或者混合开发非常流行了,例如RN Cordova等,感觉Cordova在国内的流行度也非常高,...Cordova环境搭建主要参考官方指导文档 http://cordova.apache.org/#getstarted http://cordova.axuer....
  • IOS搭建cordova项目

    2015-01-26 17:01:09
    1.在cordova官网下载对应的Mac Os版本 2.运行终端窗口 3.输入命令sudo 4.解压下载cordova里面的cordovca-ios文件 5.将解压的文件放在自定义的目录 4.使用命令 cordova-ios所在的目录下的/bin/create创建项目的...
  • 1. https://segmentfault.com/a/1190000002536799 2. https://blogs.msdn.microsoft.com/visualstudio_cn/2015/03/24/apache-cordovamacvisual-studio/
  • Apache Cordova开发环境搭建之VS Code 一、环境配置 1、下载并安装Node.js 2、下载并安装Git 3、配置Android开发平台环境 (注意环境变量的配置:部分可以参考 Apache Cordova开发环境搭建(一)-Visual ...
  • IOS cordova环境搭建

    2019-06-12 20:07:44
    首先什么是cordovacordova的前生是Phonegap。Cordova提供了一组设备相关的API,通过这...好了、现在我们在MAC上搭建cordova环境 、分以下几步1.安装GIT:http://www.git-scm.com/2.安装NODEJS:http://nodejs.o...
  • apache cordova 开发环境搭建 由于本人第一次写博客,会存在许多的书写问题,请大家多多谅解  APP开发现在火得一塌糊涂,许多公司需要引进相关的技术人员,即android,IOS等开发人员,分别用各自的技术来现实相同的业务...
  • cordova开发环境搭建

    2019-11-01 14:18:54
    最近我在尝试了解跨平台技术的发展,首先则是想到了cordova。本文简单记录下cordova环境搭建的过程。
  • Hello,大家好,今天给大家说说在mac上搭建cordova3.4.0的IOS和android开发环境,首先下载cordova,地址:https://cordova.apache.org/#download 下载成功后解压,首先讲一下IOS的: 首先要保证你的Python是可以使用...
  • 很多人使用的是windows,所以这里使用了虚拟机技术 操作系统建议win7 64位 推荐配置、CPU i7,内存8G,推荐16G,硬盘SSD 240G,显卡没有要求 如图。
  • 安装node.js ...  安装完后在命令行输入  $ npm //(测试node.js是否安装成功) 全局安装cordova cli  $ npm install cordova -g  $ cordova //测试是否安装成功 ...部署android的开发环境 安装jdk(如果安装的a...
  • 因为学校有项目需要快速开发出来所以选择了phonegap+html5的结构来搞,第一步就是搭建phonegap环境...言归正传,来说环境搭建,当然前提是电脑里有jdk了。 第一步,百度搜索nodes,官网下载下来,下recommended for
  • Cordova开发之IOS插件开发
  • cordova+vue构建iOS APP

    2018-10-12 09:55:18
    1、环境搭建iOS上构建APP,所需要的环境,同android类似,需要java,不同的是安装xcode,可参考上一篇android构建文章 2、cordova ----安装cordova 命令行输入npm install -g cordova ----创建cordova-app项目,...
  • 我使用cordova命令创建好项目之后使用Eclipse(adt-bundle-windows-x86-20140321)导入项目,然后开发的。mac是也是生成目录后用xcode打开。
  • cordova学习之搭建环境

    2020-03-17 17:32:10
    介绍cordova:1 )使用...开发环境:node,npm,cordova 1.开发android platform 1 )安装JDK ;配置java环境; https://www.cnblogs.com/renqiqiang/p/6822143.html(可供参考学习) 2)直接安装 android SD...
1 2 3 4 5 ... 20
收藏数 2,131
精华内容 852