蓝宇程序

您身边的百度小程序专家!

当前位置:首页 / 百度小程序公开课 / 闫斌:智能小程序Web化解决APP信息孤岛问题

闫斌:智能小程序Web化解决APP信息孤岛问题

栏目:百度小程序公开课   日期:2019-03-04   浏览量:815
摘要:

在互联网时代,搜索引擎可以抓取开放的互联网内容,但是到了移动互联网时代,一个个APP将互联网割裂成信息孤岛,百度计划通过小程序来打破这种局面。

小程序网页化

当我们来到了原生APP里面的时候,我们会发现传统Web页面里面的URL、锚点这些概念已经不存在了,原生APP里面的内容对爬虫天然隔离,所以说如果我们希望百度搜索引擎可以顺利的抓取小程序内容的话,就会遇到无法正常抓取的问题。(这方面涉及是一些搜索引擎优化的原理,更多SEO方面内容可查看我们的另外一个网站纵横SEO,专门分享SEO方面的技巧)。

闫斌:智能小程序Web化解决APP信息孤岛问题 

小程序对接百度搜索有一个非常关键的技术点,我们需要通过一种技术手段,让寄宿于原生APP作为依托的小程序,进行一种网页化的处理,让小程序可以独立的运行在浏览器当中。

公开课视频:百度闫斌

智能小程序Web化

我们称这样的技术为智能小程序的Web化,在这次公开课之前,我也陆续对接了一些开发者,大家的问题也普遍会集中在Web化的目的,以及收益在哪里?我也希望通过百度智能小程序公开课的机会,来向大家把Web化的目的和我们背后的逻辑来讲清楚。本文内容由蓝宇程序根据百度智能小程序公开课上闫斌分享整理而来,蓝宇程序,您身边的百度小程序专家!

百度小程序旨在打造一个更加开放互联互通的互联网形态,小程序的Web化能力是我们接入百度流量的一个前提,同时也是我们区分于业界其他小程序的一个技术特征,我们的目标是让开发者用一份代码,同时构建出客户端和浏览器两种的小程序产品,并且在代码的开发、编译、提包等环节尽可能的减少开发者对Web化的适配成本,一旦我们有了Web化这样的一个版本,我们就可以为我们后续对接百度搜索结果,阿拉丁、信息流等等提供的基本技术保障。

大家可以看到在左边的录屏是在百度APP里面的贴吧,右边录屏是在浏览器里面的一个Web化的一个版本。可以看到两个版本它们的展示形式是一致的,Web化的版本它的页面浏览是没有问题的,基本的交互体验也是OK的。

web化

一次开发生成2个版本

这里面的话需要强调的是,开发者只需要一份代码,两个产品形态就都出来了。而一旦我们拥有了小程序的Web化版本,我们就和普通的H5的网站一样,就可以链接到一个开放的web生态,我们的小程序就可以在浏览器里面直接浏览,同时也可以被爬虫顺利的抓取和收录,也可以在搜索引擎当中得到正常的分发和展现。

这是我们梳理的小程序Web化的整体架构,小程序可以在浏览器里面运行,首先需要解决一个问题,就是我们需要在浏览器的环境里面去模拟出一套和客户端基本一致的运行环境,这里就包括我们需要模拟逻辑层和视图层的分离,我们需要模拟代码的PR机制,我们需要模拟客户端里面的消息通信等等,我们在框架的上层基于MVVM的形式去管理数据与视图的绑定,我们基于逻辑层的数据的改变去驱动视图层的更新。

小程序Web化的整体架构

同时我们基于Web化的能力重新封装小程序的各种API组件和能力,达到了和客户端内接近的使用效果,APM组件的调用方式和开发者文档是保持一致的,就可以保证开发者的代码可以直接的迁移到我们Web化的版本当中来。

百度小程序开发者工具

我们将Web化小程序的构建以及提包整合进了开发者工具当中,开发者只要下载最新版本的开发者工具,打开了Web化的开关,就可以在开发同时再获得一份Web化的版本。

小程序Web化的版本框架设计需要解决一个很关键的问题,就是我们如何在浏览器里面去模拟客户端的多个webview的调度机制,也就是说如何在浏览器里面去实现控制层与逻辑层这样一个分离。我们的解法是将小程序设计为一个单页应用,逻辑层是作为一个隐藏的iframe与来进行实现。

视图层体现为一个独立的页面标签,逻辑层与视图层之间是基于postMessage来进行窗口通信的,同时我们实现了视图层的渲染框架以及高效的转场动画,我们基于Web能力重新实现了单页应用里面的管理,可以支持浏览器的前进后退和各类的手势。

微信扫一扫,分享到朋友圈

闫斌:智能小程序Web化解决APP信息孤岛问题
微信扫码关注蓝宇程序
微信扫码关注蓝宇程序
蓝宇数据(广州)有限公司 地址:广东省广州市科学城 电话:400 -080 -7157
Copright © 2020 蓝宇数据 All Rights Reserved. 粤ICP备18144795号 站点地图