小程序
の
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实现实时通讯的实现
参考资料
Q&A
基于小程序webview的开发
By Kainy Guo
基于小程序webview的开发
- 1,316