vue項目使用Hbuilder打包蘋果IOS-App詳細(xì)教程

本文主要記錄一下本人使用vue開發(fā)的移動端App使用Hbuilder打包成蘋果IOS-App的詳細(xì)步驟杨幼,僅供參考,如有不足聂渊,請指教差购。

打包蘋果IOSapp首先需要準(zhǔn)備以下幾項東西:

1、已經(jīng)編寫好的vue項目汉嗽。
2欲逃、電腦上安裝好Hbuilder。
3饼暑、下載好愛思助手稳析,及準(zhǔn)備蘋果手機(jī)一臺。
4撵孤、安裝好Appuploader迈着。
5、注冊蘋果開發(fā)者賬號(個人邪码、企業(yè)均可)裕菠。

介紹一下個人開發(fā)者賬號:

蘋果開發(fā)者賬號類型.png

再說下什么是免費的蘋果開發(fā)者賬號,就是你沒交688年費的就是免費賬號闭专,如果你想變成付費開發(fā)者賬號奴潘,提交申請付費就行旧烧,賬號都是一樣的賬號。
沒有賬號的點擊鏈接申請:↓
蘋果開發(fā)者賬號申請

登錄開發(fā)者中心https://developer.apple.com/account這個界面就是免費開發(fā)者賬號

開發(fā)者中心.png

蘋果免費開發(fā)者賬號的功能限制

1画髓、證書描述文件有效期只有7天掘剪,7天后要重新申請iOS證書打包(付費的一年)
2、最多只能添加3個udid測試設(shè)備(最多可以讓3個手機(jī)安裝奈虾,付費的100個)
3夺谁、只能通過手機(jī)助手安裝如愛思助手安裝(不能上傳分發(fā)平臺掃碼下載安裝,付費開發(fā)者可以掃碼安裝)

免費個人開發(fā)者賬號申請ios證書打包ipa測試分五步進(jìn)行

1.申請一個蘋果賬號
2.申請ios測試證書(p12)
3.申請ios描述文件(mobileprovision)
4.打包ipa
5.安裝ipa

一、申請?zhí)O果賬號

如果還沒注冊過蘋果賬號肉微,先注冊一個匾鸥,如果有蘋果賬號了請直接看第二步!
申請?zhí)O果賬號.png

1碉纳、先點擊下面鏈接注冊一個apple id勿负。

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

先登錄注冊用的郵箱,因為等下要收郵件驗證碼劳曹。

名字用拼音寫上去

選中國

日期隨便寫一個奴愉,或者寫身份證日期!

安全提示問題設(shè)置一定要記住保存好铁孵,可以截圖保存

image.png
image.png

先到郵箱收個郵件驗證碼锭硼,輸入點繼續(xù),再輸入手機(jī)短信驗證碼蜕劝。


image.png

注冊跳轉(zhuǎn)到這個下面這個頁面說明蘋果賬號已經(jīng)注冊成功了账忘。


image.png

2、注冊成功了熙宇,或者有蘋果賬號了,登錄蘋果開發(fā)者中心

https://developer.apple.com/account

如果你第一次登陸蘋果開發(fā)者中心溉浙,會有個協(xié)議烫止,打鉤同意協(xié)議,點擊Submit提交戳稽。

image.png

如果之前登錄過同意過協(xié)議馆蠕,沒有付費的蘋果賬號直接登錄到這個界面

image.png

如果提交申請了付費開發(fā)者賬號,但沒有付費688或者付費了沒有生效的賬號是這樣的惊奇。這樣還沒付費生效的也還算是免費蘋果開發(fā)者賬號


image.png

只要是登錄界面是上圖其中一個的互躬,說明已同意協(xié)議但未付費的個人開發(fā)者!現(xiàn)在就可以直接登錄軟件申請ios證書了颂郎。

二吼渡、申請ios測試證書(p12)

如果還沒安裝Appuploader先安裝好
Appuploader安裝地址

1、打開Appuploader乓序,用蘋果開發(fā)者賬號登錄寺酪。

image.png

如果登錄報錯坎背,先登錄下https://developer.apple.com/account,同意下協(xié)議再登錄Appuploader軟件申請證書
image.png

如果登錄提示以下錯誤寄雀,說明沒有同意蘋果的隱私協(xié)議得滤,請看這個教程同意下即可登錄。apple id同意隱私新協(xié)議教程
image.png

正常登錄會出現(xiàn)這個下圖提示盒犹!

意思是只能申請iOS開發(fā)證書用于測試懂更,不能上傳ipa不能上架,上架需要付費688的開發(fā)賬號急膀。

image.png

2沮协、選擇證書選項

image.png

3、點擊右下角+ADD選擇脖阵,下拉選擇iOS開發(fā)證書
輸入證書名稱:不要中文皂股、隨意設(shè)置

郵箱:(隨意)

密碼:證書的密碼,不是開發(fā)者賬號密碼命黔,如123這樣不用很復(fù)雜呜呐,記好、打包時要用悍募、很重要蘑辑。

應(yīng)用id:這里不用選!

點擊ok創(chuàng)建坠宴。


image.png

如果賬號已經(jīng)有一個iOS開發(fā)證書了洋魂,將申請報錯(如下圖)免費開發(fā)者賬號只能申請一個開發(fā)證書p12,可以刪除掉再申請喜鼓,或者直接用這個已經(jīng)申請的副砍。


image.png

4、申請到了庄岖,點擊p12文件下載保存.p12 證書文件到電腦豁翎。
image.png

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

1隅忿、返回軟件心剥,選擇描述文件


image.png

2、點擊右下角+ADD背桐,先選擇添加應(yīng)用id


image.png

應(yīng)用id:三段式格式优烧、如app名稱是淘寶,可以編寫為com.app.taobao链峭,自由編寫畦娄!不能重復(fù)!具有唯一性@

名稱:數(shù)字或者字母,自由編寫纷责,不要中文捍掺,不能重復(fù)。

如果添加報錯(重復(fù)添加或者別人已用這個應(yīng)用id)再膳,解決辦法就是修改下應(yīng)用id挺勿,重新編下。


image.png

點擊ok只要沒彈出報錯就是添加成功了喂柒,注意先關(guān)掉窗口不瓶,重新點右下角+ADD進(jìn)入下拉應(yīng)用id可查看剛添加的應(yīng)用id是否存在。


image.png

填加好應(yīng)用id下步添加設(shè)置udid

3灾杰、加好了應(yīng)用id下一步添加用來測試的蘋果手機(jī)蚊丐,先獲取UUID。

蘋果手機(jī)助手獲取UDID

如愛思助手艳吠,電腦下載愛思助手麦备,連上蘋果手機(jī),設(shè)備信息里面那個設(shè)備標(biāo)識就是udid昭娩。


image.png

獲取到UUID凛篙、點擊添加測試設(shè)備,復(fù)制到UDID框栏渺,輸入設(shè)備名稱(隨意呛梆,不要中文),點擊ok磕诊。

免費賬號7天內(nèi)最多只能添加3個手機(jī)進(jìn)行測試.

如果報錯下圖填物,可能這個udid已經(jīng)添加過,或者別人添加過霎终,先關(guān)掉申請窗口滞磺,重新點右下角+ADD,選擇開發(fā)版看有沒有出現(xiàn)設(shè)備莱褒。
image.png

輸入剛獲取的udid(如果你的蘋果手機(jī)鏈接了電腦雁刷,Appuploader會自動獲取udid)

name:這個名稱不用要中文,數(shù)字或者字母隨意編寫保礼,不要跟之前添加過的名稱一樣就行。


image.png

添加成功后選擇開發(fā)版profile在設(shè)備欄就會出現(xiàn)剛添加的設(shè)備责语!


image.png

重新點擊右下角的+ADD進(jìn)入(才能同步到剛申請的appid和設(shè)備)炮障,選擇開發(fā)版profile、

選擇剛創(chuàng)建的appid 應(yīng)用id 如com.app.taobao坤候,勾選關(guān)聯(lián)第一步創(chuàng)建的ios證書p12胁赢,選擇剛添加要測試的設(shè)備。

輸入名稱(隨意白筹,123智末、abc之類的不要中文谅摄,因為不要跟之前的重復(fù))

點擊ok創(chuàng)建。


image.png

5系馆、點擊下載保存.mobileprovision送漠,描述文件。

蘋果那邊規(guī)定由蘑,沒有付費688的蘋果賬號申請的描述文件只有7天有效期闽寡,付費蘋果開發(fā)者賬號的證書是1年有效期,到期可以重新申請打包尼酿,當(dāng)然測試的話幾天時間也足夠了


image.png

四.打包ipa

各開發(fā)者工具打包教程爷狈,根據(jù)自己使用的平臺去打包。
我這里是使用Hbuilder打包
將vue項目運行npm run build 指令裳擎,進(jìn)行項目編譯涎永。
編譯好之后生成的dist文件夾內(nèi)的所有東西,復(fù)制到新啟動的Hbuilder的項目中鹿响,替換掉原來的文件夾羡微,保留unpackage文件夾和manifest.json文件。

image.png

image.png

4.2抢野、選擇iOS打包拷淘,支持的設(shè)備類型(可以選擇支持iPhone和支持ipad),選擇使用蘋果證書

AppID:跟申請證書描述.mobileprovision時選擇的要一致(又稱套裝id指孤,appid启涯,BundleID,應(yīng)用id恃轩,包名)

profile文件:選擇上傳配置文件.mobileprovision

私鑰證書:上傳.p12文件

私鑰密碼:輸入創(chuàng)建p12設(shè)置的密碼结洼。

然后點擊打包。

xcode打包和appcan打包無法使用叉跛,xcode需要付費開發(fā)者賬號才能導(dǎo)出ipa松忍。

4.3、打包成功后筷厘,下載保存ipa鸣峭,這個ipa包就能安裝到手機(jī)測試了。

image.png

五酥艳、安裝ipa

免費開發(fā)者賬號打包的app只能通過愛思助手安裝摊溶!

如果需要上傳蒲公英 fir等分發(fā)平臺掃碼安裝請看這個教程、需要付費的開發(fā)者賬號充石。
iOS APP真機(jī)調(diào)試圖文介紹

1莫换、普通賬號申請的ios證書打包的ipa、經(jīng)測試,蘋果官方的iTunes助手安裝不了拉岁,不要用這個坷剧。

用愛思蘋果助手可以成功安裝

https://www.i4.cn/

連接上手機(jī)、點擊應(yīng)用游戲喊暖,點擊導(dǎo)入安裝惫企,選擇剛打包的ipa包,或者直接選擇ipa包右鍵通過愛思助手安裝哄啄。


image.png

2雅任、ipa將自動安裝,類型是越獄版咨跌,安裝成功后顯示個人正版沪么,因為是個人ios證書打包,沒上架App Store锌半。


image.png

image.png

3禽车、安裝成功了第一次啟動應(yīng)用會出現(xiàn)如下提示,用測試證書或者企業(yè)證書打包的ipa都會這樣刊殉,需要設(shè)置一下殉摔。

點擊設(shè)置、進(jìn)入通用记焊,下拉選擇描述文件和設(shè)備管理逸月。


image.png

image.png

4、點擊開發(fā)者應(yīng)用下面出現(xiàn)的賬號遍膜,信任碗硬,然后就能啟動應(yīng)用,不在出現(xiàn)提示瓢颅。

image.png

其他參考教程:
Appuploader使用, iOS上架流程, iOS打包教程, iOS證書申請, 中文文檔

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恩尾,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子挽懦,更是在濱河造成了極大的恐慌翰意,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件信柿,死亡現(xiàn)場離奇詭異冀偶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)渔嚷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進(jìn)店門进鸠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人圃伶,你說我怎么就攤上這事。” “怎么了窒朋?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵搀罢,是天一觀的道長。 經(jīng)常有香客問我侥猩,道長榔至,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任欺劳,我火速辦了婚禮唧取,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘划提。我一直安慰自己枫弟,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布鹏往。 她就那樣靜靜地躺著淡诗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪伊履。 梳的紋絲不亂的頭發(fā)上韩容,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天,我揣著相機(jī)與錄音唐瀑,去河邊找鬼群凶。 笑死,一個胖子當(dāng)著我的面吹牛哄辣,可吹牛的內(nèi)容都是我干的请梢。 我是一名探鬼主播,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼柔滔,長吁一口氣:“原來是場噩夢啊……” “哼溢陪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起睛廊,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤形真,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后超全,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咆霜,經(jīng)...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年嘶朱,在試婚紗的時候發(fā)現(xiàn)自己被綠了蛾坯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡疏遏,死狀恐怖脉课,靈堂內(nèi)的尸體忽然破棺而出救军,到底是詐尸還是另有隱情,我是刑警寧澤倘零,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布唱遭,位于F島的核電站,受9級特大地震影響呈驶,放射性物質(zhì)發(fā)生泄漏拷泽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一袖瞻、第九天 我趴在偏房一處隱蔽的房頂上張望司致。 院中可真熱鬧,春花似錦聋迎、人聲如沸脂矫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽羹唠。三九已至,卻和暖如春娄昆,著一層夾襖步出監(jiān)牢的瞬間佩微,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工萌焰, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留哺眯,地道東北人。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓扒俯,卻偏偏與公主長得像奶卓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子撼玄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,573評論 2 353

推薦閱讀更多精彩內(nèi)容