• 官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表。但是有一条跨平台,却是很明显的优势。...PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等。...

    PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表。但是有一条跨平台,却是很明显的优势。因为它采用HTML5+JavaScript的模式来开发应用。PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等。。这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下就可以了。PhoneGap后来被Adobe收购,然后又贡献给了开源社区,现在由Apache管理,改名cordova。
    本文主要介绍 cordova 在mac 系统下 创建iOS 项目的过程,及创建过程中出现的问题及解决。
    cordova 官方文档  http://cordova.apache.org/docs/en/latest/guide/cli/index.html
    个人总结的步骤为
     1安装Node.js
     2.  安装XCode

    - 打开“终端”,输入: xcode-select --install

    - 输入:npm install -g ios-sim,若报错,则需要用sudo npm install -g ios-sim

    - 输入:(sudo) npm install -g ios-deploy

    - 输入:sudo npm install -g cordova   (卸载用npm uninstall cordova -g)

    - 输入:cordova create myapp(WebApp)

    - 输入:cd myapp

    - 输入:cordova platform add ios (若报错,则需要注册, http://register....)

    - 输入:cordova build ios

    - 双击   .xcodeproj  打开文件

    - 再去developerz中添加App ID,添加Certificate,下载,然后在Provisioning Profiles--Distribution中设置信息文件到本地,要有证书,也要有说明文件

    - 内置浏览器插件:cordova plugin add cordova-plugin-inappbrowser


    在使使用 cordova 创建iOS 工程时 会出现  bash: cordova: command not found; 

    环境变量没有设置出现的问题 
    在终端输入 export PATH=$PATH:/usr/local/lib/node_modules/cordova/bin


    在终端输入
    echo "$PATH" 查看是否已经添加cordova 的环境变量
    这是变可以创建iOS项目了
    参考 文档链接地址 
    http://stackoverflow.com/questions/17975330/bash-cordova-command-not-found-or-bash-phonegap-command-not-found
    
    http://www.cnblogs.com/shineqiujuan/p/4693404.html
    
    
    
    
     


    展开全文
  • iOS 添加Cordova到已存在的Xcode 工程里 Cordova官网关于如何创建PhoneGao项目的步骤已经很详细了,这里就不赘述了。 实际项目开发中可能需要添加Cordova到已经存在的工程中,近期就遇到了这个问题。网上找到...

    iOS 添加Cordova到已存在的Xcode 工程里


    Cordova官网关于如何创建PhoneGao项目的步骤已经很详细了,这里就不赘述了。

    实际项目开发中可能需要添加Cordova到已经存在的工程中,近期就遇到了这个问题。网上找到最新的教程如下:

     

    1.加入我们已经存在名为Demo项目,目录结构如下:

    \

    \

    2.拷贝Cordova相关文件到Demo目录下,拷贝后目录结构如下

    \

    3.将CordovaLib.xcodeproj添加到Demo工程中,右键选择Add Files To Demo

    \

    4.添加www目录到工程中,记得是勾选Create folder references

    5.按步骤三添加config.xml到工程中,目录结构如下

    \

    6.选择工程的Build Settings->Other Links, 设置-Objc -all_load

    \

    7.选择Build Phases->New Run Script Phase,将新增New Run Script Phase命名为copy www directory

    \

     

    \

    8.Build Phases->Target Dependencies添加CordovaLib

    9.Link Binary With Librarys添加libCordova.a, MobileCoreServices,AssetsLibrary

    \

    \

    \

    9.接下来你就可以正常使用Cordova了,注意other linkers一定要设置,

    '-[__NSCFConstantString JSONObject]: unrecognized selector sent to instance否则会提示类似的错误


    转自:

    http://www.bkjia.com/IOSjc/957673.html

    展开全文
  • 参考:Embedding Cordova WebView on iOS 开发环境: XCode 4.6 Cordova 2.3.0 准备工作 <1 新建config.xml文件 <?xml version="1.0" encoding="UTF-8"?> <cordova> <preference ...

    参考:Embedding Cordova WebView on iOS

     

    开发环境:

    XCode 4.6

    Cordova 2.3.0

     

    准备工作

    <1 新建config.xml文件

    <?xml version="1.0" encoding="UTF-8"?>
    <cordova>
        <preference name="KeyboardDisplayRequiresUserAction" value="true" />
        <preference name="SuppressesIncrementalRendering" value="false" />
        <preference name="UIWebViewBounce" value="true" />
        <preference name="TopActivityIndicator" value="gray" />
        <preference name="EnableLocation" value="false" />
        <preference name="EnableViewportScale" value="false" />
        <preference name="AutoHideSplashScreen" value="true" />
        <preference name="ShowSplashScreenSpinner" value="true" />
        <preference name="MediaPlaybackRequiresUserAction" value="false" />
        <preference name="AllowInlineMediaPlayback" value="false" />
        <preference name="OpenAllWhitelistURLsInWebView" value="false" />
        <preference name="BackupWebStorage" value="cloud" />
    
        <plugins>
            <plugin name="LocalStorage" value="CDVLocalStorage" />
            <plugin name="Device" value="CDVDevice" />
            <plugin name="Logger" value="CDVLogger" />
            <plugin name="Compass" value="CDVLocation" />
            <plugin name="Accelerometer" value="CDVAccelerometer" />
            <plugin name="Camera" value="CDVCamera" />
            <plugin name="NetworkStatus" value="CDVConnection" />
            <plugin name="Contacts" value="CDVContacts" />
            <plugin name="Debug Console" value="CDVDebugConsole" />
            <plugin name="File" value="CDVFile" />
            <plugin name="FileTransfer" value="CDVFileTransfer" />
            <plugin name="Geolocation" value="CDVLocation" />
            <plugin name="Notification" value="CDVNotification" />
            <plugin name="Media" value="CDVSound" />
            <plugin name="Capture" value="CDVCapture" />
            <plugin name="SplashScreen" value="CDVSplashScreen" />
            <plugin name="Echo" value="CDVEcho" />
            <plugin name="Battery" value="CDVBattery" />
            <plugin name="Globalization" value="CDVGlobalization" />
            <plugin name="InAppBrowser" value="CDVInAppBrowser" />
        </plugins>
    </cordova>

    新建config.xml文件,添加到项目中。

     

    <2 创建www目录

    在项目根目录下,创建文件夹www

    在www文件夹下,新建文件index.html文件

    范例:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
            <meta charset="utf-8">
        
                <script type="text/javascript" charset="utf-8" src="cordova.ios.js"></script>
                <script type="text/javascript">
                    function onBodyLoad()
                    {
                        document.addEventListener("deviceready", onDeviceReady, false);
                    }
    
                    function onDeviceReady()
                    {
                        window.pageIsLoaded = true;
                        navigator.notification.alert("Cordova is working")        
                    }
                    </script>
                </head>
        <body onload="onBodyLoad()">
            <p>Hello World!</p>
        </body>
    </html>

    “Create folder references for any added folder”,添加到项目中

     

    1、添加CordovaLib子项目

    cordova-2.3.0/cordova-ios/CordovaLib下,将CordovaLib.xcodeproj拖拽到项目中

    TARGET-> Build Settings -> Other Linker Flags,添加 -all_load 和 -Obj-C 

    TARGET -> Build Phases -> Link Binaries with Libraries,添加一下frameworks:

    • AddressBook.framework
    • AddressBookUI.framework
    • AudioToolbox.framework
    • AVFoundation.framework
    • CoreLocation.framework
    • MediaPlayer.framework
    • QuartzCore.framework
    • SystemConfiguration.framework
    • MobileCoreServices.framework
    • CoreMedia.framework

    TARGET -> Build Phases -> Target Dependencies,添加CordovaLib

    TARGET -> Build Phases -> Link Binaries with Libraries,添加CordovaLia.a

    TARGET-> Build Settings -> Header Search Path,添加一下项:(注意:带引号

    "$(TARGET_BUILD_DIR)/usr/local/lib/include"

    "$(OBJROOT)/UninstalledProducts/include"

    "$(BUILT_PRODUCTS_DIR)" 

     

    2、使用

    新建CDVViewController子类

    示例:

    #import <UIKit/UIKit.h>
    #import <Cordova/CDVViewController.h>
    
    @interface ViewController : CDVViewController
    
    @end

     

    设置该对象的wwwFolderName属性,startPage属性

    示例:

    #import "AppDelegate.h"
    
    #import "ViewController.h"
    
    @implementation AppDelegate
    
    - (void)dealloc
    {
        [_window release];
        [_viewController release];
        [super dealloc];
    }
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
        self.viewController = [[ViewController new] autorelease];
        self.viewController.wwwFolderName = @"www";
        self.viewController.startPage = @"index.html";
        self.viewController.useSplashScreen = YES;
        
        self.window.rootViewController = self.viewController;
        [self.window makeKeyAndVisible];
        return YES;
    }
    
    @end

     

     运行结果:

     

     

    转载于:https://www.cnblogs.com/dyingbleed/archive/2013/02/01/2888747.html

    展开全文
  • 打包Vue项目 1.在Webstorm中打开Vue项目,在下面的Terminal中输入: npm run build 2.等待build完成,双击项目,进入菜单选择Reveal in Finder ,打开项目的真实目录 ...5.打开cordova项目的真实目录下的www目...

    打包Vue项目

    1.在Webstorm中打开Vue项目,在下面的Terminal中输入:

    npm run build

    2.等待build完成,双击项目,进入菜单选择Reveal in Finder ,打开项目的真实目录

    3.找到dist目录,进入

    4.将dist目录下的static文件夹以及index.html全部复制

    5.打开cordova项目的真实目录下的www目录,进去后用刚才复制的Vue项目的static以及index.html替换掉Cordova项目下的www目录下的两个文件。

    Cordova项目

    1.关于新建Cordova项目的新建参照:

    https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82964900

    2.新建完了Cordova项目还要安装具体用法的插件,不再详解。

    3.使用Webstorm打开刚才已经替换掉www目录的cordova项目

    4.同样打开下面的Teriminal,输入:

    cordova build ios

    5.build完成后,到Cordova项目的真实目录下,有个xcodeproject,双击会使用XCode打开

     

    XCode打包

    1.上面用XCode打开后,首先更改构建版本,每次的构建版本是不能相同的,否则无法构建

    2.然后来到Info下的权限声明,只要是涉及到用户的隐私的权限,都要添加中文提示,而且要人性化,并且要说明使用权限的目的。

    3.然后,选择Generic IOS Device,当然也可以选择其他的虚拟手机设备,然后点击左边的小三角进行运行。

    4.选择为Generic IOS Device,后选择上面的Project下的Archive

    5.等待完成后,会有弹窗显示最新的构建版本,选中后点击右边的Upload to App Store

    6.点击next

    7.点击next

    8.点击upload

    9.等待upload完成

    10.出现下面页面则成功,然后点击向右的小箭头,进入到App Store的提交审核页面

    App Store提交审核

    1.如果提示找不到账户之类的问题,尝试重启XCodde。

    2.点击小箭头跳转并登录后,如果获取不到构建版本或者要更改App 图标请参考:

    https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82876655

    https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82876899

    https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82875098

    3.在App  Store的提交审核页面中选择添加构建版本,点击+号或者中文提示的地方,都能选择

    4.选择最新的刚才提交的构建版本,点击完成

    5.填写完相关的要填写的信息后,点击存储,再点击提交所有页面审核

    6.根据个人选择发布版本的时间等一些选项,然后等待官方的审核结果。

    展开全文
  • cordova打包vue2 app

    2018-01-26 17:00:46
    使用cordova打包vue2(webpack)app for android ios 1、vue项目 通过vue-cli脚手架建立项目,使用webpack进行打包,下边是一整套命令。 #npm 版本最好是最新的,升级npm,node版本也有要求 npm i -g npm # ...

    使用cordova打包vue2(webpack)app for android ios

    1、vue项目

    • 通过vue-cli脚手架建立项目,使用webpack进行打包,下边是一整套命令。
    #npm 版本最好是最新的,升级npm,node版本也有要求
    npm  i -g npm
    
    # 安装脚手架
    npm install -g vue-cli
    
    #初始化新建项目
    vue init webpack vue-app
    
    # install dependencies
    # config/index.js 里可以修改端口
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # 打包项目
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 在index.html加入如下标签,不让他放大缩小
    <meta name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    • 1
    • 2

    npm run build 打包项目的时候,要修改config/index.js文件,如图所示

    assetsPublicPath 默认是根路径,改成当前相对路径,或者为空也行

    productionSourceMap 用来支持打包后的调试,改为false,打包比较快

    这里写图片描述

    打包后的文件会放到项目根路径下的dist里边,后边会用到。

    • 复制文件

    因为webpack无法将你的图片等资源放到合适位置,你运行index.html, 就会发现他请求的图片地址是css/static/img,所以在package.json加入如下两条命令。然后修改build命令,让他压缩完代码之后顺便执行复制命令,这样就不用每次动手去拷贝文件了。

    "build": "node build/build.js && npm run fixfont && npm run fiximg",
    "fixfont": "xcopy %cd%\\dist\\static\\fonts %cd%\\dist\\static\\css\\static\\fonts /s /y /d /e /i",
    "fiximg": "xcopy %cd%\\dist\\static\\img %cd%\\dist\\static\\css\\static\\img /s /y /d /e /i"
    • 1
    • 2
    • 3
    npm run build
    • 1

    这里写图片描述

    *注意:打包好的index.html不能直接用浏览器打开,打包的时候有提示。可以通过ide开发工具将index.html跑起来,看有没有什么错误,我这会提示图片404找不到,很郁闷他的请求路径,最后按照他的路径,吧img放到了css文件夹下。


    2、cordova项目

    打包好的vue H5项目需要使用cordova来打包成Android和ios项目。支持跨域 cordova官网命令介绍

    创建一个cordova项目,app名称mapp,包名(bundle id)是com.trgis,项目名是cordova-app

    npm install -g cordova
    • 1
    cordova create cordova-app com.trgis mapp
    • 1

    将vue项目中打包后dist目录下的文件全部拷贝到cordova项目的www目录下

    cd cordova-app
    • 1

    打包ios或者android,本人用的是Android环境

    cordova platform add ios --save
    
    cordova platforms add android --save
    • 1
    • 2
    • 3

    这一步完成后,在项目platforms文件夹下会发现多了文件夹,本人是Android环境,打包后的项目名是android。到这说明vue和cordova整合已经成功了。

    3、使用androidstudio打包apk

    cordova有提供命令支持编译apk的命令,但是本人实在受不了那个速度,慢死了。所以才去Androidstudio进行编译。直接使用as打开cordova项目下platforms 里边的Android项目,会提示你升级gradle版本之类的,最好都升级。用as直接安装在真机上进行调试,到此Android打包完成,ios本人目前没有环境,后期会更新帖子。

    4、使用xcode8进行打包 —-只能在mac系统上进行

    • 创建ios项目 
      首先的在mac上安装node,然后用node安装codorva,然后新建cordova项目
    cordova platform add ios --save
    • 1
    • 安装xcode

      在appstore里安装xcode8,如果你的mac系统还没有更新,还是更新一下,因为xcode8对系统版本有影响。安装时间可能比较长,建议大家多等一会。安装好以后,用xcode打开刚才新建的ios项目,或者也可以在ios下面双击配置文件,默认会打开xcode,并加载项目。好吧,接下来就要搞一些烦人的操作了,ios就是麻烦。

    • xcode8 修改 app 应用图表

      ios的图表限制比较严格,一般的图表扔进去,编译都过不了,这里我们使用App Icon Gear 进行生成icon。在appstore搜索安装App Icon Gear,免费试用。双击打开,按照图片选择。 
      这里写图片描述

    按照图片选择好以后,将app的图表,拖到左边第一个框,这时候他就就会自动生成

    这里写图片描述

    这里写图片描述

    这么多图片自己替换又不现实,当然也提供批量修改的功能,打开xcode将icon的文件夹,拖到那个绿色箭头的框里,按照图片操作,他就会批量替换。

    这里写图片描述

    这里写图片描述

    如果发现打包好的图片不对以后,在这里选择Appicon,其实就是找刚才生成的那个icon的文件,好了,到这里xcode8修改app icon图表就算完成了。至于欢迎页,和这步骤一样,只不过第一步选择的时候,要选择横屏还是竖屏。

    展开全文
  • 按老流程 Cordova create helloApp Cordova platform add ios ...之前一般这种操作之后就能有执行的...就可以用Xcode跑起来了但是今天新建项目的时候忽然出现 ios-deploy not found 的错误,用它的提示命令 n...
  • 环境: osx 10.11.3 xcode 7.2 cordova 6.0.0 node 4.3.2 ...配置好 cordova 环境,并新建一个 cordova 项目,添加 ios 运行平台 ...在新建cordova 项目中 ios 项目下的 cordovaLib 与 cordova 两个文件...
  • cordova打包问题整理

    2020-06-08 09:55:35
    项目中遇到的一些cordova打包问题,现在整理一下做下记录 1. Mac 下安装 cordova-hot-code-push-cli 失败,执行命令为:sudo npm i -g cordova-hot-code-push-cli 错误提示显示 permission 问题,然后安装 ngrok ...
  • Xcode7 新建新工程 不全屏显示解决办法 题外话:在 XCode6 之前版本中之前也遇到过类似的问题,当时简单配置一下:General-> Launch Image Source,直接点击,更换成Images 就可以。如今 XCode7 不灵验了。 OK。...
  • 环境 下载和安装Node.js : ...   安装完成后你可以在命令行中使用node 和 npm ...安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载: ...sudo npm install -g ...cordova create hello co...
  • 安装 //安装 vue-cil npm install --global vue-cli //安装cordova ...//新建cordova 项目cordova create vue-cordova//进入目录cd vue-cordova//vue-cli新建vue项目vue init webpack vueprojectname/...
  • 使用Cordova创建IOS项目

    2019-06-18 13:19:38
    ① sudo npm install -g cordova@6.0.0 ② sudo cordova create TestProject com.test.customer TestProject TestProject: Display Name ,可以更改。 com.test.customer:BundleId,不可以更改。 ③cd TestProject ...
  • 假设已经配置好了Cordova开发环境,Apple ID你也有,XCode也可以正常工作了,那么就可以继续看这篇文章了! 如果你没有看我这篇文章,那么你有可能会顺利编译你的Cordova工程,但是,我觉得你很可能正在解决遇到的...
  • 安装Cordova CLI1. cordova的安装: 1.1 安装cordova需要先安装node.js。 1.2 如果你没有安装git client,需要下载并安装一个git客户端。 1.3 使用node.js的依赖包管理工具npm来进行cordova安装。 打开终端...
  • cordova开发环境搭建: 一、cordova安装 1)安装Node.js -网址:https://nodejs.org/en/ version:10.15.1 LTS 安装根据软件安装方式安装,安装完成测试 node -v 或 npm 2)安装Cordova 前置条件:完成Node.js...
  • Cordova简介 Cordova是一个开源的移动开发框架,它允许你使用WEB开发技术(HTML5、CSS3、JavaScript)进行跨平台开发,可以在每个平台的封装器中执行,并且依赖规范的API对设备进行高效的访问,比如传感器、数据、网络...
  • cordova+vue构建iOS APP

    2018-10-12 09:55:18
    在iOS上构建APP,所需要的环境,同android类似,需要java,不同的是安装xcode,可参考上一篇android构建文章 2、cordova ----安装cordova 命令行输入npm install -g cordova ----创建cordova-app项目,设定包名为...
1 2 3 4 5 ... 19
收藏数 371
精华内容 148