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

  • 时间:
  • 浏览:0

PS:大伙儿儿先区分下 form 组件,它跟 web-view 内网页的表单(form 标签)没有任何关系。

亏了 web-view 组件的及时推出,大伙儿儿只需重写累积详情页和其依赖的组件,最后复盘一下。

web-view 跟小任务管理器运行是独立的另1个环境,数据完整篇 不通,包括 cookie、session、localStorage 等等;

整理条件:用户买车人在微信体系内与页面有交互行为后触发

2M 代码限制(如今已更新至 4M)使得像“转转官方”原来功能繁复的小任务管理器运行都要考虑引入 web 内容,再有就说 小任务管理器运行审核发布机制使得它终究只有像 web 一样迭代越快了 了 。

大伙儿儿曾大胆猜想,许多功能,因为直接因为小任务管理器运行数量增长迎来一波高峰。

打开的页面都要为 https 服务;

打开的页面 302 过去的地址也都要设置过业务域名;

大伙儿儿也曾畅想你说“小任务管理器运行页面+ web 页”混合开发(甚至 web 更重)会成为就说 的新趋势。

web-view 组件是另1个还都要用来承载网页的容器,会自动铺满整个小任务管理器运行页面。

“用完即走”是小任务管理器运行的口号,没有服务通知代表选择选择离开了高效触达(召回)用户的能力,或者用户就再也回不来了,促活和留存怎么会会办?

开发者买车人检查买车人的 https 服务否有有正常,测试办法 :普通浏览器打开对应的地址; 等等,详情请移步 web-view 问题报告 报告 汇总(https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=585555149&docid=ebfd9e5ec9986b4f23c41f8d8bbf2730)查阅,或在该帖子里留言。

看起来很厉害,因为咱们的小任务管理器运行没许多功能会怎么?

或者,web-view 不支持支付能力(其 JSAPI 能力不富含微信支付),许多在微信的文档里没有显式的声明,不过能在微信的 web-view 问题报告 报告 汇总中看后,许多也挺坑的…

基于 wepy,模板累积就说 个替换+适配的活,JS 麻烦些。离同构差距不小,美团您的 mpVue 呢?

全都功能完会 像订阅号里看篇文章一样,几分钟就能学会英语的,比如绝大累积电商的行为:从搜索、浏览比价、跟卖家交流,到加入购物车仅仅是走完了只有一半的生命周期;或者才是下单支付评价,还不包括推荐复购收回退款等等,没个15-30分钟哪里够。然而,没有用户会另1个劲开着某个小任务管理器运行,别人都要切出去聊天刷大伙儿儿圈呢。没有了化同步为异步的能力,绝大累积产品逻辑怎么实现服务闭环?

兼容性:许多不须太满担心,最新的基础库统计数据,1.6.4+ 的覆盖率已达 95% 以上;

正如前文所说,支付仅是电商诸多环节中的一环,主要在商品 or 订单详情页(哪些地方地方都要重写)。关于服务通知,通过几个重写后的原生小任务管理器运行页,还可以整理到足够的 form。

具体怎么重写,可参考大伙儿儿就说 的像 Vue 一样写微信小任务管理器运行-深入研究 wepy 框架。虽然 wepy 框架尝试从语法层面尽因为做到与 vue 技术栈的 web 项目同构,或者两端形状 API 兼容依旧是个棘手问题报告 报告 ,或者毕竟两者的语法糖生和熟命周期函数完会 一样。这里还有不少人工成本及学习与适应的过程,贴另1个例子:

然而,为哪些地方 web-view 不支持服务通知?哪里坑了?还请继续看微信官方文档里的定义。

小任务管理器运行的服务通知嘛,让人要要想用 web-view 做壳就发布上线也用不了。

是的,web-view 不支持推送服务通知(或称模板消息)。

其它的坑(常见错误):

PWA 的推送通知因其 API 太超前和许多不知名的服务被和谐用不了(你懂的);

两者同是基于 Web 的技术,开发出(或许)可替代 APP 的伪原生应用;

首先,这里区别了支付和提交表单许多行为,要分不同的请况上报,开始 了看后没…

定位:小任务管理器运行的 web-view 就像是 Hybrid 客户端嵌 H5 页一样,都要许多基础能力的就说 ,比如支付、服务通知(IM 和召回等场景)等等,最好使用原生小任务管理器运行;

在许多环境下,不太容易区分到底是哪些地方环境,小任务管理器运行官方给的判断办法 是 window.__wxjs_environment === 'miniprogram',或者在 web-view 进入第二页就说 ,安卓机下许多变量就 undefined 了。

虽然,支付行为对小任务管理器运行许多而言就说 极少数的交互,大多数小任务管理器运行甚至不含支付。全都大伙儿儿基本还得靠表单,可问题报告 报告 就出在这:小任务管理器运行的 web-view 和表单(form 组件) 不兼容!!!

最大的坑:不支持服务通知

如图所示,类似订阅号在对话列表的模式

数据通信:小任务管理器运行 => web-view 还都要在 url 中用 search、hash 的办法 ,web-view => 小任务管理器运行可用 bindmessage,一般用来处里分享信息传递的问题报告 报告 ;

扯远了点,但大伙儿儿都说:PWA 是引领下一代潮流的 Web 技术超集,而小任务管理器运行是对 Web 技术进行修(阉割)补(Hack)的(黑)魔法…

先不吐槽微信文档里 form 组件的定义是有多简陋,再看其 web-view 组件的定义~

其它 feature(欢迎讨论和补充):

一篇教你突破小任务管理器运行模板消息推送限制的文章中,也总结了服务通知的「多、快、好、省」等特点。哪些地方地方先不展开,大伙儿儿还能看后:

我不禁回想起 Google 就说 推出的 PWA(Progressive Web App),在这又有没有一丝神似。

PS:RN 和 Weex 也没有 form 组件。为哪些地方笔者一看后 form 就想到如下的图?

不做展开,欢迎移步:怎么客观地评价「小任务管理器运行」的体验? Web 在继续离大伙儿儿远去

何止铺满,尝试把 web-view 装进 form 组件内,form 组件都铺不在 。so,自动铺满 = 页面独占 = 所有许多元素都被直接覆盖…好吧,别人在文档最下方的 Bug & Tip 里写了行小字~

毕竟磨刀霍霍却另1个劲资源指在问题的团队应该不少,现在还都要把已有 H5 应用嵌入到小任务管理器运行 web-view 容器中,以最低的开发成本坐蹭微信流量红利,何乐而不为呢?

该小任务管理器运行近 30 天访问来源数据显示,有 20% 左右的用户通过模板消息进入小打卡,在各种来源中排名第 3 位(因为分母加上新用户的来源,比率和排名会更高);

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

剩下的业务,理论上都还都要用 web-view 来实现!!!运营活动页就不说了,开放 web-view 能力最大的优势就说 方便了类似需求。小任务管理器运行首页,甚至配置了 tabBar 的小任务管理器运行页都还都要。因为大伙儿儿还发现另1个神奇的 feature…

基于微信的通知渠道,大伙儿儿为开发者提供了还都要高效触达用户的模板消息能力,以便实现服务闭环并提供更佳的体验。

so,没有哪个(正经的)小任务管理器运行会不支持服务通知(流氓些的比如拼多多,看后个商品能让人连着推 N 条)。试想一下没有推送通知的 APP,你的产品、运营和老板们会同意么?

1999年12月发布的 HTML 4.01 Specification 就支持了 form,自 AJAX 在305年风靡世界后,跨域、文件上传完会 了 form 之外的处里方案,谁没事还用这玩意?

正好笔者所在的业务线,指在已有的 H5 应用却无对应小任务管理器运行的请况。大伙儿儿在开发对应小任务管理器运行时也算收获了不少经验(踩了不少坑),分享给有小任务管理器运行需求的大伙儿儿们~

综上,web-view 跟服务通知已绝缘。so,小任务管理器运行里网页的交互行为不算在微信体系内!!?

况且,用户基本完会 会关闭微信的消息推送,相较 App 的推送和短信推送来说,小任务管理器运行的推送触达率会高全都。

为哪些地方不支持

因为笔者团队的业务对服务通知与支付有血块依赖,没有大伙儿儿就要彻底放弃 web-view,把就说 的 H5 应用完整篇 重写至原生小任务管理器运行了么?显然完会 。

为哪些地方能称为最大的坑?大伙儿儿先了解一下服务通知,以下引用完整篇 来自微信官方小任务管理器运行文档。

具体怎么整理,可参考教你突破小任务管理器运行模板消息的推送限制这篇文章的做法。也如文章所说,一般大伙儿儿完会在小任务管理器运行页中,**把所有能点击的地方都加上 form。**因为虽然指在问题简单粗暴,还可以在 form 中多层嵌套 form,或者让点击事件冒泡的办法 来做!(谁让此 form 非彼 form 呢…够魔法么…)

登录:a. web-view 内走微信授权,b. 小任务管理器运行登录后再进入 web-view,并把相关 cookie 通过 url 传递给 web-view。

打开的域名没有在小任务管理器运行管理后台设置业务域名(注意是业务域名,完会 服务器域名);

3 个月前,微信小任务管理器运行推出了 web-view 组件引发了一波小高潮,笔者所在的大前端团队写过一篇浅析,详情可见:浅谈微信小任务管理器运行前端生态

总结起来就说 ,支付3条、提交表单(该表单需声明为要发模板消息)1条,四天有效。

页面还都要富含 iframe,或者 iframe 的地址都要为业务域名;

但小任务管理器运行内嵌 web-view 跟微信内置浏览器是一套环境,也就说 说你在 web-view 里面留下的以上痕迹,到微信里内置浏览器打开完会 ;