微信小程序內(nèi)嵌網(wǎng)頁(yè)的一些（最佳）實(shí)踐，小程序內(nèi)嵌

前言

3 個(gè)月前，微信小程序推出了?web-view?組件引發(fā)了一波小高潮，筆者所在的大前端團(tuán)隊(duì)寫過(guò)一篇淺析，詳情可見(jiàn)：淺談微信小程序前端生態(tài)。愛(ài)掏網(wǎng) - it200.com

我們?cè)竽懖孪耄@一功能，可能直接導(dǎo)致小程序數(shù)量增長(zhǎng)迎來(lái)一波高峰。愛(ài)掏網(wǎng) - it200.com

畢竟磨刀霍霍卻一直資源不足的團(tuán)隊(duì)?wèi)?yīng)該不少，現(xiàn)在可以把已有 H5 應(yīng)用嵌入到小程序 web-view 容器中，以最低的開(kāi)發(fā)成本坐蹭微信流量紅利，何樂(lè)而不為呢？

我們也曾暢想也許“小程序頁(yè)面+ web 頁(yè)”混合開(kāi)發(fā)（甚至 web 更重）會(huì)成為以后的新趨勢(shì)。愛(ài)掏網(wǎng) - it200.com

2M 代碼限制（如今已更新至 4M）使得像“轉(zhuǎn)轉(zhuǎn)官方”這樣功能繁復(fù)的小程序必須考慮引入 web 內(nèi)容，再有就是小程序?qū)徍税l(fā)布機(jī)制使得它終究不能像 web 一樣迭代迅速。愛(ài)掏網(wǎng) - it200.com

正好筆者所在的業(yè)務(wù)線，存在已有的 H5 應(yīng)用卻無(wú)對(duì)應(yīng)小程序的情況。愛(ài)掏網(wǎng) - it200.com我們?cè)陂_(kāi)發(fā)對(duì)應(yīng)小程序時(shí)也算收獲了不少經(jīng)驗(yàn)（踩了不少坑），分享給有小程序需求的朋友們~

最大的坑：不支持服務(wù)通知

是的，web-view 不支持推送服務(wù)通知（或稱模板消息)。愛(ài)掏網(wǎng) - it200.com

如圖所示，類似訂閱號(hào)在對(duì)話列表的模式

為什么能稱為最大的坑？我們先了解一下服務(wù)通知，以下引用全部來(lái)自微信官方小程序文檔。愛(ài)掏網(wǎng) - it200.com

基于微信的通知渠道，我們?yōu)殚_(kāi)發(fā)者提供了可以高效觸達(dá)用戶的模板消息能力，以便實(shí)現(xiàn)服務(wù)閉環(huán)并提供更佳的體驗(yàn)。愛(ài)掏網(wǎng) - it200.com

看起來(lái)很厲害，如果咱們的小程序沒(méi)這個(gè)功能會(huì)怎樣？

1. “用完即走”是小程序的口號(hào)，沒(méi)有服務(wù)通知代表失去了高效觸達(dá)（召回）用戶的能力，然后用戶就再也回不來(lái)了，促活和留存怎么辦？

2. 很多功能不是像訂閱號(hào)里看篇文章一樣，幾分鐘就能搞定的，比如絕大部分電商的行為：從搜索、瀏覽比價(jià)、跟賣家交流，到加入購(gòu)物車僅僅是走完了不到一半的生命周期；然后才是下單支付評(píng)價(jià)，還不包括推薦復(fù)購(gòu)取消退款等等，沒(méi)個(gè)15-30分鐘哪里夠。愛(ài)掏網(wǎng) - it200.com然而，沒(méi)有用戶會(huì)一直開(kāi)著某個(gè)小程序，別人還要切出去聊天刷朋友圈呢。愛(ài)掏網(wǎng) - it200.com沒(méi)有了化同步為異步的能力，絕大部分產(chǎn)品邏輯如何實(shí)現(xiàn)服務(wù)閉環(huán)？

一篇教你突破小程序模板消息推送限制的文章中，也總結(jié)了服務(wù)通知的「多、快、好、省」等特點(diǎn)。愛(ài)掏網(wǎng) - it200.com這些先不展開(kāi)，我們還能看到：

1. 該小程序近 30 天訪問(wèn)來(lái)源數(shù)據(jù)顯示，有 20% 左右的用戶通過(guò)模板消息進(jìn)入小打卡，在各種來(lái)源中排名第 3 位（如果分母去掉新用戶的來(lái)源，比率和排名會(huì)更高）；

2. 況且，用戶基本都不會(huì)關(guān)閉微信的消息推送，相較 App 的推送和短信推送來(lái)說(shuō)，小程序的推送觸達(dá)率會(huì)高很多。愛(ài)掏網(wǎng) - it200.com

so，沒(méi)有哪個(gè)（正經(jīng)的）小程序會(huì)不支持服務(wù)通知（流氓些的比如拼多多，看了個(gè)商品能給你連著推 N 條）。愛(ài)掏網(wǎng) - it200.com試想一下沒(méi)有推送通知的 APP，你的產(chǎn)品、運(yùn)營(yíng)和老板們會(huì)同意么？

為什么不支持

然而，為什么 web-view 不支持服務(wù)通知？哪里坑了？還請(qǐng)繼續(xù)看微信官方文檔里的定義。愛(ài)掏網(wǎng) - it200.com

下發(fā)條件：用戶本人在微信體系內(nèi)與頁(yè)面有交互行為后觸發(fā)

總結(jié)起來(lái)就是，支付3條、提交表單（該表單需聲明為要發(fā)模板消息）1條，7天有效。愛(ài)掏網(wǎng) - it200.com

1. 首先，這里區(qū)別了支付和提交表單兩種行為，要分不同的情況上報(bào)，開(kāi)始了看到?jīng)]…

2. 然后，web-view 不支持支付能力（其 JSAPI 能力不包含微信支付），這個(gè)在微信的文檔里沒(méi)有顯式的聲明，不過(guò)能在微信的?web-view 問(wèn)題匯總中看到，這個(gè)也挺坑的…

3. 其實(shí)，支付行為對(duì)小程序本身而言只是極少數(shù)的交互，大多數(shù)小程序甚至不含支付。愛(ài)掏網(wǎng) - it200.com所以我們基本還得靠表單，可問(wèn)題就出在這：小程序的 web-view 和表單（form 組件） 不兼容！！！

PS：我們先區(qū)分下 form 組件，它跟 web-view 內(nèi)網(wǎng)頁(yè)的表單（form 標(biāo)簽）沒(méi)有任何關(guān)系。愛(ài)掏網(wǎng) - it200.com

PS：RN 和 Weex 也沒(méi)有 form 組件。愛(ài)掏網(wǎng) - it200.com為什么筆者一看到 form 就想到如下的圖？

1999年12月發(fā)布的 HTML 4.01 Specification 就支持了 form，自 AJAX 在2005年風(fēng)靡世界后，跨域、文件上傳都有了 form 之外的解決方案，誰(shuí)沒(méi)事還用這玩意？

先不吐槽微信文檔里?form?組件的定義是有多簡(jiǎn)陋，再看其 web-view 組件的定義~

web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面。愛(ài)掏網(wǎng) - it200.com

何止鋪滿，嘗試把 web-view 放在 form 組件內(nèi)，form 組件都鋪沒(méi)了。愛(ài)掏網(wǎng) - it200.comso，自動(dòng)鋪滿 = 頁(yè)面獨(dú)占 =?所有其他元素都被直接覆蓋…好吧，別人在文檔最下方的 Bug & Tip 里寫了行小字~

綜上，web-view 跟服務(wù)通知已絕緣。愛(ài)掏網(wǎng) - it200.comso，小程序里網(wǎng)頁(yè)的交互行為不算在微信體系內(nèi)！！？

我不禁回想起 Google 之前推出的 PWA（Progressive Web App），在這又有那么一絲神似。愛(ài)掏網(wǎng) - it200.com

1. 兩者同是基于 Web 的技術(shù)，開(kāi)發(fā)出（或許）可替代 APP 的偽原生應(yīng)用；

2. PWA 的推送通知因其 API 太超前和一些不知名的服務(wù)被和諧用不了（你懂的）；

3. 小程序的服務(wù)通知嘛，你要想用 web-view 做殼就發(fā)布上線也用不了。愛(ài)掏網(wǎng) - it200.com

扯遠(yuǎn)了點(diǎn)，但大家都說(shuō)：PWA 是引領(lǐng)下一代潮流的 Web 技術(shù)超集，而小程序是對(duì) Web 技術(shù)進(jìn)行修（閹割）補(bǔ)（Hack）的（黑）魔法…

不做展開(kāi)，歡迎移步：如何客觀地評(píng)價(jià)「小程序」的體驗(yàn)??Web 在繼續(xù)離我們遠(yuǎn)去

那怎么辦？

由于筆者團(tuán)隊(duì)的業(yè)務(wù)對(duì)服務(wù)通知與支付有大量依賴，那么我們就要徹底放棄 web-view，把之前的 H5 應(yīng)用全部重寫至原生小程序了么？顯然不是。愛(ài)掏網(wǎng) - it200.com

正如前文所說(shuō)，支付僅是電商諸多環(huán)節(jié)中的一環(huán)，主要在商品 or 訂單詳情頁(yè)（這些必須重寫）。愛(ài)掏網(wǎng) - it200.com關(guān)于服務(wù)通知，通過(guò)幾個(gè)重寫后的原生小程序頁(yè)，也能收集到足夠的 form。愛(ài)掏網(wǎng) - it200.com

• 具體如何重寫，可參考我們之前的像 Vue 一樣寫微信小程序-深入研究 wepy 框架。愛(ài)掏網(wǎng) - it200.com雖然 wepy 框架嘗試從語(yǔ)法層面盡可能做到與 vue 技術(shù)棧的 web 項(xiàng)目同構(gòu)，但是兩端特性 API 兼容依舊是個(gè)棘手問(wèn)題，而且畢竟兩者的語(yǔ)法糖和生命周期函數(shù)都不一樣。愛(ài)掏網(wǎng) - it200.com這里還有不少人工成本及學(xué)習(xí)與適應(yīng)的過(guò)程，貼一個(gè)例子：

基于 wepy，模板部分就是個(gè)替換+適配的活，JS 麻煩些。愛(ài)掏網(wǎng) - it200.com離同構(gòu)差距不小，美團(tuán)您的 mpVue 呢？

• 具體如何收集，可參考教你突破小程序模板消息的推送限制這篇文章的做法。愛(ài)掏網(wǎng) - it200.com也如文章所說(shuō)，一般大家都會(huì)在小程序頁(yè)中，**把所有能點(diǎn)擊的地方都換成 form。愛(ài)掏網(wǎng) - it200.com**如果覺(jué)得不夠簡(jiǎn)單粗暴，也能在?form 中多層嵌套 form，然后讓點(diǎn)擊事件冒泡的方式來(lái)做！（誰(shuí)讓此 form 非彼 form 呢…夠魔法么…）

剩下的業(yè)務(wù)，理論上都可以用 web-view 來(lái)實(shí)現(xiàn)！！！運(yùn)營(yíng)活動(dòng)頁(yè)就不說(shuō)了，開(kāi)放 web-view 能力最大的優(yōu)勢(shì)就是方便了這類需求。愛(ài)掏網(wǎng) - it200.com小程序首頁(yè)，甚至配置了 tabBar?的小程序頁(yè)都可以。愛(ài)掏網(wǎng) - it200.com因?yàn)槲覀冞€發(fā)現(xiàn)一個(gè)神奇的 feature…

大概是用了原生的 UITabBar，web-view 和 tabBar 能共存

總結(jié)

虧了 web-view 組件的及時(shí)推出，我們只需重寫部分詳情頁(yè)和其依賴的組件，最后復(fù)盤一下。愛(ài)掏網(wǎng) - it200.com

1. 定位：小程序的 web-view 就像是 Hybrid 客戶端嵌 H5 頁(yè)一樣，需要一些基礎(chǔ)能力的時(shí)候，比如支付、服務(wù)通知（IM 和召回等場(chǎng)景）等等，最好使用原生小程序；

2. 兼容性：這個(gè)無(wú)須過(guò)多擔(dān)心，最新的基礎(chǔ)庫(kù)統(tǒng)計(jì)數(shù)據(jù)，1.6.4+ 的覆蓋率已達(dá) 95% 以上；

3. 數(shù)據(jù)通信：小程序 => web-view 可以在 url 中用 search、hash 的方式，web-view => 小程序可用 bindmessage，一般用來(lái)解決分享信息傳遞的問(wèn)題；

4. 登錄：a. web-view 內(nèi)走微信授權(quán)，b. 小程序登錄后再進(jìn)入 web-view，并把相關(guān) cookie 通過(guò) url 傳遞給 web-view。愛(ài)掏網(wǎng) - it200.com

其它 feature（歡迎討論和補(bǔ)充）：

1. web-view 跟小程序是獨(dú)立的兩個(gè)環(huán)境，數(shù)據(jù)完全不通，包括 cookie、session、localStorage 等等；

2. 但小程序內(nèi)嵌 web-view 跟微信內(nèi)置瀏覽器是一套環(huán)境，也就是說(shuō)你在 web-view 里面留下的以上痕跡，到微信里內(nèi)置瀏覽器打開(kāi)也有；

3. 在兩種環(huán)境下，不太容易區(qū)分到底是什么環(huán)境，小程序官方給的判斷方法是 window.__wxjs_environment === 'miniprogram'，但是在 web-view 進(jìn)入第二頁(yè)時(shí)候，安卓機(jī)下這個(gè)變量就 undefined 了。愛(ài)掏網(wǎng) - it200.com

其它的坑（常見(jiàn)錯(cuò)誤）：

1. 打開(kāi)的域名沒(méi)有在小程序管理后臺(tái)設(shè)置業(yè)務(wù)域名(注意是業(yè)務(wù)域名，不是服務(wù)器域名)；

2. 打開(kāi)的頁(yè)面 302 過(guò)去的地址也必須設(shè)置過(guò)業(yè)務(wù)域名；

3. 頁(yè)面可以包含 iframe，但是 iframe 的地址必須為業(yè)務(wù)域名；

4. 打開(kāi)的頁(yè)面必須為 https 服務(wù)；

5. 開(kāi)發(fā)者自己檢查自己的 https 服務(wù)是否正常，測(cè)試方法：普通瀏覽器打開(kāi)對(duì)應(yīng)的地址； 等等，詳情請(qǐng)移步?web-view 問(wèn)題匯總(https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=585555149&docid=ebfd9e5ec9986b4f23c41f8d8bbf2730)查閱，或在該帖子里留言。愛(ài)掏網(wǎng) - it200.com

本文作者：大轉(zhuǎn)轉(zhuǎn)FE 本文發(fā)布時(shí)間：2024年03月02日 本文來(lái)自和通數(shù)據(jù)庫(kù)合作伙伴CSDN，了解相關(guān)信息可以關(guān)注csdn.net網(wǎng)站。愛(ài)掏網(wǎng) - it200.com