vue项目使用Hbuilder打包苹果IOS-App详细教程

本文主要记录一下本人使用vue开发的移动端App使用Hbuilder打包成苹果IOS-App的详细步骤,仅供参考,如有不足,请指教。

打包苹果IOSapp首先需要准备以下几项东西:

1、已经编写好的vue项目。
2、电脑上安装好Hbuilder。
3、下载好爱思助手,及准备苹果手机一台。
4、安装好Appuploader。
5、注册苹果开发者账号(个人、企业均可)。

介绍一下个人开发者账号:

苹果开发者账号类型.png

再说下什么是免费的苹果开发者账号,就是你没交688年费的就是免费账号,如果你想变成付费开发者账号,提交申请付费就行,账号都是一样的账号。
没有账号的点击链接申请:↓
苹果开发者账号申请

登录开发者中心https://developer.apple.com/account这个界面就是免费开发者账号

开发者中心.png

苹果免费开发者账号的功能限制

1、证书描述文件有效期只有7天,7天后要重新申请iOS证书打包(付费的一年)
2、最多只能添加3个udid测试设备(最多可以让3个手机安装,付费的100个)
3、只能通过手机助手安装如爱思助手安装(不能上传分发平台扫码下载安装,付费开发者可以扫码安装)

免费个人开发者账号申请ios证书打包ipa测试分五步进行

1.申请一个苹果账号
2.申请ios测试证书(p12)
3.申请ios描述文件(mobileprovision)
4.打包ipa
5.安装ipa

一、申请苹果账号

如果还没注册过苹果账号,先注册一个,如果有苹果账号了请直接看第二步!
申请苹果账号.png

1、先点击下面链接注册一个apple id。

https://appleid.apple.com/account?localang=zh_CN

先登录注册用的邮箱,因为等下要收邮件验证码。

名字用拼音写上去

选中国

日期随便写一个,或者写身份证日期!

安全提示问题设置一定要记住保存好,可以截图保存

image.png
image.png

先到邮箱收个邮件验证码,输入点继续,再输入手机短信验证码。


image.png

注册跳转到这个下面这个页面说明苹果账号已经注册成功了。


image.png

2、注册成功了,或者有苹果账号了,登录苹果开发者中心

https://developer.apple.com/account

如果你第一次登陆苹果开发者中心,会有个协议,打钩同意协议,点击Submit提交。

image.png

如果之前登录过同意过协议,没有付费的苹果账号直接登录到这个界面

image.png

如果提交申请了付费开发者账号,但没有付费688或者付费了没有生效的账号是这样的。这样还没付费生效的也还算是免费苹果开发者账号


image.png

只要是登录界面是上图其中一个的,说明已同意协议但未付费的个人开发者!现在就可以直接登录软件申请ios证书了。

二、申请ios测试证书(p12)

如果还没安装Appuploader先安装好
Appuploader安装地址

1、打开Appuploader,用苹果开发者账号登录。

image.png

如果登录报错,先登录下https://developer.apple.com/account,同意下协议再登录Appuploader软件申请证书
image.png

如果登录提示以下错误,说明没有同意苹果的隐私协议,请看这个教程同意下即可登录。apple id同意隐私新协议教程
image.png

正常登录会出现这个下图提示!

意思是只能申请iOS开发证书用于测试,不能上传ipa不能上架,上架需要付费688的开发账号。

image.png

2、选择证书选项

image.png

3、点击右下角+ADD选择,下拉选择iOS开发证书
输入证书名称:不要中文、随意设置

邮箱:(随意)

密码:证书的密码,不是开发者账号密码,如123这样不用很复杂,记好、打包时要用、很重要。

应用id:这里不用选!

点击ok创建。


image.png

如果账号已经有一个iOS开发证书了,将申请报错(如下图)免费开发者账号只能申请一个开发证书p12,可以删除掉再申请,或者直接用这个已经申请的。


image.png

4、申请到了,点击p12文件下载保存.p12 证书文件到电脑。
image.png

三、申请ios描述文件(mobileprovision)

1、返回软件,选择描述文件


image.png

2、点击右下角+ADD,先选择添加应用id


image.png

应用id:三段式格式、如app名称是淘宝,可以编写为com.app.taobao,自由编写!不能重复!具有唯一性@

名称:数字或者字母,自由编写,不要中文,不能重复。

如果添加报错(重复添加或者别人已用这个应用id),解决办法就是修改下应用id,重新编下。


image.png

点击ok只要没弹出报错就是添加成功了,注意先关掉窗口,重新点右下角+ADD进入下拉应用id可查看刚添加的应用id是否存在。


image.png

填加好应用id下步添加设置udid

3、加好了应用id下一步添加用来测试的苹果手机,先获取UUID。

苹果手机助手获取UDID

如爱思助手,电脑下载爱思助手,连上苹果手机,设备信息里面那个设备标识就是udid。


image.png

获取到UUID、点击添加测试设备,复制到UDID框,输入设备名称(随意,不要中文),点击ok。

免费账号7天内最多只能添加3个手机进行测试.

如果报错下图,可能这个udid已经添加过,或者别人添加过,先关掉申请窗口,重新点右下角+ADD,选择开发版看有没有出现设备。
image.png

输入刚获取的udid(如果你的苹果手机链接了电脑,Appuploader会自动获取udid)

name:这个名称不用要中文,数字或者字母随意编写,不要跟之前添加过的名称一样就行。


image.png

添加成功后选择开发版profile在设备栏就会出现刚添加的设备!


image.png

重新点击右下角的+ADD进入(才能同步到刚申请的appid和设备),选择开发版profile、

选择刚创建的appid 应用id 如com.app.taobao,勾选关联第一步创建的ios证书p12,选择刚添加要测试的设备。

输入名称(随意,123、abc之类的不要中文,因为不要跟之前的重复)

点击ok创建。


image.png

5、点击下载保存.mobileprovision,描述文件。

苹果那边规定,没有付费688的苹果账号申请的描述文件只有7天有效期,付费苹果开发者账号的证书是1年有效期,到期可以重新申请打包,当然测试的话几天时间也足够了


image.png

四.打包ipa

各开发者工具打包教程,根据自己使用的平台去打包。
我这里是使用Hbuilder打包
将vue项目运行npm run build 指令,进行项目编译。
编译好之后生成的dist文件夹内的所有东西,复制到新启动的Hbuilder的项目中,替换掉原来的文件夹,保留unpackage文件夹和manifest.json文件。

image.png

image.png

4.2、选择iOS打包,支持的设备类型(可以选择支持iPhone和支持ipad),选择使用苹果证书

AppID:跟申请证书描述.mobileprovision时选择的要一致(又称套装id,appid,BundleID,应用id,包名)

profile文件:选择上传配置文件.mobileprovision

私钥证书:上传.p12文件

私钥密码:输入创建p12设置的密码。

然后点击打包。

xcode打包和appcan打包无法使用,xcode需要付费开发者账号才能导出ipa。

4.3、打包成功后,下载保存ipa,这个ipa包就能安装到手机测试了。

image.png

五、安装ipa

免费开发者账号打包的app只能通过爱思助手安装!

如果需要上传蒲公英 fir等分发平台扫码安装请看这个教程、需要付费的开发者账号。
iOS APP真机调试图文介绍

1、普通账号申请的ios证书打包的ipa、经测试,苹果官方的iTunes助手安装不了,不要用这个。

用爱思苹果助手可以成功安装

https://www.i4.cn/

连接上手机、点击应用游戏,点击导入安装,选择刚打包的ipa包,或者直接选择ipa包右键通过爱思助手安装。


image.png

2、ipa将自动安装,类型是越狱版,安装成功后显示个人正版,因为是个人ios证书打包,没上架App Store。


image.png

image.png

3、安装成功了第一次启动应用会出现如下提示,用测试证书或者企业证书打包的ipa都会这样,需要设置一下。

点击设置、进入通用,下拉选择描述文件和设备管理。


image.png

image.png

4、点击开发者应用下面出现的账号,信任,然后就能启动应用,不在出现提示。

image.png

其他参考教程:
Appuploader使用, iOS上架流程, iOS打包教程, iOS证书申请, 中文文档

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容