前言
3 個月前，微信小程序推出了 web-view 組件引發(fā)了一波小高潮霜威，筆者所在的大前端團(tuán)隊寫過一篇淺析酪刀，詳情可見：淺談微信小程序前端生態(tài)粹舵。
我們曾大膽猜想，這一功能骂倘，可能直接導(dǎo)致小程序數(shù)量增長迎來一波高峰眼滤。
畢竟磨刀霍霍卻一直資源不足的團(tuán)隊?wèi)?yīng)該不少，現(xiàn)在可以把已有 H5 應(yīng)用嵌入到小程序 web-view 容器中历涝，以最低的開發(fā)成本坐蹭微信流量紅利诅需，何樂而不為呢漾唉？
我們也曾暢想也許“小程序頁面+ web 頁”混合開發(fā)（甚至 web 更重）會成為以后的新趨勢。
2M 代碼限制（如今已更新至 4M）使得像“轉(zhuǎn)轉(zhuǎn)官方”這樣功能繁復(fù)的小程序必須考慮引入 web 內(nèi)容堰塌，再有就是小程序?qū)徍税l(fā)布機(jī)制使得它終究不能像 web 一樣迭代迅速赵刑。
正好筆者所在的業(yè)務(wù)線，存在已有的 H5 應(yīng)用卻無對應(yīng)小程序的情況场刑。我們在開發(fā)對應(yīng)小程序時也算收獲了不少經(jīng)驗（踩了不少坑）般此，分享給有小程序需求的朋友們~
最大的坑：不支持服務(wù)通知
是的，web-view 不支持推送服務(wù)通知（或稱模板消息)牵现。
如圖所示恤煞，類似訂閱號在對話列表的模式
為什么能稱為最大的坑？我們先了解一下服務(wù)通知施籍，以下引用全部來自微信官方小程序文檔居扒。
基于微信的通知渠道，我們?yōu)殚_發(fā)者提供了可以高效觸達(dá)用戶的模板消息能力丑慎，以便實現(xiàn)服務(wù)閉環(huán)并提供更佳的體驗喜喂。
看起來很厲害，如果咱們的小程序沒這個功能會怎樣竿裂？
- “用完即走”是小程序的口號玉吁，沒有服務(wù)通知代表失去了高效觸達(dá)（召回）用戶的能力，然后用戶就再也回不來了腻异，促活和留存怎么辦进副？
- 很多功能不是像訂閱號里看篇文章一樣，幾分鐘就能搞定的悔常，比如絕大部分電商的行為：從搜索影斑、瀏覽比價、跟賣家交流机打，到加入購物車僅僅是走完了不到一半的生命周期矫户；然后才是下單支付評價，還不包括推薦復(fù)購取消退款等等残邀，沒個15-30分鐘哪里夠皆辽。然而，沒有用戶會一直開著某個小程序芥挣，別人還要切出去聊天刷朋友圈呢驱闷。沒有了化同步為異步的能力，絕大部分產(chǎn)品邏輯如何實現(xiàn)服務(wù)閉環(huán)空免？
一篇教你突破小程序模板消息推送限制的文章中空另，也總結(jié)了服務(wù)通知的「多、快鼓蜒、好痹换、省」等特點。這些先不展開都弹，我們還能看到：
- 該小程序近 30 天訪問來源數(shù)據(jù)顯示娇豫，有 20% 左右的用戶通過模板消息進(jìn)入小打卡，在各種來源中排名第 3 位（如果分母去掉新用戶的來源畅厢，比率和排名會更高）冯痢；
- 況且，用戶基本都不會關(guān)閉微信的消息推送框杜，相較 App 的推送和短信推送來說浦楣，小程序的推送觸達(dá)率會高很多。
so咪辱，沒有哪個（正經(jīng)的）小程序會不支持服務(wù)通知（流氓些的比如拼多多振劳，看了個商品能給你連著推 N 條）。試想一下沒有推送通知的 APP油狂，你的產(chǎn)品历恐、運(yùn)營和老板們會同意么？
為什么不支持
然而专筷，為什么 web-view 不支持服務(wù)通知弱贼？哪里坑了？還請繼續(xù)看微信官方文檔里的定義磷蛹。
下發(fā)條件：用戶本人在微信體系內(nèi)與頁面有交互行為后觸發(fā)
總結(jié)起來就是吮旅，支付3條、提交表單（該表單需聲明為要發(fā)模板消息）1條味咳，7天有效庇勃。
- 首先，這里區(qū)別了支付和提交表單兩種行為槽驶，要分不同的情況上報匪凉，開始了看到?jīng)]…
- 然后，web-view 不支持支付能力（其 JSAPI 能力不包含微信支付）捺檬，這個在微信的文檔里沒有顯式的聲明再层，不過能在微信的 web-view 問題匯總中看到，這個也挺坑的…
- 其實堡纬，支付行為對小程序本身而言只是極少數(shù)的交互聂受，大多數(shù)小程序甚至不含支付。所以我們基本還得靠表單烤镐，可問題就出在這：小程序的 web-view 和表單（form 組件） 不兼容５凹谩！炮叶！
PS：我們先區(qū)分下 form 組件碗旅，它跟 web-view 內(nèi)網(wǎng)頁的表單（form 標(biāo)簽）沒有任何關(guān)系渡处。
PS：RN 和 Weex 也沒有 form 組件。為什么筆者一看到 form 就想到如下的圖祟辟？
1999年12月發(fā)布的 HTML 4.01 Specification 就支持了 form医瘫，自 AJAX 在2005年風(fēng)靡世界后，跨域旧困、文件上傳都有了 form 之外的解決方案醇份，誰沒事還用這玩意？
先不吐槽微信文檔里 form 組件的定義是有多簡陋吼具，再看其 web-view 組件的定義~
web-view 組件是一個可以用來承載網(wǎng)頁的容器僚纷，會自動鋪滿整個小程序頁面。
何止鋪滿拗盒，嘗試把 web-view 放在 form 組件內(nèi)怖竭，form 組件都鋪沒了。so陡蝇，自動鋪滿 = 頁面獨占 = 所有其他元素都被直接覆蓋…好吧侵状，別人在文檔最下方的 Bug & Tip 里寫了行小字~
綜上，web-view 跟服務(wù)通知已絕緣毅整。so趣兄，小程序里網(wǎng)頁的交互行為不算在微信體系內(nèi)！５考怠艇潭？
我不禁回想起 Google 之前推出的 PWA（Progressive Web App），在這又有那么一絲神似戏蔑。
- 兩者同是基于 Web 的技術(shù)蹋凝，開發(fā)出（或許）可替代 APP 的偽原生應(yīng)用；
- PWA 的推送通知因其 API 太超前和一些不知名的服務(wù)被和諧用不了（你懂的）总棵；
- 小程序的服務(wù)通知嘛鳍寂，你要想用 web-view 做殼就發(fā)布上線也用不了。
扯遠(yuǎn)了點情龄，但大家都說：PWA 是引領(lǐng)下一代潮流的 Web 技術(shù)超集迄汛，而小程序是對 Web 技術(shù)進(jìn)行修（閹割）補(bǔ)（Hack）的（黑）魔法…
不做展開，歡迎移步：如何客觀地評價「小程序」的體驗? Web 在繼續(xù)離我們遠(yuǎn)去
那怎么辦骤视？
由于筆者團(tuán)隊的業(yè)務(wù)對服務(wù)通知與支付有大量依賴鞍爱，那么我們就要徹底放棄 web-view，把之前的 H5 應(yīng)用全部重寫至原生小程序了么专酗？顯然不是睹逃。
正如前文所說，支付僅是電商諸多環(huán)節(jié)中的一環(huán)祷肯，主要在商品 or 訂單詳情頁（這些必須重寫）沉填。關(guān)于服務(wù)通知疗隶，通過幾個重寫后的原生小程序頁，也能收集到足夠的 form翼闹。
- 具體如何重寫斑鼻，可參考我們之前的像 Vue 一樣寫微信小程序-深入研究 wepy 框架。雖然 wepy 框架嘗試從語法層面盡可能做到與 vue 技術(shù)棧的 web 項目同構(gòu)橄碾，但是兩端特性 API 兼容依舊是個棘手問題卵沉，而且畢竟兩者的語法糖和生命周期函數(shù)都不一樣颠锉。這里還有不少人工成本及學(xué)習(xí)與適應(yīng)的過程法牲，貼一個例子：
基于 wepy，模板部分就是個替換+適配的活琼掠，JS 麻煩些拒垃。離同構(gòu)差距不小，美團(tuán)您的 mpVue 呢瓷蛙？
- 具體如何收集悼瓮，可參考教你突破小程序模板消息的推送限制這篇文章的做法。也如文章所說艰猬，一般大家都會在小程序頁中横堡，把所有能點擊的地方都換成 form。如果覺得不夠簡單粗暴冠桃，也能在 form 中多層嵌套 form命贴，然后讓點擊事件冒泡的方式來做！（誰讓此 form 非彼 form 呢…夠魔法么…）
剩下的業(yè)務(wù)食听，理論上都可以用 web-view 來實現(xiàn)Ｐ刂搿！樱报！運(yùn)營活動頁就不說了葬项，開放 web-view 能力最大的優(yōu)勢就是方便了這類需求。小程序首頁迹蛤，甚至配置了 tabBar 的小程序頁都可以民珍。因為我們還發(fā)現(xiàn)一個神奇的 feature…
大概是用了原生的 UITabBar，web-view 和 tabBar 能共存
總結(jié)
虧了 web-view 組件的及時推出盗飒，我們只需重寫部分詳情頁和其依賴的組件穷缤，最后復(fù)盤一下。
- 定位：小程序的 web-view 就像是 Hybrid 客戶端嵌 H5 頁一樣箩兽，需要一些基礎(chǔ)能力的時候津肛，比如支付、服務(wù)通知（IM 和召回等場景）等等汗贫，最好使用原生小程序身坐；
- 兼容性：這個無須過多擔(dān)心秸脱，最新的基礎(chǔ)庫統(tǒng)計數(shù)據(jù)，1.6.4+ 的覆蓋率已達(dá) 95% 以上部蛇；
- 數(shù)據(jù)通信：小程序 => web-view 可以在 url 中用 search摊唇、hash 的方式，web-view => 小程序可用 bindmessage涯鲁，一般用來解決分享信息傳遞的問題巷查；
- 登錄：a. web-view 內(nèi)走微信授權(quán)，b. 小程序登錄后再進(jìn)入 web-view抹腿，并把相關(guān) cookie 通過 url 傳遞給 web-view岛请。
其它 feature（歡迎討論和補(bǔ)充）：
- web-view 跟小程序是獨立的兩個環(huán)境，數(shù)據(jù)完全不通警绩，包括 cookie崇败、session、localStorage 等等肩祥；
- 但小程序內(nèi)嵌 web-view 跟微信內(nèi)置瀏覽器是一套環(huán)境后室，也就是說你在 web-view 里面留下的以上痕跡，到微信里內(nèi)置瀏覽器打開也有混狠；
- 在兩種環(huán)境下岸霹，不太容易區(qū)分到底是什么環(huán)境，小程序官方給的判斷方法是 window.__wxjs_environment === 'miniprogram'将饺，但是在 web-view 進(jìn)入第二頁時候贡避，安卓機(jī)下這個變量就 undefined 了。
其它的坑（常見錯誤）：
- 打開的域名沒有在小程序管理后臺設(shè)置業(yè)務(wù)域名(注意是業(yè)務(wù)域名俯逾，不是服務(wù)器域名)贸桶；
- 打開的頁面 302 過去的地址也必須設(shè)置過業(yè)務(wù)域名；
- 頁面可以包含 iframe桌肴，但是 iframe 的地址必須為業(yè)務(wù)域名皇筛；
- 打開的頁面必須為 https 服務(wù)；
- 開發(fā)者自己檢查自己的 https 服務(wù)是否正常坠七，測試方法：普通瀏覽器打開對應(yīng)的地址水醋； 等等，詳情請移步 web-view 問題匯總(https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=585555149&docid=ebfd9e5ec9986b4f23c41f8d8bbf2730)查閱彪置，或在該帖子里留言拄踪。
作者：大轉(zhuǎn)轉(zhuǎn)FE
鏈接：微信小程序內(nèi)嵌網(wǎng)頁的一些（最佳）實踐
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)拳魁，非商業(yè)轉(zhuǎn)載請注明出處惶桐。
