微信小程序和HTML5有什么區(qū)別如何互相內(nèi)嵌使用你有沒有過這種糾結(jié)公司推一個運(yùn)營活動產(chǎn)品經(jīng)理說“做個小程序吧”你一看需求就是個落地頁加表單明明H5一天就能上線反過來業(yè)務(wù)要沉淀會員、要發(fā)訂閱消息你卻說不如寫個H5套個殼結(jié)果在微信里被各種能力限制折磨到懷疑人生。這種糾結(jié)我太熟了。我前前后后做了十幾個小程序也寫了大量H5活動頁最常被問的問題就是“微信小程序和HTML5到底有什么區(qū)別能不能互相內(nèi)嵌”。這兩個東西看著都在手機(jī)里打開但設(shè)計思路、運(yùn)行環(huán)境、能力邊界完全是兩套玩法。這篇文章我不打算來一段教科書式的對比而是直接站在干活的人角度把區(qū)別講清楚把選型的判斷邏輯說透再把內(nèi)嵌的實(shí)操姿勢和踩坑經(jīng)歷全部分享出來。打算做微信生態(tài)項(xiàng)目的研發(fā)、前端或者正在為畢設(shè)選型的學(xué)生都能從里面找到可以直接用的東西。1. 微信小程序和HTML5的定位差異不只是“運(yùn)行環(huán)境”不同1.1 一個是生態(tài)里的“公民”一個是互聯(lián)網(wǎng)的“通用語言”很多人理解兩者的區(qū)別停留在“小程序跑在微信里H5跑在瀏覽器里”。這話沒錯但沒說到根上。真正的差異是小程序是微信生態(tài)里的“公民”H5則是互聯(lián)網(wǎng)上的“通用語言”。為什么這么說小程序從出生開始就被微信的規(guī)則體系包圍著需要注冊、審核、類目資質(zhì)要遵守微信的使用規(guī)范有包體積限制甚至因?yàn)檫`規(guī)會被暫停支付功能。我見過不少項(xiàng)目前腳代碼寫得沒問題后腳因?yàn)轭惸坎粚Ρ幌拗屏酥Ц赌芰τ脩粼陧撁胬锵聠伟胩炀褪菑棽怀鍪浙y臺。這種約束在H5世界里是不存在的——任何一個人只要有服務(wù)器和一個備案過的域名就能把頁面鏈接甩到任何渠道。但這不代表自由就好。H5最大的痛點(diǎn)是“身份缺席”。它在微信內(nèi)置瀏覽器里是一張網(wǎng)頁沒辦法像小程序那樣直接拿到用戶在小程序里的身份也調(diào)不到那些微信專屬能力。你可以用公眾號網(wǎng)頁授權(quán)的形式搞到openid但做不到小程序那種“點(diǎn)開就用”的輕快感。你要是做過微信生態(tài)里的H5一定被“請?jiān)谖⑿趴蛻舳舜蜷_”“當(dāng)前頁面無法使用微信支付”這類提示支配過。所以從定位上講如果你要做的是交易閉環(huán)、服務(wù)閉環(huán)并且希望用戶在微信里完成整個流程小程序天然更合適如果你做的是內(nèi)容展示、外部渠道引流、活動落地頁H5幾乎是無腦選擇。1.2 運(yùn)行機(jī)制、加載體驗(yàn)、開發(fā)體驗(yàn)的差異差異不光在“身份”上技術(shù)底層的差異也直接影響產(chǎn)品體驗(yàn)。小程序雖然是運(yùn)行在微信客戶端里的但它不是簡單的“網(wǎng)頁套殼”。微信小程序采用雙線程模型邏輯層跑在JSCore或V8引擎上UI層由WebView渲染。邏輯層不直接操作DOM而是通過一套數(shù)據(jù)綁定機(jī)制跟UI層通信。這種架構(gòu)帶來的好處是頁面切換更接近原生App的流暢度部分頁面可以降低加載成本。代價是你不能像寫網(wǎng)頁那樣隨手操作DOM一切數(shù)據(jù)更新都要通過setData來完成數(shù)據(jù)量太大還會明顯卡頓。H5就是另一套邏輯。它直接跑在瀏覽器或WebView里HTML、CSS、JavaScript一把梭但頁面的渲染性能、切換流暢度完全取決于宿主WebView的優(yōu)化程度。微信內(nèi)置瀏覽器還做了很多白名單和緩存限制你辛辛苦苦寫的PWA離線能力在微信里經(jīng)常會失效。很多H5頁面體驗(yàn)不如小程序不是寫H5的人技術(shù)不行而是這個運(yùn)行環(huán)境本身就決定了它的上限。開發(fā)體驗(yàn)上差別也很大。小程序的語法是自定義的WXML、WXSS、JS和JSON配置雖然現(xiàn)在也能用TypeScript和一些編譯型框架但整體調(diào)試離不開微信開發(fā)者工具發(fā)布流程要走審核、灰度、全量發(fā)布。H5則可以用任何現(xiàn)代前端框架Vue、React隨便選部署到自己的服務(wù)器發(fā)版不需要等任何人審批。這一點(diǎn)在出線上尤其實(shí)用——我做過一個H5活動頁上午改完代碼中午就能把新鏈接發(fā)給運(yùn)營小程序想做到這種效率難度大得多。1.3 從高頻熱搜看真實(shí)痛點(diǎn)和選型信號你看網(wǎng)上關(guān)于小程序和H5的高頻熱搜很少直接是“哪個好”更多是具體問題比如“小程序微信支付v3對接”“swiper嵌套video全屏錯位”“頂部導(dǎo)航欄高度”“自定義標(biāo)題上邊距怎么弄”。這些詞背后藏著真實(shí)開發(fā)者的痛苦不是不知道怎么選型而是選了之后發(fā)現(xiàn)某個能力做不出來或者做出來以后一堆坑。拿“頂部導(dǎo)航欄高度”來說這個問題在小程序里幾乎人人都會遇到。小程序原生導(dǎo)航欄和H5頁面里的header不是一回事微信各版本、各機(jī)型的導(dǎo)航欄高度有細(xì)微差異自定義導(dǎo)航欄時還得手動適配狀態(tài)欄高度。你要是沒處理過真機(jī)上一跑標(biāo)題要么頂?shù)綘顟B(tài)欄里要么被膠囊按鈕遮擋。類似這種細(xì)節(jié)在H5里反而不是很常見——瀏覽器本身已經(jīng)幫我們處理了大部分。再說“小程序微信支付v3對接”為什么這個問題這么火因?yàn)楹芏嗳四J(rèn)“小程序內(nèi)嵌H5之后H5里也能直接調(diào)起微信支付”結(jié)果繞了一大圈發(fā)現(xiàn)根本沒有那么簡單。小程序內(nèi)嵌的H5頁面受限于運(yùn)行環(huán)境支付能力和普通瀏覽器里的H5完全不一樣。這些問題不是孤立的它們會直接影響選型決策。你在設(shè)計階段就得想清楚核心功能要讓微信原生小程序來做還是可以放到網(wǎng)頁里2. 到底該選小程序還是H5我常用的取舍邏輯2.1 三個判斷維度能力依賴、獲客路徑、迭代速度我不喜歡給出一張萬能的“選型表”因?yàn)槊總€項(xiàng)目的約束條件不一樣。但在實(shí)際工作中我基本用三個維度去衡量大家可以照著做自己的決策。第一個維度是“是否強(qiáng)依賴微信生態(tài)能力”。如果你的產(chǎn)品要用微信登錄、微信支付、訂閱消息、藍(lán)牙、NFC、掃碼、地理位置這種能力而且要求體驗(yàn)鏈路完整那直接上小程序不要想著用H5硬磕。H5在微信內(nèi)置瀏覽器里能調(diào)的JS-SDK能力是有限的有些能力還要用戶手動授權(quán)體驗(yàn)非常割裂。第二個維度是“用戶從哪里來要到哪里去”。如果流量主要靠公眾號文章、群聊分享、搜索引擎、短信、外部廣告投放那H5天然更有優(yōu)勢因?yàn)橐粋€鏈接就能鋪到幾十個渠道。小程序雖然也有二維碼和分享卡片但很多非微信渠道里點(diǎn)開小程序鏈接是很別扭的。反過來如果流量來自線下掃碼、微信搜一搜、導(dǎo)購聊天場景小程序更順。第三個維度是“迭代速度和違規(guī)風(fēng)險”。小程序從代碼提交到線上審核哪怕一切順利也要預(yù)留幾天時間遇到版本駁回、類目資質(zhì)問題時間根本不可控。H5沒有上線審核這一步出了問題當(dāng)天就能修復(fù)。但H5在微信里也并非絕對自由尤其涉及到支付、分享類功能時風(fēng)控攔截一樣存在。2.2 典型業(yè)務(wù)場景怎么選拿電商舉個例子。核心用戶在微信公眾號、朋友圈觸點(diǎn)里看到內(nèi)容然后跳轉(zhuǎn)到商品詳情頁購買這種情況我一般建議小程序?yàn)橹?、H5為輔。小程序有微信支付、模板消息這類促轉(zhuǎn)化的能力“下單后服務(wù)號推送一條發(fā)貨通知”的體驗(yàn)是網(wǎng)頁很難做到的。H5可以在廣告投放、外部渠道承擔(dān)引流落地頁的角色。至于內(nèi)容社區(qū)、資訊閱讀這類場景H5會更舒服。內(nèi)容類產(chǎn)品講究快速迭代、低門檻分享一個鏈接發(fā)出去誰都能看不需要下載也不需要先登錄個微信。如果后續(xù)要做付費(fèi)訂閱、會員體系再考慮把用戶的留存部分遷到小程序里用來發(fā)通知、做每日簽到。工具類應(yīng)用比如課程表、考證刷題、成績查詢我傾向用小程序。因?yàn)檫@類產(chǎn)品核心是“低頻但必須提醒”小程序的訂閱消息功能太合適了。很多畢設(shè)項(xiàng)目比如“基于微信小程序的駕校模擬考試系統(tǒng)”“校園跑腿系統(tǒng)”選小程序不是因?yàn)樾〕绦蚨喔呒壎沁@些需求天然包含表單填寫、列表查詢、支付、消息通知小程序把這些串成了一個完整閉環(huán)后端用SpringBoot提供接口就行。還有一個場景很多人忽略企業(yè)內(nèi)部系統(tǒng)、運(yùn)營后臺。這類頁面經(jīng)常要改用H5放在內(nèi)網(wǎng)或加了權(quán)限控制的服務(wù)器上簡直不要太爽。你要是非把它做成小程序每次改需求都走審核運(yùn)營和產(chǎn)品會把你“供”起來的。2.3 技術(shù)棧的影響uniapp兩套都能出不代表不用取舍現(xiàn)在很多團(tuán)隊(duì)喜歡用uniapp一把梭一套代碼同時發(fā)布成小程序和H5。這個思路本身沒毛病能極大降低中小團(tuán)隊(duì)的成本。我之前有個項(xiàng)目就用uniapp開發(fā)小程序端和H5端共用一套業(yè)務(wù)代碼效率確實(shí)高。但要有個清醒認(rèn)識uniapp解決的是“工程層面的復(fù)用”解決不了“平臺能力的差異”。哪怕同一套代碼編譯成兩端你在小程序端可以爽快使用藍(lán)牙、NFC等原生能力H5端該沒有還是沒有。更麻煩的是兩邊會互相拖累為了兼容H5UI層可能沒法充分使用小程序的原生組件為了兼容小程序H5端又沒法使用部分瀏覽器特性。所以我的建議是用uniapp立項(xiàng)沒問題但開場之前就要明確主戰(zhàn)場在哪里。主打微信生態(tài)就優(yōu)先保證小程序端體驗(yàn)H5端保證功能和數(shù)據(jù)同步即可。千萬別追求兩端“完全一致”那是給自己挖坑。3. 互相內(nèi)嵌怎么做兩種主流姿勢都給你捋清楚技術(shù)選型不是非黑即白很多時候兩邊要配合著用。下面這段是整篇文章的實(shí)操核心我會把兩種內(nèi)嵌方向的做法講清楚同時把過程中的關(guān)鍵限制也說破。3.1 小程序里嵌入H5web-view組件全流程小程序官方提供了web-view組件可以直接把整個頁面鋪成一個內(nèi)嵌瀏覽器窗口。用法看起來很簡單但前置條件特別多我一步步說。第一步你要有一個HTTPS且已經(jīng)ICP備案的域名域名要支持從小程序的web-view里訪問。為什么強(qiáng)調(diào)HTTPS因?yàn)樾〕绦驅(qū)Π踩髽O高非HTTPS域名在實(shí)機(jī)上大概率加載不出來。第二步在小程序管理后臺的“開發(fā)-開發(fā)設(shè)置-業(yè)務(wù)域名”里把你這個域名配置進(jìn)去。配置的時候需要下載一個校驗(yàn)文件放到網(wǎng)站根目錄微信會去驗(yàn)證歸屬權(quán)。這一步很容易被忽略我見過有人代碼完全沒問題就是業(yè)務(wù)域名沒校驗(yàn)web-view一直白屏。第三步在頁面的WXML里寫web-view srchttps://yourdomain.com/pages/activity?id123456tokenxxx bindmessageonMessage/web-viewsrc就是要加載的H5地址你可以通過URL參數(shù)的方式往頁面里傳一些初始數(shù)據(jù)。bindmessage用來接收頁面里通過postMessage傳回來的消息。這里有幾個關(guān)鍵限制要提前了解。web-view組件會自動占滿整個頁面它不是頁面里的一個普通組件沒法放在什么“上半屏”“下半屏”里。還有web-view里面加載的H5頁面運(yùn)行環(huán)境本質(zhì)上是網(wǎng)頁環(huán)境不是小程序環(huán)境所以H5頁面里無法直接調(diào)用wx.requestPayment這類小程序原生API。那怎么在小程序和web-view之間通信方向是從H5往小程序傳H5頁面里引入微信JSSDK然后調(diào)用wx.miniProgram.postMessage({ data: { type: orderSucceed, orderId: 202501012345 } });小程序端通過bindmessage事件收取消息。但這里藏著一個巨大的坑postMessage傳回來的消息不是實(shí)時觸發(fā)小程序的而是在特定時機(jī)才會上報比如用戶分享、返回上一頁、組件銷毀等。你要是想在支付成功后立刻拿到回調(diào)去更新小程序原生界面用這個方案會非常痛苦。正確的姿勢應(yīng)該是H5把狀態(tài)發(fā)給后端后端再通過一些消息通道告訴小程序或者干脆只在進(jìn)入下一頁面時攜帶狀態(tài)參數(shù)。3.2 H5里喚起小程序URL Scheme、URL Link和開放標(biāo)簽反方向的內(nèi)嵌——H5頁面里喚起小程序也有幾種官方姿勢根據(jù)觸發(fā)場景不同要選不同的方案。第一種是URL Scheme/URL Link。你可以調(diào)用微信的接口把一個小程序頁面地址轉(zhuǎn)換成一個可以識別的scheme或link然后在H5頁面里通過跳轉(zhuǎn)鏈接的方式喚起小程序。URL Scheme適用于微信內(nèi)H5、短信、郵件這類場景URL Link更適合在App或外部瀏覽器里喚起小程序。生成這個鏈接需要服務(wù)端調(diào)用微信接口需要AppID和AppSecret有的還需要先綁定關(guān)聯(lián)。第二種是微信JS-SDK里的開放標(biāo)簽叫wx-open-launch-weapp。這個只能在微信內(nèi)置瀏覽器里用好處是用戶不用離開當(dāng)前頁面就能直接喚起小程序體驗(yàn)不像跳轉(zhuǎn)scheme那么生硬。使用方式大概是wx-open-launch-weapp idlaunch-btn usernamegh_xxxxxxxx pathpages/index/index?fromh5campaignspring script typetext/wxtag-template style.btn { padding: 12px; }/style div classbtn打開小程序/div /script /wx-open-launch-weappusername是小程序的原始ID在公眾號后臺的“基本配置”里能找到path是打開的頁面路徑。重點(diǎn)說一下這個開放標(biāo)簽渲染出來的內(nèi)容必須用script typetext/wxtag-template包起來不能像普通HTML那樣直接寫子元素否則標(biāo)簽不生效。還有調(diào)用前要先通過wx.config注入配置把openTagList: [wx-open-launch-weapp]放進(jìn)去JSSDK才會認(rèn)識這個標(biāo)簽。我在項(xiàng)目里遇到過一個問題開放標(biāo)簽在開發(fā)者工具的“公眾號網(wǎng)頁測試環(huán)境”里點(diǎn)了沒反應(yīng)。后來排查發(fā)現(xiàn)這個標(biāo)簽對調(diào)用環(huán)境非常挑剔必須在真實(shí)微信客戶端里才能正常喚起。遇到這個問題不用慌直接拿手機(jī)、在微信里打開H5頁面掃碼測試就行。3.3 內(nèi)嵌場景的通信、鑒權(quán)和參數(shù)傳遞怎么做才穩(wěn)內(nèi)嵌最核心的技術(shù)難點(diǎn)不在“打開”而在“打通身份”。小程序用戶默認(rèn)是天然的微信登錄態(tài)但H5頁面沒有這個身份。最通用的做法是在小程序端拿到用戶登錄后的code或自定義token拼到web-view的URL參數(shù)里帶過去H5頁面通過這個token向后端換取自己的登錄態(tài)。舉個例子小程序端web-view srchttps://yourdomain.com/page?tokenxxx_encrypted_token/web-viewH5頁面加載后從URL里取出token再調(diào)用后端接口驗(yàn)簽驗(yàn)證通過后setCookie或者存localStorage后續(xù)請求都帶著登錄態(tài)。這里有幾個細(xì)節(jié)要注意。第一token不要塞太長URL長度有限制而且含有很多特殊符號時會導(dǎo)致地址解析失敗最好讓后端生成一個短token有效期也不宜過長。第二不要放太敏感的信息比如手機(jī)號、身份證這種放token就夠了其他信息讓H5通過接口去查。第三web-view里的H5是個獨(dú)立瀏覽器上下文它跟小程序之間沒有共享的storage和cookie你指望“小程序已經(jīng)登錄了H5自動就是登錄態(tài)”是不現(xiàn)實(shí)的必須走一遍token傳遞和鑒權(quán)。反過來如果你想從H5里帶數(shù)據(jù)到小程序除了之前說的postMessage更簡單輕量的方式是用URL參數(shù)。小程序側(cè)可以先拿到一個后端生成的短鏈然后跳轉(zhuǎn)到承載該短鏈的H5頁面H5內(nèi)部操作完之后跳轉(zhuǎn)到另一個約定好的小程序頁面路徑把狀態(tài)參數(shù)帶回去。這種方式不依賴實(shí)時通信邏輯上也更清晰。4. 內(nèi)嵌后必踩的坑導(dǎo)航、支付、視頻與調(diào)試4.1 web-view里的導(dǎo)航欄問題返回箭頭、自定義標(biāo)題、上邊距我搜資料的時候發(fā)現(xiàn)“微信小程序內(nèi)嵌h5 工具欄左側(cè)返回箭頭沒有了”這個問題特別多人問。很多人以為把H5塞進(jìn)小程序就萬事大吉了結(jié)果頁面里面的返回邏輯全亂了。原因是這樣的小程序內(nèi)嵌web-view后頁面頂端那一條導(dǎo)航欄是小程序原生導(dǎo)航欄它默認(rèn)會根據(jù)頁面棧提供返回箭頭。但如果你在H5內(nèi)部進(jìn)行了多級跳轉(zhuǎn)或者H5頁面自己寫了history路由微信在部分場景下會出現(xiàn)“返回箭頭消失”或者“按返回直接退出小程序”的詭異行為。為什么因?yàn)閣eb-view的頁面棧是獨(dú)立的它跟小程序的頁面導(dǎo)航棧并不是完全同步的。尤其是在uni-app這類跨端框架里有些同學(xué)為了隱藏原生導(dǎo)航欄用了custom-navigation模式結(jié)果web-view一進(jìn)去整個頂部全沒了。我的建議很簡單如果嵌入式H5只是個單頁活動在小程序里就保留原生導(dǎo)航欄設(shè)置好標(biāo)題返回按鈕交給系統(tǒng)處理別自己在H5里再加一個返回按鈕。如果H5內(nèi)部確實(shí)有跳轉(zhuǎn)層級那你就要在小程序原生導(dǎo)航欄上做自定義左上角按鈕或者干脆讓H5內(nèi)部完全接管導(dǎo)航小程序端隱藏導(dǎo)航欄。接著是“自定義標(biāo)題、上邊距”的問題。很多人做自定義導(dǎo)航欄的時候最常犯的錯誤是拿一個固定像素值硬編碼。不同機(jī)型的劉海屏、狀態(tài)欄高度都不一樣正確做法是從系統(tǒng)API里取const windowInfo wx.getWindowInfo(); const statusBarHeight windowInfo.statusBarHeight; // 導(dǎo)航欄內(nèi)容的安全高度 statusBarHeight 導(dǎo)航欄本身高度再用padding-top: calc(環(huán)境變量 statusBarHeight 44px)去給內(nèi)容讓位才能保證iPhone和Android的頂部都不會被擋。小程序端還支持env(safe-area-inset-top)在劉海屏上更穩(wěn)妥。4.2 內(nèi)嵌頁里的支付問題微信支付v3與平臺證書支付是內(nèi)嵌場景里最頭大的事。很多人搜“小程序微信支付v3對接 無可用的平臺證書”我都替他們著急因?yàn)檫@個問題的解法往往根本不在小程序前端而在后端配置上。先說環(huán)境限制。小程序web-view里的H5頁面不能直接調(diào)用wx.requestPayment小程序支付也不能走普通網(wǎng)頁版的JSAPI支付流程。你如果嘗試在H5頁面里引入JSAPI拉起收銀臺大概率會遇到“當(dāng)前環(huán)境不支持”的報錯。所以項(xiàng)目設(shè)計階段就要定好交易動作盡量放在小程序原生頁面完成H5只負(fù)責(zé)展示和引導(dǎo)。如果實(shí)在必須在H5里支付那要看你的H5跑在哪里——普通微信外的H5用Native支付微信內(nèi)但非小程序運(yùn)行環(huán)境可以用JSAPI但內(nèi)嵌到小程序里后這條路往往走不通。再來說v3對接。微信支付v3的接口體系里最煩的就是證書體系。很多人遇到“無可用的平臺證書請?jiān)谏虘羝脚_-API安全申請使用微信支付公鑰”是因?yàn)関3要求商戶下載API證書并且用平臺證書去驗(yàn)證微信服務(wù)器的應(yīng)答。不少同學(xué)在本地測試沒問題上服務(wù)器就報錯多半是證書路徑?jīng)]配好、或者SDK版本太舊導(dǎo)致無法自動加載平臺證書。按微信支付的規(guī)范流程你需要在商戶平臺申請API證書拿到商戶私鑰、商戶證書序列號然后在服務(wù)端配置好。v3的流程本質(zhì)上是商戶用私鑰簽名請求微信用商戶公鑰驗(yàn)簽微信應(yīng)答時用平臺私鑰簽名商戶用平臺證書驗(yàn)簽。這里最容易踩的坑是有些人把“API證書”和“平臺證書”搞混或者本地和線上配置的證書不一致導(dǎo)致驗(yàn)簽失敗。我建議直接在服務(wù)端統(tǒng)一封裝一個支付模塊把證書加載和簽名邏輯放到一起像各種官方SDK或開源的wechatpay-java這類組件能省下很多時間。4.3 組件兼容與真機(jī)適配video嵌套、軟鍵盤、導(dǎo)航高度技術(shù)細(xì)節(jié)里的坑最折磨人。我之前做的一個項(xiàng)目首頁用swiper輪播每一個輪播圖里再嵌套一個video視頻在小程序開發(fā)者工具里表現(xiàn)完美一上真機(jī)iOS全屏播放時畫面直接錯位、黑屏、甚至閃退回桌面。這個問題不是玄學(xué)根因是video組件在小程序和H5里的渲染機(jī)制差異極大。小程序里的video是原生組件層級天然在最頂層容易被其他組件遮擋也容易在轉(zhuǎn)屏和全屏?xí)r出現(xiàn)渲染錯亂。雖然說現(xiàn)在有“同層渲染”能力但在iOS上配合swiper使用時全屏狀態(tài)下的坐標(biāo)計算經(jīng)常會出問題。我最終的解決方案是放棄“輪播視頻”這個布局改成第一屏播放封面圖點(diǎn)擊后跳轉(zhuǎn)到一個獨(dú)立的小程序頁面去全屏播放視頻。如果你不想改布局也可以嘗試去掉全屏播放能力、用cover-view給video封面但說實(shí)話最簡單粗暴的方案往往最穩(wěn)定。再說軟鍵盤遮擋問題。熱搜里有一條“uniapp微信小程序手機(jī)軟鍵盤會遮擋住查詢內(nèi)容”這種問題在小程序和H5里都很常見。解決思路一般是給輸入框設(shè)置cursor-spacing讓光標(biāo)離輸入框有一定間距或者監(jiān)聽鍵盤高度變化動態(tài)上推頁面。小程序的原生textarea和input有相關(guān)屬性可以配置但如果是在web-view里加載H5瀏覽器本身的鍵盤彈起邏輯往往就夠用了只要不是特別變態(tài)的OS版本一般都能自動滾動。4.4 調(diào)試、發(fā)布與合規(guī)提醒最后聊點(diǎn)流程層面的東西。小程序內(nèi)嵌H5之后調(diào)試復(fù)雜了很多。開發(fā)者工具里雖然有web-view模擬環(huán)境但跟真實(shí)微信客戶端的差異還是很大的經(jīng)常出現(xiàn)“開發(fā)者工具正常、真機(jī)白屏”的情況。我的經(jīng)驗(yàn)是業(yè)務(wù)域名、校驗(yàn)文件、HTTPS證書、URL參數(shù)、微信JSSDK版本這五個因素一個個過一遍九成的白屏問題都能解決。說到調(diào)試有些同學(xué)喜歡用各種抓包工具去分析小程序或H5的請求。這里我得提醒一句抓包只建議用在自己開發(fā)的、有授權(quán)的應(yīng)用上為什么因?yàn)榫€上小程序是別人的線上服務(wù)未經(jīng)授權(quán)去抓取和解析請求數(shù)據(jù)輕則是不道德重則可能違反相關(guān)法律和平臺規(guī)則。做開發(fā)調(diào)試用官方開發(fā)者工具的網(wǎng)絡(luò)面板、遠(yuǎn)程調(diào)試功能已經(jīng)足夠覆蓋絕大多數(shù)場景沒必要上來就上各類代理工具。發(fā)布階段還要注意幾個合規(guī)問題。新備案的域名、過期證書、改動過的校驗(yàn)文件都可能讓內(nèi)嵌頁面瞬間失效。最好在運(yùn)維側(cè)建一個“內(nèi)嵌頁面發(fā)布檢查清單”每次改動域名或證書后先在體驗(yàn)版里跑通再放全量。小程序的線上違規(guī)問題比如“由于小程序違規(guī)支付功能暫時無法使用”這類提示通常是賬號資質(zhì)或內(nèi)容審核導(dǎo)致的跟代碼本身關(guān)系不大遇到后不要只盯著代碼修要去小程序管理后臺看具體的違規(guī)通知和申訴入口。說到底微信小程序和H5的關(guān)系不是“二選一”的對手關(guān)系而像一個院子里的一棟樓和一個花園各有用處。我自己現(xiàn)在做項(xiàng)目基本都會先畫一張用戶體驗(yàn)地圖用戶的入口在哪里、核心動線是什么、哪些環(huán)節(jié)必須依賴微信能力、哪些內(nèi)容只需要鏈接分享。畫完之后小程序和H5的分工往往一目了然。這里也分享一個我這幾年摸索出來比較穩(wěn)的組合拳核心交易鏈路、用戶中心、消息提醒放在小程序原生頁面里活動營銷、長文內(nèi)容、外部投放落地頁、不需要重交互的功能交給H5按需讓它們互相內(nèi)嵌小程序里的H5不要承載太重的業(yè)務(wù)邏輯保持它“內(nèi)容層”的定位。這樣既保住了體驗(yàn)又保住了迭代速度。如果你要問我具體的操作順序我的建議是先把業(yè)務(wù)域名、HTTPS證書、校驗(yàn)文件這三件套搞好再動手開發(fā)內(nèi)嵌頁面這是最省時間的路徑。別一上來就寫H5頁面寫到一半發(fā)現(xiàn)域名沒過審那才是真的白忙活。