小程序

の

webview组件

是什么

是什么

为什么

怎么做

小程序诞生的背景

2014年刷屏的H5小游戏“围住神经猫”。这只露着屁股、腰身细长的白猫，在手机屏幕中贱贱地扭动腰肢，一副欠扁的模样。这是一个类似五子棋的小游戏，不同的是，围堵的对象变成了一只“神经猫”。当用户围堵住这只猫时，会出现一个分数值，显示你击败的全国人数比。

2015微信推出了JS-SDK，开放并规范了使用微信浏览器时，应用JavaScript和微信客户端的交互能力。

当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。

小程序

官方：一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验

简单点：只要用过微信，基本上也用过小程序

开发者角度

• 没法直接操作 DOM，也就没法动态去更改界面或者抓取页面数据
• 不支持动态载入脚本，XSS 漏洞自然也无缝可钻
• 审核机制-事前审核，事后下架停用、处罚

 < 灵活 <

> 功能 >

是什么

是什么

为什么

怎么做

首先，配几把钥匙？

不适合大部分营销场景

审核、时效、工作量…

小程序的主要应用场景在于低频刚需类的服务

审核类目、审核周期

https://developers.weixin.qq.com/miniprogram/product/material/#非个人主体小程序开放的服务类目

巨头涌入，接入量成倍增长

平台的KPI完成了

而开发者收获了福报

是什么

是什么

为什么

怎么做

• webviewH5 --> miniProgram

  • 通过js调用微信JSSDK的wx.miniProgram.navigateTo方法跳转到小程序的指定页面并且把参数当做query带给小程序原生页面

• miniProgram --> webviewH5

  • webview组件存在一个src属性, 用于展示指定的h5页面,
  • webview组件上的src属性如果只是改变了hash值, 当前组件上的页面是不会刷新的. 所以我们可以利用这个特性在miniProgram页面把想要传递给webviewH5的信息带到当前webview组件的src上. 当然, 是操作当前src的hash值

通信原理

微信小程序与webview中h5页面通讯https://blog.mrabit.com/details/81

微信小程序webview与h5通过postMessage实现实时通讯的实现

https://www.jb51.net/article/167957.htm

参考资料

Q&A