(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210812104.7 (22)申请日 2022.07.12 (71)申请人 深圳凡泰极客科技有限责任公司 地址 518000 广东省深圳市福田区梅林街 道孖岭社区凯丰 路10号翠林大厦19层 1901-1902 (72)发明人 杨涛　徐鹏　吴志豪　陆乾昱　 奉靖　 (74)专利代理 机构 安徽智联芯知识产权代理事 务所(普通 合伙) 34237 专利代理师 金璐 (51)Int.Cl. G06F 9/445(2018.01) (54)发明名称 一种基于H5实时预览和调试小程序的方法 (57)摘要 本发明涉及预览和调试小程序的方法领域， 尤其涉及一种基于H5实时预览和调试小程序的 方法。 通过在浏览器上实现一个小程序容器， 实 现小程序在浏览器上打开， 方法涉及服务端和容 器端。 本发明设置服务端和容器端配合， 服务端 用于响应打开小程序的请求， 编译小程序， 返回 小程序的内容， 用于处理小程序的网络请求， 小 程序发起网络请求时， 将请求发送到服务端， 由 服务端发起请求， 获取响应， 再返回给小程序， 还 用于处理小程序的本地文件存储。 容器端采用小 程序的架构去渲染小程序， 同时负责与服务端交 互实现小程序的功能。 最终实现小程序在浏览器 上打开。 最终有效降低系统的性能损耗， 在小程 序出问题时准确定位， 且开发工作量小。 权利要求书1页 说明书3页 附图2页 CN 115237494 A 2022.10.25 CN 115237494 A 1.一种基于H5实时预览和调试小程序的方法， 其特征在于， 通过在浏览器上实现一个 小程序容器， 实现小程序在浏览器上打开， 方法涉及服务端和容器端； 服务端包静态服务模 块和系统层； 容器端包括 服务连接模块、 逻辑层和视图层。 2.根据权利要求1所述的一种基于H5实时预览和调试小程序的方法， 其特征在于， 步骤 如下： S1、 发起预览请求： 通过浏览器访问服 务端的静态服 务地址， 传入小程序AP PID； S2、 服务端的系统层获取到APPID， 通过APPID获取到小程序代码文件， 并将小程序代码 编译后返回到浏览器请求； S3、 浏览器通过容器端加载小程序， 启动逻辑层和视图层； S4、 逻辑层与视图层通过服 务连接模块进行交 互； S5、 小程序 产生用户交 互或用户输入， 分情况处 理事件； S6、 服务连接模块统一将S5的事 件， 以请求方式发送到服 务端系统层； S7、 服务端的系统层根据不同事件， 执行不同的逻辑， 执行完成后通过请求响应返回到 容器端的服 务连接模块。 3.根据权利要求2所述的一种基于H5实时预览和调试小程序的方法， 其特征在于， S5 中， 页面交 互时通过视图层发送事 件； 小程序业 务逻辑交 互时通过逻辑层发送事 件。 4.根据权利要求1所述的一种基于H5实时预览和调试小程序的方法， 其特征在于， 服务 端用于响应 打开小程序的请求， 编译小程序， 返回小程序的内容， 用于处理小程序的网络请 求， 小程序发起网络请求时， 将请求 发送到服务端， 由服务端发起请求， 获取响应， 再返回给 小程序， 还用于处 理小程序的本地文件 存储。 5.根据权利要求4所述的一种基于H5实时预览和调试小程序的方法， 其特征在于， 处理 小程序的本地文件存储的具体操作为： 小程序访问内部的文件时， 发起网络请求到服务端， 拿到文件的内容； 小程序操作文件， 发起网络请求到服 务端， 进行文件的增删改查。 6.根据权利要求1所述的一种基于H5实时预览和调试小程序的方法， 其特征在于， 容器 端采用小程序的架构去渲染小程序， 同时负责与服 务端交互实现小程序的功能。权　利　要　求　书 1/1 页 2 CN 115237494 A 2一种基于 H5实时预览和调试小程序的方 法 技术领域 [0001]本发明涉及预览和调试小程序的方法领域， 尤其涉及一种基于H5实时预览和调试 小程序的方法。 背景技术 [0002]小程序是一种无需下载安装即可打开使用的应用， 使用传统的网页相关技术， 依 赖于手机应用提供 的各种能力实现应用的相关功能， 用户只需扫一扫或者点击应用按钮， 即可在手机应用中打开小程序。 由于小程序需要通过手机应用或者电脑客户端作为容器载 体用于给小程序提供运行时支持。 打开一个小程序， 需先启动手机应用， 由应用加载小程 序。 所以为了实现在没有小程序容器的情况下， 也能够触达客户， 出现了小程序同构框架。 本质上是通过框架， 能够编译出小程序的同时， 输出H5的代码， 达到同一份代码， 既可以在 支持小程序运行时的环境中加载， 也可以在 浏览器中使用(图1)。 [0003]现有技术具有以下不足： 1、 性能损耗。 由于框架的存在， 在小程序与网页应用之上 包了一层框架的运行时， 用于抹平小程序与H5的实现差距。 但是这样子处理， 由于新增了一 层运行时， 不可避免的会对性能造成损耗。 2、 问题定位困难。 运行时的存在 对于开发者来说 是一套完全全新的环境， 编译之后的代码也有难以定位问题， 当小程序某些界面渲染出现 问题时， 往往难以定位问题是 由小程序导致的还是同构框架的运行时导致的。 3、 开发工作 量增大。 虽然同构框架已经尽可能的抹平小程序与网页应用的差距， 但是依旧存在部分功 能需要在网页应用上隐藏或者调整， 同构框架也 提供了环境变量 等形式进行适。 发明内容 [0004]针对背景技 术中存在的问题， 提出一种基于 H5实时预览和调试小程序的方法。 [0005]本发明提出一种基于H5实时预览和调试小程序的方法， 通过在浏览器上实现一个 小程序容器， 实现小程序在浏览器上打开， 方法涉及服务端和容器端； 服务端包静态服务模 块和系统层； 容器端包括 服务连接模块、 逻辑层和视图层。 [0006]优选的， 方法步骤如下： [0007]S1、 发起预览请求： 通过浏览器访问服 务端的静态服 务地址， 传入小程序AP PID； [0008]S2、 服务端的系统层获取到APPID， 通过APPID获取到小程序代码文件， 并将小程序 代码编译后返回到浏览器请求； [0009]S3、 浏览器通过容器端加载小程序， 启动逻辑层和视图层； [0010]S4、 逻辑层与视图层通过服 务连接模块进行交 互； [0011]S5、 小程序 产生用户交 互或用户输入， 分情况处 理事件； [0012]S6、 服务连接模块统一将S5的事 件， 以请求方式发送到服 务端系统层； [0013]S7、 服务端的系统层根据不同事件， 执行不同的逻辑， 执行完成后通过请求响应返 回到容器端的服 务连接模块。 [0014]优选的， S5中， 页面交互时通过视图层发送事件； 小程序业务逻辑 交互时通过逻辑说　明　书 1/3 页 3 CN 115237494 A 3