一种基于H5实时预览和调试小程序的方法与流程

计算;推算;计数设备的制造及其应用技术一种基于h5实时预览和调试小程序的方法技术领域1.本发明涉及预览和调试小程序的方法领域，尤其涉及一种基于h5实时预览和调试小程序的方法。背景技术：2.小程序是一种无需下载安装即可打开使用的应用，使用传统的网页相关技术，依赖于手机应用提供的各种能力实现应用的相关功能，用户只需扫一扫或者点击应用按钮，即可在手机应用中打开小程序。由于小程序需要通过手机应用或者电脑客户端作为容器载体用于给小程序提供运行时支持。打开一个小程序，需先启动手机应用，由应用加载小程序。所以为了实现在没有小程序容器的情况下，也能够触达客户，出现了小程序同构框架。本质上是通过框架，能够编译出小程序的同时，输出h5的代码，达到同一份代码，既可以在支持小程序运行时的环境中加载，也可以在浏览器中使用(图1)。3.现有技术具有以下不足：1、性能损耗。由于框架的存在，在小程序与网页应用之上包了一层框架的运行时，用于抹平小程序与h5的实现差距。但是这样子处理，由于新增了一层运行时，不可避免的会对性能造成损耗。2、问题定位困难。运行时的存在对于开发者来说是一套完全全新的环境，编译之后的代码也有难以定位问题，当小程序某些界面渲染出现问题时，往往难以定位问题是由小程序导致的还是同构框架的运行时导致的。3、开发工作量增大。虽然同构框架已经尽可能的抹平小程序与网页应用的差距，但是依旧存在部分功能需要在网页应用上隐藏或者调整，同构框架也提供了环境变量等形式进行适。技术实现要素：4.针对背景技术中存在的问题，提出一种基于h5实时预览和调试小程序的方法。5.本发明提出一种基于h5实时预览和调试小程序的方法，通过在浏览器上实现一个小程序容器，实现小程序在浏览器上打开，方法涉及服务端和容器端；服务端包静态服务模块和系统层；容器端包括服务连接模块、逻辑层和视图层。6.优选的，方法步骤如下：7.s1、发起预览请求：通过浏览器访问服务端的静态服务地址，传入小程序appid；8.s2、服务端的系统层获取到appid，通过appid获取到小程序代码文件，并将小程序代码编译后返回到浏览器请求；9.s3、浏览器通过容器端加载小程序，启动逻辑层和视图层；10.s4、逻辑层与视图层通过服务连接模块进行交互；11.s5、小程序产生用户交互或用户输入，分情况处理事件；12.s6、服务连接模块统一将s5的事件，以请求方式发送到服务端系统层；13.s7、服务端的系统层根据不同事件，执行不同的逻辑，执行完成后通过请求响应返回到容器端的服务连接模块。14.优选的，s5中，页面交互时通过视图层发送事件；小程序业务逻辑交互时通过逻辑层发送事件。15.优选的，服务端用于响应打开小程序的请求，编译小程序，返回小程序的内容，用于处理小程序的网络请求，小程序发起网络请求时，将请求发送到服务端，由服务端发起请求，获取响应，再返回给小程序，还用于处理小程序的本地文件存储。16.优选的，处理小程序的本地文件存储的具体操作为：小程序访问内部的文件时，发起网络请求到服务端，拿到文件的内容；小程序操作文件，发起网络请求到服务端，进行文件的增删改查。17.优选的，容器端采用小程序的架构去渲染小程序，同时负责与服务端交互实现小程序的功能。18.与现有技术相比，本发明具有如下有益的技术效果：19.本发明设置服务端和容器端配合，服务端用于响应打开小程序的请求，编译小程序，返回小程序的内容，用于处理小程序的网络请求，小程序发起网络请求时，将请求发送到服务端，由服务端发起请求，获取响应，再返回给小程序，还用于处理小程序的本地文件存储。容器端采用小程序的架构去渲染小程序，同时负责与服务端交互实现小程序的功能。最终实现小程序在浏览器上打开。最终有效降低系统的性能损耗，在小程序出问题时准确定位，且开发工作量小。附图说明20.图1为现有技术中小程序的架构图；21.图2为本发明一种实施例中小程序的架构图；22.图3为本发明一种实施例中方法流程图。具体实施方式23.实施例一24.如图1所示，本发明提出的一种基于h5实时预览和调试小程序的方法，通过在浏览器上实现一个小程序容器，实现小程序在浏览器上打开，方法涉及服务端和容器端；服务端包静态服务模块和系统层；容器端包括服务连接模块、逻辑层和视图层。25.实施例二26.如图1所示，本发明提出的一种基于h5实时预览和调试小程序的方法，通过在浏览器上实现一个小程序容器，实现小程序在浏览器上打开，方法涉及服务端和容器端；服务端包静态服务模块和系统层；容器端包括服务连接模块、逻辑层和视图层。27.进一步的，服务端用于响应打开小程序的请求，编译小程序，返回小程序的内容，用于处理小程序的网络请求，小程序发起网络请求时，将请求发送到服务端，由服务端发起请求，获取响应，再返回给小程序，还用于处理小程序的本地文件存储。28.进一步的，处理小程序的本地文件存储的具体操作为：小程序访问内部的文件时，发起网络请求到服务端，拿到文件的内容；小程序操作文件，发起网络请求到服务端，进行文件的增删改查。29.进一步的，容器端采用小程序的架构去渲染小程序，同时负责与服务端交互实现小程序的功能。30.实施例三31.如图1所示，本发明提出的一种基于h5实时预览和调试小程序的方法，通过在浏览器上实现一个小程序容器，实现小程序在浏览器上打开，方法涉及服务端和容器端；服务端包静态服务模块和系统层；容器端包括服务连接模块、逻辑层和视图层。32.进一步的，服务端用于响应打开小程序的请求，编译小程序，返回小程序的内容，用于处理小程序的网络请求，小程序发起网络请求时，将请求发送到服务端，由服务端发起请求，获取响应，再返回给小程序，还用于处理小程序的本地文件存储。33.进一步的，处理小程序的本地文件存储的具体操作为：小程序访问内部的文件时，发起网络请求到服务端，拿到文件的内容；小程序操作文件，发起网络请求到服务端，进行文件的增删改查。34.进一步的，容器端采用小程序的架构去渲染小程序，同时负责与服务端交互实现小程序的功能。35.进一步的，上述基于h5实时预览和调试小程序的方法，步骤如下：36.s1、发起预览请求：通过浏览器访问服务端的静态服务地址，传入小程序appid；37.s2、服务端的系统层获取到appid，通过appid获取到小程序代码文件，并将小程序代码编译后返回到浏览器请求；38.s3、浏览器通过容器端加载小程序，启动逻辑层和视图层；39.s4、逻辑层与视图层通过服务连接模块进行交互；40.s5、小程序产生用户交互或用户输入，分情况处理事件；41.s6、服务连接模块统一将s5的事件，以请求方式发送到服务端系统层；42.s7、服务端的系统层根据不同事件，执行不同的逻辑，执行完成后通过请求响应返回到容器端的服务连接模块。43.进一步的，s5中，页面交互时通过视图层发送事件；小程序业务逻辑交互时通过逻辑层发送事件。44.本发明设置服务端和容器端配合，服务端用于响应打开小程序的请求，编译小程序，返回小程序的内容，用于处理小程序的网络请求，小程序发起网络请求时，将请求发送到服务端，由服务端发起请求，获取响应，再返回给小程序，还用于处理小程序的本地文件存储。容器端采用小程序的架构去渲染小程序，同时负责与服务端交互实现小程序的功能。最终实现小程序在浏览器上打开。有效降低系统的性能损耗，在小程序出问题时准确定位，且开发工作量小。45.上面结合附图对本发明的实施方式作了详细说明，但是本发明并不限于此，在所属技术领域的技术人员所具备的知识范围内，在不脱离本发明宗旨的前提下还可以作出各种变化。









图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!




内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,发布内容不收取任何费用也不接任何广告!




免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!