微信小程序内嵌网页的一些（最佳）实践

前言

3 个月前，微信小法式推出了 web-view 组件激发了一波小飞腾，笔者地点的大前端团队写过一篇浅析，详情可见：浅谈微信小法式前端生态。
我们曾大胆料想，这一功用，能够间接致使小法式数目增加迎来一波高峰。

究竟磨刀霍霍却一向资本不敷的团队应当很多，现在可以把已有 H5 利用嵌入到小法式 web-view 容器中，以最低的开辟本钱坐蹭微信流量盈利，何乐而不为呢？

我们也曾憧憬也许“小法式页面+ web 页”夹杂开辟（甚至 web 更重）会成为今后的新趋向。

2M 代码限制（现在已更新至 4M）使得像“转转官方”这样功用繁复的小法式必须斟酌引入 web 内容，再有就是小法式考核公布机制使得它毕竟不能像 web 一样迭代敏捷。

恰好笔者地点的营业线，存在已有的 H5 利用却无对应小法式的情况。我们在开辟对应小法式时也算收获了很多经历（踩了很多坑），分享给有小法式需求的朋友们~
最大的坑：不支持办事告诉

是的，web-view 不支持推送办事告诉（或称模板消息)。



类似定阅号在对话列表的形式

为什么能称为最大的坑？我们先领会一下办事告诉，以下援用全数来自微信官方小法式文档。

基于微信的告诉渠道，我们为开辟者供给了可以高效触达用户的模板消息才能，以便实现办事闭环并供给更佳的体验。

看起来很利害，假如我们的小法式没这个功用会怎样？

• “用完即走”是小法式的口号，没有办事告诉代表落空了高效触达（召回）用户的才能，然后用户就再也回不来了，促活和保存怎样办？
  
• 很多功用不是像定阅号里看篇文章一样，几分钟就能搞定的，比如绝大部分电商的行为：从搜索、阅读比价、跟卖家交换，到加入购物车仅仅是走完了不到一半的生命周期；然后才是下单付出评价，还不包括保举复购取消退款等等，没个15-30分钟那里够。但是，没有用户会一向开着某个小法式，他人还要切进来聊天刷朋友圈呢。没有了化同步为异步的才能，绝大部分产物逻辑若何实现办事闭环？
  

一篇教你冲破小法式模板消息推送限制的文章中，也总结了办事告诉的「多、快、好、省」等特点。这些先不展开，我们还能看到：

• 该小法式近 30 天拜候来历数据显现，有 20% 左右的用户经过模板消息进入小打卡，在各类来历中排名第 3 位（假如分母去掉新用户的来历，比率和排名会更高）；
  
• 况且，用户根基都不会封闭微信的消息推送，相较 App 的推送和短信推送来说，小法式的推送触达率会高很多。
  

so，没有哪个（端庄的）小法式会不支持办事告诉（地痞些的比如拼多多，看了个商品能给你连着推 N 条）。试想一下没有推送告诉的 APP，你的产物、运营和老板们会赞成么？
为什么不支持

但是，为什么 web-view 不支持办事告诉？那里坑了？还请继续看微信官方文档里的界说。

下发条件：用户本人在微信系统内与页面有交互行为后触发

总结起来就是，付出3条、提交表单（该表单需声明为要发模板消息）1条，7天有用。

• 首先，这里区分了付出和提交表单两种行为，要分分歧的情况上报，起头了看到没…
  
• 然后，web-view 不支持付出才能（其 JSAPI 才能不包括微信付出），这个在微信的文档里没有显式的声明，不外能在微信的 web-view 题目汇总中看到，这个也挺坑的…
  
• 实在，付出行为对小法式自己而言只是少少数的交互，大大都小法式甚至不含付出。所以我们根基还得靠表单，可题目就出在这：小法式的 web-view 和表单（form 组件） 不兼容！！！
  

PS：我们先区分下 form 组件，它跟 web-view 内网页的表单（form 标签）没有任何关系。
PS：RN 和 Weex 也没有 form 组件。为什么笔者一看到 form 就想到以下的图？



1999年12月公布的 HTML 4.01 Specification 就支持了 form，自 AJAX 在2005年风行天下后，跨域、文件上传都有了 form 之外的处理计划，谁没事还用这玩意？

先不吐槽微信文档里 form 组件的界说是有多粗陋，再看其 web-view 组件的界说~

web-view 组件是一个可以用来承载网页的容器，会自动铺满全部小法式页面。

何止铺满，尝试把 web-view 放在 form 组件内，form 组件都铺没了。so，自动铺满 = 页面独占 = 一切其他元素都被间接覆盖…好吧，他人在文档最下方的 Bug & Tip 里写了行小字~
综上，web-view 跟办事告诉已绝缘。so，小法式里网页的交互行为不算在微信系统内！！？
我不由回忆起 Google 之前推出的 PWA（Progressive Web App），在这又有那末一丝神似。

• 两者同是基于 Web 的技术，开辟出（也许）可替换 APP 的伪原生利用；
  
• PWA 的推送告诉因其 API 太超前和一些不着名的办事被和谐用不了（你懂的）；
  
• 小法式的办事告诉嘛，你要想用 web-view 做壳就公布上线也用不了。
  

扯远了点，但大师都说：PWA 是引领下一代潮水的 Web 技术超集，而小法式是对 Web 技术停止修（阉割）补（Hack）的（黑）魔法…
不做展开，接待移步：若何客观地评价「小法式」的体验? Web 在继续离我们远去

那怎样办？

由于笔者团队的营业对办事告诉与付出有大量依靠，那末我们就要完全放弃 web-view，把之前的 H5 利用全数重写至原生小法式了么？明显不是。
正如前文所说，付出仅是电商诸多环节中的一环，首要在商品 or 定单详情页（这些必须重写）。关于办事告诉，经过几个重写后的原生小法式页，也能收集到充足的 form。

• 具体若何重写，可参考我们之前的像 Vue 一样写微信小法式-深入研讨 wepy 框架。虽然 wepy 框架尝试从语法层面尽能够做到与 vue 技术栈的 web 项目同构，可是两头特征 API 兼容照旧是个辣手题目，而且究竟两者的语法糖和生命周期函数都纷歧样。这里还有很多野生本钱及进修与顺应的进程，贴一个例子：
  

基于 wepy，模板部分就是个替换+适配的活，JS 麻烦些，离同构差异不小。 美团您的 mpVue 呢？

• 具体若何收集，可参考教你冲破小法式模板消息的推送限制这篇文章的做法。也如文章所说，一般大师城市在小法式页中，把一切能点击的地方都换成 form。假如感觉不够简单粗鲁，也能在 form 中多层嵌套 form，然后让点击事务冒泡的方式来做！（谁让此 form 非彼 form 呢…够魔法么…）
  

剩下的营业，理论上都可以用 web-view 来实现！！！运营活动页就不说了，开放 web-view 才能最大的上风就是方便了这类需求。小法式首页，甚至设置了 tabBar 的小法式页都可以。由于我们还发现一个奇异的 feature…



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

说好的自动铺满呢？算了，这样挺好的…

总结

亏了 web-view 组件的实时推出，我们只需重写部分详情页和其依靠的组件，最初复盘一下。

• 定位：小法式的 web-view 就像是 Hybrid 客户端嵌 H5 页一样，需要一些根本才能的时辰，比如付出、办事告诉（IM 和召回等场景）等等，最好利用原生小法式；
  
• 兼容性：这个不必过量担忧，最新的根本库统计数据，1.6.4+ 的覆盖率已达 95% 以上；
  
• 数据通讯：小法式 => web-view 可以在 url 中用 search、hash 的方式，web-view => 小法式可用 bindmessage，一般用来处理分享信息传递的题目；
  
• 登录：a. web-view 内走微信授权，b. 小法式登录后再进入 web-view，并把相关 cookie 经过 url 传递给 web-view。
  

别的 feature（接待会商和补充）：

• web-view 跟小法式是自力的两个情况，数据完全欠亨，包括 cookie、session、localStorage 等等；
  
• 但小法式内嵌 web-view 跟微信内置阅读器是一套情况，也就是说你在 web-view 里面留下的以上痕迹，到微信里内置阅读器翻开也有；
  
• 在两种情况下，不太轻易区分究竟是什么情况，小法式官方给的判定方式是 window.__wxjs_environment === 'miniprogram'，可是在 web-view 进入第二页时辰，安卓机下这个变量就 undefined 了。
  

别的的坑（常见毛病）：

• 翻开的域名没有在小法式治理背景设备营业域名(留意是营业域名，不是办事器域名)；
  
• 翻开的页面 302 曩昔的地址也必须设备过营业域名；
  
• 页面可以包括 iframe，可是 iframe 的地址必须为营业域名；
  
• 翻开的页面必须为 https 办事；
  
• 开辟者自己检查自己的 https 办事能否一般，测试方式：普通阅读器翻开对应的地址；
  

等等，详情请移步 web-view 题目汇总查阅，或在该帖子里留言。
最初来张结果图镇楼~



前两张在 Safari 和 APP 中用的 H5，后一个用原生小法式实现

PS：接待亲们利用 @转转，体验更专业的二手买卖~ 更接待来 @大转转FE 转转~

webview有加载进度是个题目

嗯，是的

叨教怎样将storage的登录态传给webview的cookie呢？

可以用url传递

您好,看完您写的关于web-view登录题目分析的很透彻.
今朝恰好我碰到了一个辣手题目,
期待您的答复.
下面是我的题目地址:

https://http://zhuanlan.zhihu.com/p/33985049

这样做能否是不承平安

原地TP