H5 手機(jī) App 開(kāi)發(fā)入門(mén)：技術(shù)篇

一、手機(jī) App 技術(shù)棧簡(jiǎn)介

手機(jī) App的技術(shù)棧大致可以分為三類。

原生技術(shù)棧

原生技術(shù)棧特指用于特定手機(jī)平臺(tái)的開(kāi)發(fā)技術(shù)。例如，安卓平臺(tái)主要使用Java技術(shù)棧，而iOS平臺(tái)則主要使用Object-C技術(shù)棧或Swift技術(shù)棧。這些技術(shù)棧充分利用了各平臺(tái)的原生性能優(yōu)勢(shì)，提供了流暢、高效的App體驗(yàn)。

混合技術(shù)棧

混合技術(shù)棧主要涉及混合App的開(kāi)發(fā)。它將Web網(wǎng)頁(yè)置于特定的容器中，然后打包成各個(gè)平臺(tái)的原生App?；旌霞夹g(shù)棧實(shí)際上是Web技術(shù)棧加上容器技術(shù)棧的組合，其中PhoneGap、Cordova以及Ionic等框架是典型代表。這種技術(shù)棧結(jié)合了Web開(kāi)發(fā)和原生開(kāi)發(fā)的優(yōu)點(diǎn)，具有一定的靈活性。

跨平臺(tái)技術(shù)棧

跨平臺(tái)技術(shù)棧使用一種技術(shù)同時(shí)支持多個(gè)手機(jī)平臺(tái)。與混合技術(shù)棧不同，它不使用Web技術(shù)，而是使用自己的語(yǔ)法編寫(xiě)UI層，然后編譯成各平臺(tái)的原生App。這類技術(shù)棧以React Native、Xamarin和Flutter為代表，它們提供了高效的性能和高度的可定制性。

二、H5開(kāi)發(fā)在混合與跨平臺(tái)技術(shù)中的應(yīng)用

H5開(kāi)發(fā)主要在混合技術(shù)棧中發(fā)揮作用，特別是在Web技術(shù)與原生應(yīng)用的結(jié)合上。而在跨平臺(tái)技術(shù)棧中，如React Native等也會(huì)借鑒Web模型，因此也涉及到H5的相關(guān)技術(shù)。無(wú)論是混合技術(shù)棧還是跨平臺(tái)技術(shù)棧，其基礎(chǔ)都是原生技術(shù)棧，因此了解各平臺(tái)的原生技術(shù)是必不可少的。

三、關(guān)于WebView控件

在App中顯示網(wǎng)頁(yè)需要一個(gè)網(wǎng)頁(yè)引擎，即WebView控件。這是系統(tǒng)自帶的控件，專門(mén)用于顯示網(wǎng)頁(yè)。不同系統(tǒng)的WebView控件名稱和功能有所不同，但作用都是將網(wǎng)頁(yè)內(nèi)容嵌入到App中。在混合和跨平臺(tái)App開(kāi)發(fā)中，WebView控件的處理和使用是關(guān)鍵技術(shù)之一。

如何使用H5開(kāi)發(fā)App

現(xiàn)在用H5開(kāi)發(fā)App的主要模式

目前，用H5開(kāi)發(fā)App主要有三種模式：webapp、混合式app和RNapp。WebApp主要是將網(wǎng)頁(yè)版進(jìn)行打包，不能調(diào)用原生的功能；混合式app能夠調(diào)用一些原生的功能，體驗(yàn)比WebApp好；RNapp則能使用大部分的原生功能，與原生app幾乎沒(méi)有區(qū)別。

H5+AppiOS離線打包教程

H5+App離線iOS（Xcode）打包步驟

1. 前言：H5+plus開(kāi)發(fā)文檔可通過(guò)百度搜索獲取。建議使用HbuilderX新建H5+app項(xiàng)目并參考demo，此處將詳細(xì)介紹離線iOS的打包流程。

2. 準(zhǔn)備階段：確保你的H5+項(xiàng)目已經(jīng)配置完成并可以正常運(yùn)行。

3. 新建Xcode項(xiàng)目：在Xcode中創(chuàng)建一個(gè)新的項(xiàng)目，這將是你的原生iOS外殼。

4. 集成H5+內(nèi)容：將你的H5+項(xiàng)目文件導(dǎo)入到Xcode項(xiàng)目中，這通常包括HTML、CSS、JS文件以及相關(guān)的資源文件。

5. 配置WebView：在Xcode中配置WebView控件以顯示你的H5內(nèi)容。確保WebView的設(shè)置與你的H5項(xiàng)目兼容。

6. 測(cè)試與調(diào)試：在模擬器或真實(shí)設(shè)備上測(cè)試你的App，確保一切運(yùn)行正常。

7. 發(fā)布與打包：一旦滿意測(cè)試結(jié)果，你可以使用Xcode的導(dǎo)出功能將你的App打包成IPA文件，然后發(fā)布到App Store或其他渠道。

希望這個(gè)教程能幫助你順利完成H5+App的iOS離線打包工作！ 一、蘋(píng)果開(kāi)發(fā)者中心創(chuàng)建證書(shū)

登錄蘋(píng)果開(kāi)發(fā)者中心

打開(kāi)蘋(píng)果開(kāi)發(fā)者中心，使用您的Account登錄。界面清晰直觀，容易上手。

選擇Certificates，IDS&Profiles

登錄后，您會(huì)看到Certificates，IDS&Profiles的選項(xiàng)。這些選項(xiàng)是創(chuàng)建和應(yīng)用證書(shū)的關(guān)鍵步驟。

創(chuàng)建開(kāi)發(fā)者證書(shū)

在Certificates部分，選擇創(chuàng)建開(kāi)發(fā)者證書(shū)。證書(shū)分為開(kāi)發(fā)者和發(fā)布兩種類型，分別為iOSDevelopment和iOSDistribution。對(duì)于要上架AppStore的應(yīng)用，您需要?jiǎng)?chuàng)建iOSDistribution證書(shū)。

如果已經(jīng)存在Production證書(shū)，您可以從創(chuàng)建發(fā)布證書(shū)的電腦上導(dǎo)出P12文件，無(wú)需重復(fù)創(chuàng)建。開(kāi)發(fā)者證書(shū)適用于該賬號(hào)下的所有應(yīng)用，不需要為每個(gè)應(yīng)用單獨(dú)創(chuàng)建證書(shū)。如果證書(shū)過(guò)期，您可以按照此教程重新申請(qǐng)。

使用鑰匙串訪問(wèn)生成CS件

在Mac電腦上，打開(kāi)鑰匙串訪問(wèn)工具。在蘋(píng)果標(biāo)志旁，找到并點(diǎn)擊鑰匙串訪問(wèn)。選擇證書(shū)助理，從證書(shū)頒發(fā)機(jī)構(gòu)請(qǐng)求證書(shū)。填寫(xiě)郵件地址和常用名稱，選擇存儲(chǔ)到磁盤(pán)。保存時(shí)，您需要設(shè)置一個(gè)重要的證書(shū)密碼。完成后，您會(huì)得到一個(gè)CertificateSigningRequest.certSigningRequest文件。

返回開(kāi)發(fā)者中心完成證書(shū)創(chuàng)建

回到蘋(píng)果開(kāi)發(fā)者中心，選擇剛才保存的CS件，繼續(xù)完成證書(shū)創(chuàng)建流程。下載完成的證書(shū)是一個(gè)后綴為.cer的文件，雙擊即可安裝在電腦上。

二、創(chuàng)建AppID

進(jìn)入Identifiers選擇添加按鈕

在Identifiers部分，點(diǎn)擊添加按鈕開(kāi)始創(chuàng)建AppID。

選擇APPIDS選項(xiàng)

默認(rèn)選擇APPIDS選項(xiàng)，繼續(xù)點(diǎn)擊continue。

選擇應(yīng)用并繼續(xù)

從列表中選擇您要為其創(chuàng)建AppID的應(yīng)用。點(diǎn)擊continue進(jìn)入下一步。

輸入APPID的名稱和BundleID

為您的AppID起一個(gè)名稱，并根據(jù)您的格式創(chuàng)建一個(gè)唯一的BundleID。下方的多選框可以根據(jù)需要選擇（這些選項(xiàng)后續(xù)也可以編輯）。點(diǎn)擊continue并完成注冊(cè)。

三、創(chuàng)建描述文件（應(yīng)用簽名）

進(jìn)入Profiles選擇添加按鈕

在Profiles部分，點(diǎn)擊添加按鈕開(kāi)始創(chuàng)建應(yīng)用描述文件。

選擇AdHoc分布

在distribution中選擇AdHoc。AdHoc適用于少量設(shè)備或公司內(nèi)部測(cè)試使用。您需要配置特定的設(shè)備udid，設(shè)備udid的獲取方式可以通過(guò)百度搜索。請(qǐng)注意，設(shè)備的數(shù)量上限是100臺(tái)。創(chuàng)建蘋(píng)果開(kāi)發(fā)者賬號(hào)并集成HbuilderSDK的步驟指南

一、創(chuàng)建蘋(píng)果開(kāi)發(fā)者賬號(hào)

在完成蘋(píng)果開(kāi)發(fā)者賬號(hào)的注冊(cè)后，你需要為即將上架到AppStore的版本重新創(chuàng)建一個(gè)選擇AppStore的選項(xiàng)。點(diǎn)擊“continue”繼續(xù)下一步。

二、準(zhǔn)備開(kāi)發(fā)環(huán)境

1. 點(diǎn)擊繼續(xù)后，你需要選擇用于開(kāi)發(fā)的AppID，這個(gè)AppID應(yīng)該是在步驟二中成功創(chuàng)建的。再次點(diǎn)擊“continue”以繼續(xù)。

2. 接下來(lái)，你需要選擇一個(gè)證書(shū)，這個(gè)證書(shū)應(yīng)該是在步驟一中已經(jīng)創(chuàng)建好的。完成選擇后，點(diǎn)擊“continue”。

三、設(shè)備選擇與描述文件生成

1. 在此步驟中，你需要選擇指定的設(shè)備，設(shè)備的數(shù)量上限是一百個(gè)。若此處沒(méi)有設(shè)備，請(qǐng)參照以下教程操作綠色框中的內(nèi)容，操作完成后點(diǎn)擊“continue”，可多次這樣操作以添加多個(gè)設(shè)備。已有設(shè)備的用戶，請(qǐng)忽略綠色框區(qū)域的內(nèi)容。

2. 接下來(lái)，你需要輸入描述文件名稱，并點(diǎn)擊“generate”生成。

3. 點(diǎn)擊“download”按鈕下載描述文件。至此，創(chuàng)建蘋(píng)果開(kāi)發(fā)者賬號(hào)的步驟已經(jīng)完成。

四、集成HbuilderSDK（離線打包必備）

前置條件：

1. 確保你的Xcode版本在12.1以上。建議升級(jí)到最新版本，以避免可能出現(xiàn)的問(wèn)題。

2. 下載Hbuilder，以便進(jìn)行后續(xù)的操作。

3. 在你的Mac電腦中下載最新的IOS平臺(tái)SDK，并確保HbuilderX的版本與SDK的版本一致，以避免彈窗提示。

五、官方SDK集成文檔

為了獲取更詳細(xì)的集成步驟和說(shuō)明，建議查閱官方SDK集成文檔。這里提供了全面的指南和解決方案，幫助你順利集成HbuilderSDK。

接下來(lái)，你就可以開(kāi)始集成HbuilderSDK了。按照上述步驟操作，你應(yīng)該能夠成功創(chuàng)建蘋(píng)果開(kāi)發(fā)者賬號(hào)并集成HbuilderSDK。如果在過(guò)程中遇到任何問(wèn)題，都可以參考官方文檔或者尋求社區(qū)的幫助。