mac系统ionic开发ios app从安装到打包

最新推荐文章于 2020-08-18 13:42:36 发布

卑微的戏子

最新推荐文章于 2020-08-18 13:42:36 发布

阅读量5.4k

点赞数

分类专栏： ionic学习研究

ionic学习研究专栏收录该内容

5 篇文章 0 订阅

订阅专栏

各种安装

下载xcode

在打包时必需，可以去app store里搜索xcode，或者去找网盘或镜像

ant

模拟和打包
*ant依赖JRE，所以还得安装java运行时，可以使用brew search java
homebrew是mac下的包管理工具，很好用，很多工具可以先在这里搜索

ionic和cordova安装

sudo npm install -g ionic cordova

模拟器安装

sudo npm install -g ios-sim

IONIC添加ios平台、编译、模拟器运行

添加平台

ionic platform add ios
这一步时，可能会提示安装borew

构建平台

ionic build ios

使用ionic serve

ionic serve –lab
或者
ionic serve –address 68.54.96.105
指定IP地址
*使用默认浏览器打开页面，同时显示IOS和Android效果

用模拟器打开

ionic emulate ios

emulate也可以指定使用的模拟设备

先查看支持的设备

<code class="hljs brainfuck has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">ionic</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">emulate</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">ios</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">-</span><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">-</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">list</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

可能输出如下设备

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span><span class="hljs-attribute" style="box-sizing: border-box;">-Plus</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPhone<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>s<span class="hljs-attribute" style="box-sizing: border-box;">-Plus</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPad<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPad<span class="hljs-attribute" style="box-sizing: border-box;">-Retina</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPad<span class="hljs-attribute" style="box-sizing: border-box;">-Air</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPad<span class="hljs-attribute" style="box-sizing: border-box;">-Air</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    iPad<span class="hljs-attribute" style="box-sizing: border-box;">-Pro</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>
    Apple<span class="hljs-attribute" style="box-sizing: border-box;">-TV</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1080</span>p, tvOS <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.2</span>
    Apple<span class="hljs-attribute" style="box-sizing: border-box;">-Watch</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">38</span>mm, watchOS <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.2</span>
    Apple<span class="hljs-attribute" style="box-sizing: border-box;">-Watch</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">42</span>mm, watchOS <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.2</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

直接复制每个设备的字符串，包括后面的版本号，比如打算使用『iPad-2, 9.3』就需要拷贝这一串作为emulate的参数

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">onic  emulate ios --target=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"iPad-2, 9.3"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

这样模拟器使用的就是9.3版本的ipad2

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">此处参考：<span class="hljs-symbol" style="color: rgb(0, 102, 102); box-sizing: border-box;">http:</span>/<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/stackoverflow.com/questions</span><span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/22310526/cordova</span>-start-specific-ios-emulator-image</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

安装到USB设备

ionic run ios/android这里写代码片

开发

ionic setup sass

更新sass

真机安装

安装证书什么的
将设备加入证书，并更新证书
*安装进设备前，需要先build，这样才是最新的效果

模拟调试

如果是在模拟器中调试的话：
1、在模拟器中打开应用，并点开需要调试WebView的页面；
2、在Safari中点Develop -> iOS Simulator -> XXX.app，弹出Web Inspector进行调试。

真机调试

如果想用真机调试的话（只能调试用Xcode编译安装的应用）：
1、先在设备上启用Web Inspector：点Settings -> Safari -> Advanced，启用Web Inspector；
2、打开应用，并点开需要调试WebView的页面；
3、在Safari中点Develop -> 设备名 -> XXX.app，弹出Web Inspector进行调试。

打包

ionic有package命令，试过始终是error server

使用xcode

打开xcode，file/open，选择IOS里的name.xcodeproj项目文件
然后使用xcode打包，教程很多，下面贴一个

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-label" style="box-sizing: border-box;">http:</span>//jingyan<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.baidu</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.com</span>/article/ceb9fb10f4dffb8cad2ba03e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span></code>