0638太阳集团「中国」官方网站 - 百度百科

致力于成为国内最好的互联网应用研发公司。客户热线：4006881286

小程序网页化

当我们来到了原生APP里面的时候，我们会发现传统Web页面里面的URL、锚点这些概念已经不存在了，原生APP里面的内容对爬虫天然隔离，所以说如果我们希望百度搜索引擎可以顺利的抓取小程序内容的话，就会遇到无法正常抓取的问题。

小程序Web化

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

智能小程序Web化

我们称这样的技术为智能小程序的Web化，在这次公开课之前，我也陆续对接了一些开发者，大家的问题也普遍会集中在Web化的目的，以及收益在哪里？我也希望通过百度智能小程序公开课的机会，来向大家把Web化的目的和我们背后的逻辑来讲清楚。

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

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

一次开发生成2个版本

一次开发生成2个版本

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

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

小程序Web化框架设计

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

百度小程序开发者工具

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

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

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

南昌乐腾科技有限公司是国内8年专业从事南昌APP定制开发、南昌微信小程

序开发、南昌微信应用开发、南昌网站建设、南昌电商网站平台开发的公司，我们

致力于成为国内最好的互联网应用研发公司。客户热线：4006881286