小程序

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

基于小程序webview的开发

By Kainy Guo

基于小程序webview的开发

  • 1,349