h5如何不依託於app

① angular +ionic 如何打包成h5站點，不需要打包成app

一、先添加平台

二、打包

ioniccordovabuild橘唯browser

在項目中的platforms中的高伍物browser文件夾中就會有www文件戚液夾

② 如何讓 H5 體驗接近 APP：（一）觸摸反饋

1、背景：
在開發h5頁面的時候給頁面一些可點雹沖早擊元素加上一些觸摸反饋，可以大幅度提升頁面的整體體驗源雀，使h5頁體驗更為接近APP
2、在頁面上添加觸摸反饋的三種方案：
（1）active 偽類
w3c 標准里對 active 的描述都是基於 mouse 事件的判納，沒有說明如何支持 touch事件：瀏覽器的理解和實際支持參差不齊
iOS 中需要綁定一個 touchstart 事件來激活：

③ H5必知必會之與App交互

奇技指南

2018年11月26日發表的「360 AI音箱H5開發實踐」一文中，曾簡單提到「與Native交互」。本文將就此主題深入探討H5與App交互的幾種常見模式。

本文內容如下：

H5，在中國被專門用來指代開發內嵌於手機應用中的網肆襪頁的技術，外國好像並沒有這個說法。從技術上講，H5是HTML5即Hyper Text Markup Language（超文本標記語言）第5版的簡稱。而HTML只是開發網頁要用到的多種技術之一。除了HTML，還要用CSS設計界面，用JavaScript實現交互，甚至要用Node.js實現服務端邏輯。為什麼H5會被用來籠統地指代這些技術呢？我猜一是因為它簡單，二是移動端網頁開發技術又恰好需要這么一個概念。

移動端網頁運行在手機應用內嵌的瀏覽器引擎中，這個沒有UI的內核容器統稱WebView，即iPhone的UIWebView（iOS 2.0–12.0）、寬指WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。總之，WebView就是在手機應用中運行和展示網頁的界面和介面（神奇的是，英文Interface，既可以翻譯成「界面」也可以翻譯成「介面」）。

H5與原生應用的交互都是通過原生應用中的WebView實現的。通過這個環境，H5可以調用原生應用注入其中的原生對象的方法，原生應用也可以調用H5暴露在這個環境中的JavaScript對象的方法，從而實現指令與數據的傳輸。

比如，在Android應用中，WebView類有一個公有方法addJavascriptInterface，簽名為：

調用這個方法可以向WebView中以指定的名稱name注入指定的Java對象object。這樣，WebView中的JavaScript就可以通過name調用object的方法。比如：

在iOS或macOS中，需要通過創建WKWebView類的實例在應用中嵌入網頁，交互過程類似。

所謂基礎介面，就是首先要規定原生應用和JS分別在WebView里注入/暴露一個什麼對象：

並約定在這兩個對象上分別可以調用什麼方法：

顧名思義，NativeBridge.callNative是由JS調用向Native傳遞指令或數據的方法，而JSBridge.callJS則是由Native調用向JS傳遞指令或數據的方法。方法簽名中的參數含義如下：

基礎介面只有兩個對象和兩慎雹配個方法，JS與App間的互操作則通過action和params來擴展和定義。

對於JS而言，雖然這里只定義了一個對象一個方法，但實踐中，可以把action對應方法的實現附加到JSBridge上，只要把callJS實現為一個分發方法即可，比如：

這樣，所有對callJS的調用，都會轉化成對JSBridge上相應action方法的調用，優點是只需一行代碼。

另一種實現方式是通過switch...case語句實現調用分發，比如:

這樣實現的優點是所有方法一目瞭然，當然同樣也是把所有相關介面都附加到同一個JSBridge對象上。

以上兩種實現模式各有利弊。

由JS發起的單向調用App的操作，主要涉及載入URL和切換到原生界面，可對應如下action：

loadUrl調用的參考協議如下：

這里NativeBridge是App的原生對象，其callNative方法被調用時，會收到一個對象（字典/映射）參數。根據這個參數的action屬性的值，App可知需要執行的操作是載入URL。於是再取得params屬性中的url，發送請求即可。

loadContent調用的參考協議如下：

同上，這里通過params向App傳遞了必要參數，App負責切換到相應的原生界面。

由App發起的單向調用JS的操作，主要涉及用戶點擊後退按鈕（<），可對應如下action：

can_back調用的參考協議如下：

此調用返回的值示例如下：

顧名思義，can_back用於App詢問JS：在返回上一級界面前，是否彈窗提示用戶？

返回值中的can如果是true，則直接返回，不提示；如果是false，則彈出一個確認框，請用戶確認。另一個值target是與App約定的返回目標，比如prev表示返回上一級，top表示返回頂級，等等。

雙向調用是JS先調用App，然後App在完成操作後再調用JS，雙向通常都需要傳遞數據。雙向調用主要涉及JS調用App原生組件和用戶點擊右上角按鈕，可對應如下action：

loadComponent的參考協議如下：

在這個例子中，涉及JS調用App顯示其實現的城市選擇組件：type: 'location'，用戶選擇完城市之後，App再調用set_location，將用戶選擇的城市名稱傳給JS：

JS根據拿到的值更新界面，完成一次雙向調用。另一個例子是JS調用原生的日期選擇組件，與此類似。

為什麼叫displayNextButton？因為根據具體業務場景，可能存在如下三種情況：

displayNextButton協議的參考實現如下：

以上代碼示例表明，JS調用App，告訴App顯示「下一步」按鈕，但是要禁用變灰，因為enable: false。如果傳遞的是enable: true，那麼用戶就可以點擊「下一步」按鈕了。點擊之後，App再調用JS的save_form。最後，如果不想顯示按鈕，可以傳遞name: ''。

下面重點說一下用戶點擊「下一步」按鈕，App調用save_form的場景。此時也分兩種情況：

如果是JS通過App保存數據——可能因為App端實現了數據寫入必需的加密機制——那麼，JS可以在App調用save_form時將約定好的數據返回給App，由App去保存數據。

如果是JS直接保存數據，比如通過Ajax，那麼在保存完數據之後，則還需要調用前面所說的App暴露的loadUrl或loadComponent方法，以告知App切換界面。當然這種情況下會出現第三次調用，但仍然屬於雙向調用。

本文介紹了JS與App交互的幾種模式，而且只討論了JS端的實現。在開發實踐中，團隊各端總會面臨哪一端主導的問題。本文展示的參考實現就是H5端主導的一種實現形式。H5主導的特點是把主要業務邏輯都封裝到WebView中，App主要協同配合，而優點是業務邏輯的變更不會蔓延到App。畢竟相對於H5，App的安裝部署模式會造成多版本共存問題，需要盡可能控制新版本。假如由App端主導，將邏輯封裝在App端，勢必造成版本不受控，給整個項目或產品埋下隱患。

當然，事無絕對。具體情況還要具體分析。而且，哪方主導有時候也取決多方面因素。實踐中還是要因人、因時、因勢制宜。

④ H5頁面與原生App（安卓，IOS）交互

       在客戶端項目中，同一個app會開發成兩個版本，一個是安卓版本，一個IOS版本，公司必須有兩個開發團隊（一個安卓團隊，一個IOS團隊）來進行開發，這樣一來，開發成本非常之高。所以，往往在實際項目-中，會嵌套很多H5頁面，一個H5頁面同時兼容安卓和IOS兩個系統 ，這樣一來，大大減少了開發成本，前端開發頁面就必須和原生進行交互。

1. 頁面開發      —— 前端開發人員將所有的頁面按照移動webappp進行開發，做好不同屏幕的適配（寬度100%,視口為移動端視口 (快捷方式meta:vp  tap），字體適配rem單位，設置html根標簽的font-size然後根據媒體查詢判斷設備屏幕大小進而設置html根標簽的不同汪盯fontsize，去除移動端高亮顯示；小圖標要善於使用字體圖標（常用的字體圖標庫有阿里巴巴矢量圖），改變input標簽的默認樣式可以採用隱藏input,然後通過字體圖標來控制前面的圖標，就可以做成自己想要的圖標效果）

2.前端頁面部署 —— 設置好入口文件（原生一進來就進入的頁面，命名為index.html），部署到對應的伺服器上，通過網址就能夠訪問到頁面，將網址給app客戶端開發人員，他們將app配置好環境後講頁面嵌套在app中。

3.進行數據對接：兩種對接方式（1）.前端頁面自己通過ajax去後台拉數據，然後自己在頁面上使用再提交給後台。前提是原生需要將對應的設備號，加密方式，請求數據所需要的各種參數通過回調函數傳遞給H5頁面，H5頁面拿到這些數據困基和後直接調後台的借口、獲取到數據。（2）.前端頁鋒辯面不用自己去後台拉取數據，而是通過回調函數，獲取到原生app拉取的數據，前端頁面將這些數據處理後又通過回調函數交給app，再又app發送給後台。兩種調用的優劣比較：如果H5頁面及數據不是很多，使用第二種方式比較合理，不用H5頁面請求數據（不用封裝請求，不用加密數據），不使用框架，大大減少了頁面的大小，提高性能及用戶體驗。如果涉及到的前端頁面非常多，數據交互比較復雜的話，就必須使用第一種對接方式了，app只需要將設備號，加密規則，參數傳遞給H5，H5根據頁面需求自己向後台拉去和請求數據，直接交互，不再通過app進行轉接，減小復雜程度。

⑤ h5頁面和app的區別

h5頁面和app的區別如下：

1、開發不同。

對於app開發，每一種移動操作系統都要重新開發一個app，比如安卓操作系統就需要基於Java開發app，而蘋果操作系統就需源仔要基於Objective-C開發app。

h5頁面是運行再瀏覽器端的應用，所以無論是什麼操作系統只要可以打開瀏覽器就可以運行h5頁面，因此不需要基於操作系統額外開發。

2、運行能力有差距。

移動app可以完全發揮手機硬體的優勢，比如攝像頭、獲取本地信息等等，而h5頁面則無法發揮這些功能，只能使用少量的硬體功能。

3、獲取來源不同。

移動app需要用戶下載安雹螞汪裝到自己的移動端手機上才可以使用，而h5頁面則沒有這些要求，只需要手機可以訪問瀏覽器就可以使用h5頁面，這一點比移動端app方便不少。

4、存儲容量不同。

由於移動端app需要下載安裝到本地才可以運行，所以與之相之是需要佔用手機本地內存，且運行過程中會產生大量的臨時數據或緩存數據也會佔用大量的物亂存儲空間。

h5頁面由於運行再瀏覽器端，所以它消耗的是伺服器端的內存，而不需要佔用本地有限的內存空間，為用於節省了大量空間，但是缺點是對網路要求較高。

⑥ 紅旗H5 的智聯怎麼關閉。就是不允許手機APP 操控汽車

可以在汽車的控制面板中關閉連接手機的許可權。

紅旗智聯APP，可以通過手機查看車輛的故障檢測、保養、胎壓、違章等，且可以對車輛進行遠程的控鎮虛搭制，比如燈光、空調等，隨著漸入炎熱的夏季，提前開啟空調的功能很是實用。

除了手機互聯之外，H5還具備了手機遠程操控的功能，通過手機，用戶們可以對發動機、空調、車鎖和座椅加熱進行控制。譽蠢

介紹

2022款紅旗H5，官方指導售價為：14.58-19.08萬元，此次新車一共有6款配置車型可供選擇，作為我們國內為數不多的在售B級轎車，紅旗H5一直都有著較為良好的口碑表現。

在造御拿型設計上，2022款紅旗H5基本上延續了現款車型的設計風格，前臉大尺寸的直瀑式進氣格柵，極具視覺沖擊力，加上兩側採用LED光源的前大燈，以及引擎蓋上線條的勾勒，從而給人一種優雅大氣的視覺感受。

⑦ h5做app和原生app有什麼區別

原生app和h5做的app的區別：
1、開發方面的區別

目前React Native開發越來越火，微信小程序是基於React Native開發的，體驗接近原生APP，發展前景值得重視。不過好在現在非原生APP同樣可以調用藍牙、相機等硬體，也能順利發布到蘋果APP store。
移動Web App
1、因為運行在移動設備的瀏覽器上，所以只需要一個開發項目
2、這種應用可以使用HTML5,CSS3以及JavaScript以及伺服器端語言來完成(PHP,Ruby on Rails,Python)
3、這里可沒有標準的SDK，基本任意選擇別忘了有一些跨平台的開發工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。
原生App
1、每一種移動操作系統都需要獨立的開發項目
2、每種平台都需要獨立的開發語言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等
3、需要使用各自的軟體開發包，開發工具以及各自的控制項
2、能力方面的區別
移動Web App
只能使用有限的移動硬體設備功能。
原生App
能夠與移動硬體設備的底層功能，比如個人信息，攝像頭以及重力加速器等等。對於這一點感觸很深刻，2016年做新年H5營銷小活動的時候，就是因為沒有考慮到H5不能使用移動硬體端重力加速器而導致臨時替換設計方案。
3、獲取方法的區別
移動Web App
1、從移動設備上的瀏覽器訪問
2、不需要安裝額外的軟體
3、軟體更新只需要伺服器就夠了
4、因為現在沒有什麼商品或賣場提供這種App，不過一般都是嵌套在系統內部，或者內部系 統中使用
5、跨平台開發，用戶不需要去賣場來下載安裝App
6、需要過度依賴網路，沒有任何緩存數據
7、任何時候都可以發布App，因為根本不需要官方賣場的審核
8、如果你已經有了一個Web App，你可以使用 responsive web design來輔助改進
9、所有的用戶都是用同樣的版本
原生App
1、直接下載到設備
2、以獨立的應用程序運行(並不需要瀏覽器)
3、用戶必須手動去下載並安裝這些原生App
4、有一些商店與賣場來幫助用戶尋找你的App，app store裡面應有盡有。
5、原生型APP應用的安裝包相對較大，包含UI元素、數據內容、邏輯框架;
6、手機用戶無法上網也可訪問APP應用中以前下載的數據。
7、原生型的APP可以調用手機終端的硬體設備(語音、攝像頭、簡訊、GPS、藍牙、重力感應等)
8、APP應用更新新功能，涉及到每次要向各個應用商店進行提交審核。
9、用戶可以自由地選擇是否更新軟體版本，所以會出現不同用戶同時使用不同版本的情況
如果企業選擇商領雲進行定製開發原生app，需要單獨開發兩套系統即ios和安卓系統。如果是通過商領雲的在線製作app，則可以同時生成ios和安卓系統的app，並且還可以製作小程序、移動網站和微商城，非常方便，而且價格也只需幾萬左右，具體需要看功能需求。