cordova相关命令

• 安装cordova

npm install cordova -g

• 创建一个cordova项目

cordova create hello

• 添加一个平台

cordova platform add ios

• 构建一个app

cordova build [android|ios] #不指定会都构建，也可以单独制定构建哪个平台

将已有的h5项目打包成app

• 进入h5项目所在的根目录

  
  
  QQ20180508-173923.png

• 新建一个cordova的hello项目
  cordova create hello

• 将hello下面的目录或者文件考到h5项目下面，其中package.json可能不需要，因为现在的h5项目基本都是基于包开发的，所以每个项目应该都已经有了package.json

  
  
  QQ20180508-174403.png

• 修改config.xml将widget组件里面的id修改自己项目的bundleid,例如: com.xxx.xxx(一般写成公司的域名)

• 一定要确保h5目录下面有www目录和config.xml文件;现在我们项目大多都是基于webpack的，所以应该有个输出目录，一般都是dist, 这里我们可以指定为www和cordova项目保持一致，以达到复用

• 打包已有的h5项目到www目录下面
  npm run build

• 添加ios平台和android平台

cordova platform add ios --save
cordova platform add android --save

• 如果h5项目更改了，只需要重新打包即可

npm run build
cordova build ios

• 指定app的入口文件，在config.xml添加content标签
  <content src="pages/home-page2.html" />

• 用xcode打开platforms->ios->HelloCordova.xcworkspace即可运行ios项目

  
  
  QQ20180508-180034.png

ios授权相关操作

• 在*.plist文件里面添加如下代码

<key>NSPhotoLibraryAddUsageDescription</key>
    <string>需要调用您的相机哦，请允许</string>
//授权访问通讯录
<key>NSContactsUsageDescription</key>
<string>请允许授权哦,否则可能申请失败</string>
 //授权相机
<key>NSCameraUsageDescription</key>
<string>请允许拍照哦!</string>
//授权访问地址
<key>NSLocationAlwaysUsageDescription</key>
<string>请授权访问地址哦</string>
//授权访问相册
<key>NSPhotoLibraryUsageDescription</key>
<string>请允许访问相册哦</string>

配置app logo

• 在config.xml里面添加如下配置
• ios配置

<platform name="ios">
         <icon height="180" src="res/icon/ios/icon-60@3x.png" width="180" />
        <icon height="120" src="res/icon/ios/icon-60@2x.png" width="120" />
        <icon height="60" src="res/icon/ios/icon-60.png" width="60" height="60" />
        <icon height="76" src="res/icon/ios/icon-76.png" width="76" />
        <icon height="152" src="res/icon/ios/icon-76@2x.png" width="152" />
        <icon height="40" src="res/icon/ios/icon-40.png" width="40" />
        <icon height="80" src="res/icon/ios/icon-40@2x.png" width="80" />
        <icon height="57" src="res/icon/ios/icon-57.png" width="57" />
        <icon height="114" src="res/icon/ios/icon-57@2x.png" width="114" />
        <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
        <icon height="29" src="res/icon/ios/icon-29.png" width="29" />
        <icon height="58" src="res/icon/ios/icon-29@2x.png" width="58" />
        <icon height="50" src="res/icon/ios/icon-50.png" width="50" />
        <icon height="100" src="res/icon/ios/icon-50@2x.png" width="100" />
</platform>

• android配置

<platform name="android">
<icon density="ldpi" src="res/icon/android/eldpi.png"/>
<icon density="mdpi" src="res/icon/android/emdpi.png"/>
<icon density="hdpi" src="res/icon/android/ehdpi.png"/>
<icon density="xhdpi" src="res/icon/android/exhdpi.png"/>
<icon density="xxhdpi" src="res/icon/android/exxhdpi.png"/>
<icon density="xxxhdpi" src="res/icon/android/exxxhdpi.png"/>
</platform>

配置app 启动图配置

• 依赖cordova-plugin-splashscreen插件,需要先安装

cordova plugin add cordova-plugin-splashscreen

• 在config.xml中配置相关信息
• ios 配置

<platform name="ios">
<splash src="res/screen/ios/640_960.png" width="640" height="960" />
<splash src="res/screen/ios/640_1136.png" width="640" height="1136" />
<splash src="res/screen/ios/750_1334.png" width="750" height="1334" />
<splash src="res/screen/ios/1242_2208.png" width="1242" height="2208" />
</platform>

• android 配置

<platform name="android">
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />//480*320
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />//320*480
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />//720*1280
<splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png" />//1080*1920
</platform>

配置app的名称

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>xxx</name>

</widget>

ps:配置完执行cordova build 重新运行即可

cordova热更新

• app的热更新：指的是不需要再次上传app到应用市场，或者重新安装升级包，来实现App的更新升级
• cordova可以借助插件cordova-hot-code-push来实现热更新
• 插件安装

1. 热更新插件
cordova plugin add cordova-hot-code-push-plugin

3.执行cordova热更新的命令行工具
npm install -g cordova-hot-code-push-cli 

• 运行cordova-hcp build

cordova-hcp build
Running build
Build 2018.04.03-16.00.56 created in /Users/mzr/credan/cordova/hello/www

ps: 会在www下面创建chcp.json，chcp.mainfest两个文件

• 在chcp.json文件里面添加以下内容

{
  "autogenerated": true,
  "release": "2018.04.03-16.00.56",
  "content_url": "http://test.com/app", //此地址为我们放置项目的地址
  "update": "now"
}

• config.xml里面需要添加以下代码

<chcp>
     <config-file url="http://test.com/app/chcp.json" />
</chcp>

ps: config-file的url需要是远程可以访问到的chcp.json文件；每次重新启动app的时候会请求此文件，与本地的该文件比对时间，如果不一样，从服务器的content_url目录获取最新的内容

• 执行完上面的步骤，热更新就配置完成了，如果下次项目改变的话，执行以下步骤
  1. cordova-hcp build 生成新的chcp.json文件, 文件内容如下

  {
    "autogenerated": true,
    "release": "2018.04.03-16.17.24"
  }
  

  2. 需要再把content_url和update字段添加到chcp.josn里面

    {
      "content_url": "http://test.com/app",
      "update": "now"
    }
  

  ps: content_url此地址为我们放置项目的地

  3. 分别将我们的项目和chcp.json文件上传到服务器相应的目录
     ps: 我们也可以把项目和chcp.json文件里面放到一个目录里面

  4. 再次打开app，看看内容是否更新了呢

配置app只可以垂直显示

<preference name="Orientation" value="portrait" />

配置coraova项目的webview上下拖动的时候不出现空白

//禁止上下滑动有空白区
<preference name="WebViewBounce" value="false" />
//禁止上下有滚动条
<preference name="DisallowOverscroll" value="true" />