tag h5頁面

標籤
貢獻12
63
08:42 AM · Nov 05 ,2025
jdcdevloper 頭像 mihuartuanr 頭像 fuguichen 頭像 ninazhang 頭像 kobe_fans_zxc 頭像 dahaihenhaokan 頭像 icecreamlj 頭像 musicfe 頭像 pantao 頭像 xiaofeixiang_63ec941cad48a 頭像 ihengshuai 頭像 _62145ea2ae8a9 頭像

@h5頁面 / 博客 RSS 訂閱

jdcdevloper 頭像

京東雲開發者 - 百億補貼通用H5導航欄方案 | 京東雲技術團隊

背景 在移動端頁面中，由於屏幕空間有限，導航條扮演着非常重要的角色，提供了快速導航到不同頁面或功能的方式。用户也通常會在導航條中尋找他們感興趣的內容，因此導航條的曝光率較高。在這樣的背景下，提供一個動態靈活的導航條，為產品賦能，變得尤其重要。 使用原生導航欄現狀 拿iOS原生導航條為例，導航條作為頁面進出棧的根視圖連接器，以及生命週期的管理器。尤其是在作為webView Controller的父容

導航欄 , 導航菜單 , h5頁面 , 前端 , html5

收藏 評論

fuguichen 頭像

fuGUI - UniApp 中實現 App 與 H5 頁面相互通信

前言 在使用uni-app進行套殼打包的app，需要和web-view引入的網頁（H5）相互通信，在此記錄分享下。 web-views官方文檔 H5 向 App 通信 H5 頁面代碼 1、在官網中下載最新的 uni.webview.js，uni.web-view.js是一個可以幫助我們在非uniapp的項目中使用uni-app方法的庫。（下載地址） 2、在子應用的index.ht

uniapp , h5頁面

收藏 評論

ninazhang 頭像

大甜甜 - IOS系統下開啓鍵盤後頂部輸入框掉下來了

經過初步排查，發現幾個現象： 1 只在頁面總長度超過屏幕長度時發生。 2 只在開啓鍵盤時發生。 3 只在固定定位的頁面頂部輸入框獲取焦點（focus）時發生。 4 只在屏幕有滾動時發生。 缺陷有兩個現象： 1 頂部DOM掉下來了，在大約屏幕中間的位置。 2 此時如果繼續滾動屏幕，頂部DOM不會再維持當前位置。也就是説，它“進入”了頁面的文檔流。 我們初步判斷是頂

h5頁面 , ios

收藏 評論

kobe_fans_zxc 頭像

高級BUG開發 - vue3+vite項目h5/web配置瀏覽器自適應適配（postcss-px-to-viewport-8-plugin）

注意，項目中不要寫行內樣式 vue3+vite項目配置適配H5主要安裝一下兩個插件： amfe-flexible（主要用於動態設置根元素字體大小(rem)，以根據屏幕尺寸進行自適應佈局） postcss-px-to-viewport-8-plugin（將px單位轉換為rem） 開始配置： 第一步、安裝amfe-flexible插件 cnpm install amfe-flexi

縮放 , 瀏覽器 , vue3 , h5頁面 , 適配器模式

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 基於 prefetch 的 H5 離線包方案 | 京東雲技術團隊

前言 對於電商APP來講，使用H5技術開發的頁面佔比很高。由於H5加載速度非常依賴網絡環境，所以為了提高用户體驗，針對H5加載速度的優化非常重要。離線包是最常用的優化技術，通過提前下載H5渲染需要的HTML/JS/CSS資源，加載時直接使用本地緩存資源避免額外的網絡請求提高加載速度。本文主要是介紹團隊在離線包技術方案上的探索，以及基於prefetch的離線包實現方案如何減少維護成本和開發成本。 現

prefetch , 小程序 , Android , h5頁面 , ios

收藏 評論

dahaihenhaokan 頭像

大海很好看 - H5網頁封裝成iOS蘋果IPA文件流程

大家好，我是咕嚕土豆，很高興又和大家見面了。今天我們來了解一下H5網頁封裝成IPA文件的流程。首先我們應該瞭解一下將H5網頁封裝成蘋果IPA文件是為了什麼：將H5網頁封裝成IPA文件的主要目的是將網頁應用程序（Web App）轉換為移動應用程序（iOS App），以便在蘋果的iOS設備上進行安裝和運行。這種封裝通常通過將H5網頁嵌入到一個原生的iOS應用程序中實現。 下面我為大家詳細介紹一下

h5頁面

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 構建動態交互式H5導航欄：滑動高亮、吸頂和錨點導航技巧詳解

功能描述 產品要求在h5頁面實現集錨點、吸頂及滑動高亮為一體的功能，如下圖展示的一樣。當頁面滑動時，內容區域對應的選項卡高亮。當點擊選項卡時，內容區域自動滑動到選項卡正下方。 佈局設計 css 佈局 為了更清晰的描述各功能實現的方式，將頁面佈局進行了如下的拆分。 ★ 最外層的元素定義為 contentWrap，是使用 Intersection 定義的觀察根元素。 ★ 所有可縱向滑動的元素包

導航欄 , 錨點 , h5頁面 , 前端 , Javascript

收藏 評論

musicfe 頭像

雲音樂技術團隊 - 淺嘗IM方案在H5活動場景中的應用

本文作者：入雲 前言 説起 IM，大家應該都或多或少了解過一些，一般被熟知是在一些聊天場景裏應用的比較多；而一般情況下我們常接觸的業務中大多是做一些接口的查詢提交之類的操作，用正常的 Ajax 請求就足以滿足需求，比較難接觸到 IM 這種方案。 但如果涉及到一些需要頻繁更新數據的業務場景，使用常規接口查詢難免會給服務端造成比較大的性能開銷，並且數據更新的延遲也會很大；嘗試使用 IM 則可以讓我們在

im , websocket , h5頁面 , 前端

收藏 評論

pantao 頭像

大鬍子民工潘半仙 - 微信小程序 webview 與 h5 通過 postMessage 實現實時通訊的實現

原文：https://pantao.parcmg.com/pre... 在做 React Native 應用時，如果需要在 App 裏面內嵌 H5 頁面，那麼 H5 與 App 之間可以通過 Webview 的 PostMessage 功能實現實時的通訊，但是在小程序裏面，雖然也提供了一個 webview 組件，但是，在進行 postMessage 通訊時，官方文檔裏面給出了一條很變態的説明：

小程序 , webview , postmessage , h5頁面 , html5

收藏 評論

mihuartuanr 頭像

米花兒團兒 - 使用Flexible & swiper進行移動Web開發

移動端適配方案flexible.js 出發點 事故的開始總是有原因的，那思考一下，為什麼使用Flexible? [ ] 為了rem佈局？ 為什麼要rem佈局 —— 高度還原 [ ] 移動端適配? 為什麼移動端適配要用Flexible —— 同等佔比 [ ] 什麼是移動端適配？ 最初點是設計圖的高度還原！！！ 以750*1334設計稿(iPhone6)為準，期望每一個設計元件在iPho

vue.js , mobile , 移動端web , swiper.js , h5頁面

收藏 評論

mihuartuanr 頭像

米花兒團兒 - 手機hybrid應用H5開發

H5開發 引入flexible.js 在*.html的head標籤中引入script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"/script Note：HTML中無需設置meta name="viewport" content="width=device-width, initia

hybrid-app , h5頁面 , scheme , 調試

收藏 評論

xiaofeixiang_63ec941cad48a 頭像

小飛象 - 分析 | H5常見的業務風險及防護思路

H5 目前的技術已經趨於成熟。它開發週期短開發週期短，投入和維護成本低，兼容性好。根據需求，H5可以製作文字、圖形、音頻、視頻，因此可以用於PC網站、手機網站、微站、Web App、輕應用。而且由於最近AIGC的大火，它的製作成本變得更低。 H5的應用場景主要包括展示、營銷、調查、遊戲等等。 不過作為重要的移動互聯網服務載體，H5在給用户帶來便利體驗的同時，也讓企業面臨信息泄露、惡意劫持、薅羊毛等

漏洞 , csrf , h5頁面 , 安全 , xss

收藏 評論

ihengshuai 頭像

大衞talk - H5應用抓包及調試技巧

由於圖片和格式解析問題，可前往 閲讀原文 在現代移動互聯網時代，H5 應用以其跨平台、輕量化、快速迭代的特性，成為移動開發的重要一環。然而，隨着功能的複雜化和用户體驗要求的提升，H5應用的調試也面臨着諸多挑戰，如設備多樣性、網絡環境複雜性以及性能瓶頸等。為了應對這些問題，開發者需要掌握不同的調試工具及場景使用才可應對不確定結果。本篇就帶大家瞭解下具體的調試過程 瀏覽器手機模式 瀏覽器的手機模式調試

抓包解密 , debugging , h5頁面 , 前端

收藏 評論

_62145ea2ae8a9 頭像

媆媆 - h5登錄

可參考(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html) 一、用測試appid 1、獲取一個測試的appid:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=sho... （1）

h5頁面 , 前端

收藏 評論