CORDOVA 打包 IOS

矫情吗；* 2022-04-12 14:10 245阅读 0赞

## CORDOVA 打包 IOS ##

*  首先准备一台mac电脑
 *  防止版本过低，提前将电脑升级到最高版本（我的是mac OS Mojave）
 *  安装Xcode 或 升级到最新版本（预计需要半天时间）
 *  安装cordova
 *  html 代码放置
 *  去除滚定条
 *  去除白边
 *  调整icon ，启动页面
 *  调试打开模拟器
 *  签名认证

## 安装Xcode 或 升级到最新版本 ##

> 打开appstore  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70]

## 安装cordova ##

> 首先需要安装 [node][]  
> tips 学习过前段的小伙伴就不用我介绍了吧，不懂的可以点击上面的node

> 使用node 安装[cordova][]

sudo node install cordova -g //安装
     cordova create myApp //创建一个app
     cordova plugin add cordova-plugin-''name" --save // name 为变量
     cordova platform add android/ios --save  //  添加Android 或 IOS平台 添加以后会在platform文件夹下
     cordova build android/ios --verbose //build  
     cordova run android

## html 代码放置 ##

生成之后的代码结构如图所示  
在index.html 引入cordova.js 与cordova-pugins.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 2]  
每次只需要替换ios/www下的html即可

## 去除滚动条 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 3]

{
        [super viewDidLoad];
        self.webView.scrollView.bounces = NO;
        // Do any additional setup after loading the view from its nib.
    }

## 去除白边 ##

if (@available(iOS 11.0, *)) {
            self.webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        }

## 更换icon ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 4]

> 根据自己需要适配的机型 制作相应的icon替换即可

## 启动页面的更换![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 5] ##

> 根据自己需要适配的机型 制作相应的图片替换即可

## 调试打开模拟器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 6]

*  模拟器 如图选择相应的模拟器
 *  调试 点击三角图标开始将代码写入设备

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70]: /images/20220412/28e801b955d84dac8e5d41b77e268679.png
[node]: https://nodejs.org/zh-cn/
[cordova]: https://www.npmjs.com/package/cordova
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 1]: /images/20220412/c15ce9c3326c46c396b2ff8d8a3d5a44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 2]: /images/20220412/8e25478228a648b9a7b7702be3afb37c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 3]: /images/20220412/65e5c32072e54a37aa83f8478fadb031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 4]: /images/20220412/7e0c9a7f90474bf5830480fb16440ac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 5]: /images/20220412/47881eb450a847f186ba5f4bfba2871a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Vhc3lDbHViX2hhbmppeGlu_size_16_color_FFFFFF_t_70 6]: /images/20220412/75fd80c9c1ae4e6fb3c162ad84e3edb5.png