美文网首页Cordova我爱编程
cordova使用入门教程

cordova使用入门教程

作者: 杨晨1994 | 来源:发表于2018-03-29 10:49 被阅读0次

    Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。如果你想做app而又不想请原生工程师,那么这是一个不错的选择,话不多说我们接下来开启cordova学习之路

    1.首先你需要安装一个node https://nodejs.org/en/download/ node下载地址 下载安装一下就可以了

    查看node版本

        node -v
    
    image.png

    现在node已经安装成功了

    2.接下来需要安装cordova,打开命令行输入

       npm install -g cordova
    

    安装完输入

        cordova -v
    

    现在cordova已经安装成功了

    3.安装完cordova就可以开始你的第一个项目了,找到你的工作文件夹,接下来创建一个 名字为testdemo的文件夹,项目名字为TestDemo,包名为com.yourname.testdemo的Cordova项目,然后进入到项目

        cordova create testdemo com.yourname.testdemo TestDemo
        cd testdemo
    

    4.这个时候你的项目已经创建完毕,你需要安装ios和android平台

    安装ios平台,你需要一个xcode,之后的打包也是需要的

       cordova platform add ios
    

    安装android平台

    cordova platform add android
    //这里安装平台的时候是安装的最新平台  最新平台修改了目录结构 但是大部分插件都没有修改 所以我建议大家安装6.3.0以下的平台
    cordova platform add android@6.2.3 用来指定平台版本
    

    5.添加安卓环境 需要安装java jdk 和安卓SDK

    JAVA JDK

    1. 安装[JAVA JDK]
      地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html)
      我们可以看到下方有两个JAVA JDK 一个是是最新版的 一个不是最新的
      我安装了最新版的以后(并且配置了环境变量 在cordova build android的时候报了错误,大概意思是版本不支持 我卸载了最新版的 下载了第二个也就是 Java SE 8u171/8u172 然后就可以了 这里有个小坑)
      image.png

    安装完成以后我们打开命令行输入JAVAC 可以看到如下图 不是内部命令 是因为我们没配置环境变量


    1524300052(1).png
    1. 打开我的电脑--属性--高级--环境变量
      (1).新建系统变量JAVA_HOME,变量名:JAVA_HOME ,变量值:C:\Program Files\Java\jdk1.8.0_171
      (2).新建系统变量CLASSPATH,变量名:CLASSPATH ,变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
      (3).选择“系统变量”中变量名为“Path”的环境变量,双击该变量,在原来变量后追加 %JAVA_HOME%\bin
      (4).选择“系统变量”中变量名为“Path”的环境变量,双击该变量,在原来变量后追加 %JAVA_HOME%\jre\bin
    2. 我们再次打开命令行输入“JAVAC”,输出帮助信息即为配置正确。如图:


      1524300487(1).png

    ANDROID SDK

    1. 安装[ANDROID SDK]
      下载Android Studio并安装(官方文档说 仅安装 Android Stand-alone SDK 也可。但是我试过并不可以,会出下面的错误 说你没有 gradle)
      T$FK51TG57I(PYG5P7A4C{B.png
      打开android studio 点击file/settings/appearance&behavior/system settings/android SDK 在这里可以看到你的SDK地址 把它复制下来
      1524377624(1).png
      2 打开我的电脑--属性--高级--环境变量
      新建系统变量ANDROID_HOME,变量名:ANDROID_HOME ,变量值:你刚才复制的内容
      在path环境变量加追加:
      %ANDROID_HOME%\tools
      %ANDROID_HOME%\platform-tools
      3 打开命令行 输入adb 出来信息就可以了
      PS:我第一次运行cordova build android 可以看到正在下载gradle 如下图
      1524375663(1).png
      PS:然后我安装的平台是 7.0.0 可以看到需要android-26支持 但是我安装的27
      1524378052(1).png
      image.png
      这个时候我们如果打包的话就会报错了
      1524378231(1).png
      还有就是我们现在用安卓7.0.0的平台的话 有些插件是安装不了的 如果需要安装插件的话 就要降低android版本 我这里用的是android6.2.3 需要的是android-25
      那么我们就去下载一下SDK吧 把你需要的勾选上 然后点击OK就可以了
      1524378428(1).png
      PS:如果你安装了androidstuido 还是包gradle的错误那你需要手动去下载
      gradle-x.x-bin.zip (x.x代表版本)
      根据需要下载某一版本
      地址:
      (https://services.gradle.org/distributions)
      添加环境变量
        PATH=D:\gradle-x.x\bin
    

    关闭cmd或powershell窗口
    重新打开,输入gradle -v,查看gradle安装成功与否

    6. 查看平台,删除平台

    cordova platforms list
    cordova platform rm 平台名字
    

    7.删除插件 安装插件

       cordova plugin rm 插件名字
       cordova plugin add 插件名字
    

    8. QQ登录 微信登录 支付宝支付 crosswalk插件 以下插件是我经常用到的

         //YOUR_QQ_APPID, YOUR_WECHAT_APPID, your AppId 是你在QQ互联 微信开放平台 以及支付宝申请的appid
         1.QQ登录 cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=YOUR_QQ_APPID
         2.微信登录 cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID
         3.支付宝支付 cordova plugin add cordova-plugin-alipay-v2 --variable APP_ID=[your AppId]
         4.crosswalk插件 cordova plugin add cordova-plugin-crosswalk-webview   
         5.在android目录下assects目录下添加一个没有后缀名的文件 名字是xwalk-command-line  内容是xwalk --ignore-gpu-blacklist
         6.在打包的时候 如果两个程序包名一样 不安装cordova-plugin-crosswalk-webview   插件的APK是不能覆盖安装有此插件的APK
         7.版本插件 cordova plugin add cordova-plugin-app-version 
         8.启动页插件  cordova plugin add cordova-plugin-splashscreen
         9.获取手机Mac地址 cordova plugin add com-badrit-macaddress
         10.系统插件  cordova plugin add cordova-plugin-device
          11.系统键盘插件 cordova plugin add ionic-plugin-keyboard
          11.字体插件cordova plugin add cordova-plugin-fonts
    

    如果你需要其他的插件可以到 http://cordova.axuer.com/plugins/ 里面搜索 里面还有js代码直接复制粘贴就可以

    9. 解决Could not resolve org.xwalk:xwalk_core_library:23 .打包失败问题

    参考地址 https://stackoverflow.com/questions/36654990/error-building-xwalk-with-cordova-android
    打开platforms\ android \ cordova-plugin-crosswalk-webview \ eqp-xwalk.gradle
    把这个:

        dependencies {
             xwalkSpec
        }
    
    改为这一个:
    
        dependencies {
             compile 'org.xwalk:xwalk_core_library:23.53.589.4' //xwalkSpec
        }
    

    10.解决 In <declare-styleable> FontFamilyFont, unable to find attribute android:font 抱错

    1527662814(1).png

    打开打开platforms\ android \build.gradle
    在 dependencies {...}代码下面添加以下代码

    // ADDED THESE LINES
    configurations.all {
      resolutionStrategy.force 'com.android.support:support-v4:26+'
    }
    

    参考地址 https://www.e-learn.cn/content/wangluowenzhang/29664

    11.cordova各个文件

    项目的文件


    image.png

    hooks文件夹没有什么用 不可以改动
    node_nodeule文件夹不可以改动
    platforms文件夹是你的平台代码
    plugins文件夹里面是一些插件
    res是你存放icon和启动页的文件夹
    www里面就是你的代码啦
    .npmignore文件时忽略文件没用
    build.json是我写的json文件下面介绍打包的时候再提
    config.xml这个文件是最重要的 里面是一些配置信息
    package.json和package-lock.json不用动 是自动生成的配置文件
    release-key.keystore文件是打包正式安装包的需要的签名文件

    12.cordova里面的config.xml

    <?xml version='1.0' encoding='utf-8'?>
    //这里的id是你创建项目的时候写的包名 可以随便写 但是还是语义化一点比较好
    //如果是ios平台这个是bundle_id bundle_id是在苹果开发者中心申请的,不可以随便写 必须填写你申请的
    //包名和bundle_id是判断你APP的唯一标识
    <widget id="com.yourname.testdemo" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
        //app名称
        <name>TestDemo</name>
        //app描述  填不填都可以
        <description>
            cordova demo
        </description>
        //作者
        <author email="141204xxxx@qq.com" href="http://cordova.io">
            MY TEAM
        </author>
        //这里是你的app页面入口 也就是在WWW文件夹下的html 
        //比如你想定入口在html文件夹下的guide.html 应该填写html/guide.html
        <content src="index.html" />
        //下面的没有研究 自带的
        <access origin="*" />
        <allow-intent href="http://*/*" />
        <allow-intent href="https://*/*" />
        <allow-intent href="tel:*" />
        <allow-intent href="sms:*" />
        <allow-intent href="mailto:*" />
        <allow-intent href="geo:*" />
        //接下来是平台代码了
        <platform name="android">
            <allow-intent href="market:*" />
            //icon app图标  在res文件夹下
            <icon density="ldpi" src="res/icon/android/36.png" />
            <icon density="mdpi" src="res/icon/android/48.png" />
            <icon density="hdpi" src="res/icon/android/72.png" />
            <icon density="xhdpi" src="res/icon/android/96.png" />
            <icon density="xxhdpi" src="res/icon/android/144.png" />
            <icon density="xxxhdpi" src="res/icon/android/192.png" />
            //icon app图标  在res文件夹下
            <splash density="land-hdpi" src="res/screen/android/800-480.png" />
            <splash density="land-ldpi" src="res/screen/android/320-200.png" />
            <splash density="land-mdpi" src="res/screen/android/480-320.png" />
            <splash density="land-xhdpi" src="res/screen/android/1280-720.png" />
            <splash density="port-hdpi" src="res/screen/android/480-800.png" />
            <splash density="port-ldpi" src="res/screen/android/200-320.png" />
            <splash density="port-mdpi" src="res/screen/android/320-480.png" />
            <splash density="port-xhdpi" src="res/screen/android/720-1280.png" />
        </platform>
        //这是一些配置
        //app强制竖屏portrait 横屏是landscape
        <preference name="orientation" value="portrait" />
        <preference name="SplashScreen" value="screen"/>
        <preference name="SplashScreenDelay" value="0"/>#显示时间
        <preference name="AutoHideSplashScreen" value="false"/>#禁止自动隐藏
        <preference name="FadeSplashScreen" value="false"/>#禁用淡出效果
        <preference name="SplashMaintainAspectRatio" value="true" />#图像cover屏幕
        <preference name="ShowSplashScreenSpinner" value="false" />#隐藏加载灰圈
        <preference name="SplashShowOnlyFirstTime" value="false" />#每次重新启动都显示
        //Fullscreen设置程序是否全屏。全屏时状态栏将不可见,默认为false显示状态栏。
        <preference name="Fullscreen" value="false" />
        //info.plist文件配置信息   在ios平台才需要  不然在iTunes content上传构建版本的时候会被拒绝
       //我就被拒绝过 邮件内容是The app's Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data
        <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
            <string>允许访问用于上传和发送照片</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
            <string>允许访问用于上传和发送照片</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
            <string>允许访问位置信息</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
            <string>允许访问用于上传和发送照片</string>
        </edit-config>
        //插件信息
        <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
        <plugin name="cordova-plugin-alipay-v2" spec="0.0.4">
            <variable name="APP_ID" value="[xxxxxxxxxxx]" />
        </plugin>
        <plugin name="com-badrit-macaddress" spec="https://github.com/mohamed-salah/MacAddress.git" />
        <plugin name="cordova-plugin-wechat" spec="^2.1.0">
            <variable name="WECHATAPPID" value="xxxxxxxxxxxx" />
        </plugin>
        <plugin name="cordova-plugin-qqsdk" spec="^0.9.6">
            <variable name="QQ_APP_ID" value="xxxxxxxxxx" />
        </plugin>
        <plugin name="cordova-plugin-crosswalk-webview" spec="^2.4.1">
            <variable name="XWALK_VERSION" value="23+" />
            <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
            <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
            <variable name="XWALK_MODE" value="embedded" />
            <variable name="XWALK_MULTIPLEAPK" value="true" />
        </plugin>
        <plugin name="cordova-plugin-device" spec="^2.0.1" />
        <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
        <plugin name="cordova-plugin-app-version" spec="^0.1.9" />
        <plugin name="cordova-plugin-camera" spec="^4.0.2" />
        <plugin name="cordova-plugin-compat" spec="^1.2.0" />
       //平台版本
        <engine name="android" spec="^6.2.3" />
    </widget>
    

    13. 解决ios状态栏被覆盖问题 修改Class文件夹 MainViewController.m

    因为测试的时候发现苹果5状态栏被覆盖了 所以修改以下代码

    - (void)viewWillAppear:(BOOL)animated
    {
        // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
        // you can do so here.
    
        [super viewWillAppear:animated];
    }
    

    替换为

        - (void)viewWillAppear:(BOOL)animated
    {
        // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
        // you can do so here.
        if([[[UIDevice currentDevice]systemVersion ] floatValue]>=7)
        {
            CGRect viewBounds=[self.webView  bounds];
            viewBounds.origin.y=20;
            viewBounds.size.height=viewBounds.size.height-20;
            self.webView.frame=viewBounds;
        }
        [super viewWillAppear:animated];
    }
    -(void)viewWillDisappear:(BOOL)animated
    {
     
        if([[[UIDevice currentDevice]systemVersion ] floatValue]>=7)
        {
            CGRect viewBounds=[self.webView  bounds];
            viewBounds.origin.y=20;
            viewBounds.size.height=viewBounds.size.height+20;
            self.webView.frame=viewBounds;
        }
        
        [super viewWillDisappear:animated];
    }
    

    14. 解决ios页面上下滚动问题 把以下代码添加到config文件

        <preference name="WebViewBounce" value="false" />
        <preference name="DisallowOverscroll" value="true" />
    

    15. android项目在config文件里修改包名的时候一定要删除平台再安装一次

    16. ios项目每一次打包都需要删除平台再安装一次 防止代码没有更新

    17.打包debug APK android

    打开命令行 cd到你的项目中

        cordova build android
    
    image.png

    这样打包就成功了 红圈的地方是你的安装包地址 因为我用了crosswolk插件 所以会有两个安装包 你们用armv7就可以

    18.打包正式包

    PS:上一步是debug安装包 是测试用的 签名是自生成的 不可以用来正式发布的 因为他的签名是根据电脑生成的也就是说你换了电脑就不能用了 正式安装包有签名文件 也就是前面说的keystore文件为你的安装包生成签名 只要keystroe文件一样 你的签名就不会变化
    PS: 包名是APK的唯一标识 用来识别是不是同一个APK 而签名呢我的理解代表的开发者 包名一样的可以覆盖安装 包名不一样的不可以覆盖安装

    //首先生成一个keystroe签名文件  这个keystroe不能丢失要保存好 我上次试了一次重新生成keystroe文件结果发现文件不同
    keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000
    //上面的命令意思是,生成一个 release-key.keystore 的文件,别名(alias)为 cordova-demo 。(validity)期限10000天
    //过程中会要求设置 keystore 的密码和 key 的密码。我们分别设置为 123456 和 123456。这四个属性要记牢,下一步有用。
    //生成一个正式安装包
    cordova build android --release
    //对这个安装包签名
    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release-key.keystore platforms/android/build/outputs/apk/android-armv7-release-unsigned.apk mgc
    //为了以后不必这么麻烦 我们可以在项目中创建一个json文件  前面提到的build.json文件
    {
      "android": {
        "release": {
          "keystore": "release-key",//keystroe文件名
          "alias": "cordova-demo",//项目别名
          "storePassword": "123456",//密码
          "password": "123456"//密码
        }
      }
    }
    下次就可以直接用 cordova build --release 了。
    
    image.png
    image.png

    我们可以看到它调用了你的build.json文件和你的keystore文件 会直接给你生成一个签好名的正式安装包了
    文章推荐:https://segmentfault.com/a/1190000005177715 这个感觉更详细一些

    19.最痛苦的来了 打包苹果安装包 ipa 文件

    下面是mac上打包ios包的步骤(从申请账号到app store应用上架)

    1. 申请ios开发者账号

    开发者账号分类


    6788994-041bd44dd3065f8b.png

    如果是个人账号发布的应用,App Store开发者的位置显示的是开发者个人的名字,而公司账号则可以显示公司的名字,现在App Store上的应用一般都是公司账号。

    企业账号比较特殊,发布的安装包可以安装到任何设备上,但是不能发布到App Store。一般一些企业内部的应用都使用这种账号,想开发什么就开发什么,不用担心苹果审核机制的问题。

    接下来的账号申请,参考https://www.jianshu.com/p/9b994a019ee6 很详细。

    到这里账号已经申请下来了,我的是$99的公司级开发账号。

    2. 打开苹果开发网站 https://developer.apple.com/ ,点击Account,登录你的开发者账号

    3. 进入 Certificates, Identifiers & Profiles

    4. 添加证书

    6788994-580cb124448d2359.png
    6788994-90c1c835d95fe1de.png

    这四个证书是一个一个添加的,如果你的app 有推送 则需要弄添加那两个推送的证书,没有就不用管,只添加那两个app发布证书即可。

    两次continue之后,看到如下图界面 choosefile

    6788994-32bf564088ce2467.png

    接下来回到桌面,打开钥匙串,获取CSR文件。

    6788994-0dacdc0af2efc91a.png 6788994-eae345b11286ddc9.png

    继续后,有弹框提示存储位置,存在能找到的地方后回到刚才请求发布证书的页面,choose file 选择刚才的文件,然后点击continue。然后如下如界面,点击download,下载下来后找到该文件,双击,则自动添加到你电脑的钥匙串中了。

    6788994-c7fc4fa2582ea03d.png

    5.创建App IDs和绑定你的App的BundleIdentifier

    6788994-8988d4171137ed39.png 6788994-9ec70ccea9f0b54f.png

    注:你填写的bundle ID 有可能已经被注册过了,那么你需要自行修改一个,但如果这里改了,记得代码的config.xml文件里也要改!

    下面勾选上你app用到的服务,比如推送,没有的话直接下一步下一步就好。


    6788994-638b813627da4452.png

    6.生成描述文件(描述文件的作用就是把证书和BundleIdentifier关联起来)

    6788994-456201b1dcda06d9 (1).png
    1524102088(1).png

    这里我们先选 Ad Hoc 选择APPid

    1524102253(1).png

    选择你创建好的证书

    1524102253(1).png

    因为我们选的 是 Ad Hoc 这个是为测试设备创建的 也就是说 我们需要选择udid 这个udid可以在devices里面添加 这有添加了你手机的udid之后 ,你的手机才可以安装APP

    1524102492(1).png

    然后 是上传到APP strore 的描述文件, 没有截图了,口述吧:

      a) 还是先选择 app id
    
      b) 选择你刚创建的发布证书
    
      c) 在Profile Name栏里输入一个文件名字 下载下来 ,双击,就自动添加到你电脑的钥匙串中了。这里必须要放到钥匙串中不然你是用不了得
    

    7. 将在windows上写的代码 移植到mac上,通过拷贝或者git下载。放入到www文件夹下

    8.打开命令行 进入到你的项目 然后重新平台 安装平台 (为保证代码得到更新)

    QQ图片20180419152855.png

    9.然后进入到你的项目文件夹 邮件以Xcode打开platforms/ios/xxxx.xcodeproj文件

    QQ图片20180419154210.jpg
    10.接下来我们配置一下基础信息 就可以打包了(我也不是搞IOS开发的 配置可能不太详细 或者什么地方有误) 我是参考的这篇文章https://www.jianshu.com/p/749322c7b01a 大家可以看一下
    QQ图片20180419155024.png

    1 Display Name 是你的项目名称 在config.xml写好的
    2 Bundle identifier 是你的在开发者中心申请的 在config.xml写好的
    3 version build 是你的版本信息 在config.xml写好的
    4 上面的信息是我在config文件里面配置好的 自动带过来的
    5 sign(debug)和sign(release)选择你下载好的描述文件
    5 xcode 8.0以后点击Signing 小方块选项可以自动配置你的证书
    6 打包时上面的小锤子一定要选择Generic iOS Device

    QQ图片20180419155940.jpg

    7 如果你的app需要什么照相机 但是提示是英文的 你可以点击info 把其中的English改为China
    8 接下来我们可以点击上面的product/Archive 进行打包了
    这里 我们可以选择导出或者上传到APPstore(Export或者Upload to APP Store)
    9 当我们导出的时候 弹出下面的图 第一个是导出上传 APP Store的包 第二个则是你的设备测试包 也就是你添加的udid的手机可以安装测试的

    QQ图片20180419161126.jpg

    还记不记得下面这张图

    1524102088(1).png

    你选择的描述文件时 上传APP Store的 你就导出APP Store的包
    你选择的是Ad Hoc的描述文件 你就导出Ad Hoc的包

    PS:https://icon.wuruihong.com/ 一个一键生成各种尺寸网站

    相关文章

      网友评论

        本文标题:cordova使用入门教程

        本文链接:https://www.haomeiwen.com/subject/bgnycftx.html