前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

Ionic之iOS打包流程|博客系列

# 一、模拟器运行iOS项目

安装 Ionic Cordova

sudo cnpm install -g cordova ionic
@前端进阶之旅: 代码已经复制到剪贴板

Ionic 创建浏览器运行的项目

  • 创建项目: sudo ionic start myApp tabs
  • cd 到刚才创建的项目
  • sudo ionic serve 浏览器运行项目

Ionic 借助 cordova 创建 ios 手机上可以安装的应用

  • 创建项目: sudo ionic start myApp tabs
  • cd 到刚才创建的项目
  • sudo ionic cordova platform add ios 把 ios 环境添加到我们的项目
  • sudo yarn install
  • 修改代码后运行 sudo ionic build --prod(打包) 以及 sudo ionic cordova prepare (这个是拷贝www目录资源到ios工程下)。必须运行,否则调试会卡死

可能遇到的错误以及解决方案

  • 使用软件中的提供的翻墙工具重试,如果不行继续看第二步骤
  • 手机开启热点,让电脑连接手机用手机的网络下载

找到对应目录下面的文件双击用 Xcode 打开

注意:xcode 用最新的版本

如果双击遇到权限问题如下

可以用命令修改权限,cd 到要修改权限的目录执行下面命令

sudo chmod -R 777 *
@前端进阶之旅: 代码已经复制到剪贴板

在 xcode 中选择对应模拟器运行

注意:调整模拟器大小只需要拉动模拟器边缘即可

# 二、真机调试

# 2.1 真机调试之前的准备工作

  • 你得有苹果开发者账号个人($99)、公司($99)、企业($299)账号均可
  • 能上网的苹果电脑 macos(苹果虚拟机也可以)、Xcode、iOS 设备(iPhone、ipad 均 可)

# 2.2 开发者中心配置调试设备的 uuid

1. 获取iPhone手机的uuid,手机连接电脑,打开iTunes软件,点击序列号字母处

2. 配置iPhone手机的uuid,打开平台开发者中心进行配置

# 2.3 xcode 自动管理证书文件

手动创建证书文件参考下面地址:

https://jingyan.baidu.com/article/d3b74d640735c71f77e609f0.html

现在用 xcode 开发项目我们可以自动适配我们的证书,选择自动化配置证书意味着你不会 在证书设置和编译的时候浪费更多的时间,并且你可以更好的设置适合你的 Xcode

1、点击 xcode 选择 Preference,如下图

2、弹出下面界面输入自己的账户名和密码

3、选择对应的项目 选择 General->勾选自动管理签名->设置 Team 开发者账户->选择开发的 设备

4、设置所有工程的 Build settings 为 Automatic (默认可以不用管)

# 2.4 真机调试

  • 连上手机,然后在手机上面选择信任此电脑
  • 选择调试设备为自己的手机

  • 点击运行

  • 点击允许

注意:每次修改代码后,都需要重新执行 sudo ionic build --prod 以及 sudo ionic cordova prepare。这样比较麻烦,建议在浏览器端调试好了在调试ios、安卓端的

# 三、创建测试包ipa

  • 进入苹果开发者中心,配置需要测试项目的人员手机的 uuid 以及调试设备的 uuid
  • 配置应用包名称
  • 打包测试证书需要连接 iphone 手机,不然 Archive 会是灰色的
  • 选择 product – Archive 进行打包–(具体步骤如下)

可能遇到的错误

如果是 code sign 相关的错误

# 四、发布到 appstore

1. 需要登录到苹果开发者中心Itunes connect 创建应用

2. 配置好开发者证书以打包正式包

这里选择直接导出上传

3. 使用 Application Loader 把本地的正式包发布到 App Store Connect,也可以使用 Xcode把应用发布到 App Store

打开application loader上传应用包

应用升级需要修改版本号,然后build上传

然后在这里可以有多个版本,选择一个提交审核即可

保存之后提交审核

登录 Application Loader 报错

登录: https://appleid.apple.com/account/manage

然后用生成的密码作为登录密码

4. 在xcode中上传应用

修改版本后,选择achieve

然后可以在开发者中心选择上传的版本

提交审核后一般七个工作日左右

# 五、打包上传前,在 info.plist 添加权限

Xcode 打包上传 app store 提示 Missing info.plist key NSPhotoLibraryUsageDescription 错误

Info.plist 添加权限

项目调用了摄像机,需要配置一下权限

为了保护隐私,最终用户必须明确的允许应用程序访问提醒信号、照片、位置、联系人、和日历数 据。为了说服用户接受,它有助于解释应用程序可以怎样使用这类数据,并且说明访问他的原因。给 位于 Info.plist 文件顶层的以下键分配字符串值。当 iOS 提示用户有关特定资源的权限时,他将显示 这些字符串,作为他的标准对话框的一部分。

  • 相册 NSPhotoLibraryUsageDescription
  • 相机 NSCameraUsageDescription
  • 麦克风 NSMicrophoneUsageDescription
  • 位置 NSLocationUsageDescription
  • 在使用期间访问位置 NSLocationWhenInUseUsageDescription
  • 始终访问位置 NSLocationAlwaysUsageDescription
  • 日历 NSCalendarsUsageDescription
  • 提醒事项 NSRemindersUsageDescription
  • 运动与健身 NSMotionUsageDescription
  • 健康更新 NSHealthUpdateUsageDescription
  • 健康分享 NSHealthShareUsageDescription
  • 蓝牙 NSBluetoothPeripheralUsageDescription
  • 媒体资料库 NSAppleMusicUsageDescription

← Ionic3与Ionic4变更对比Ionic之调用原生模块相机 →

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合