小程序和h5有什么差异

差异

微信小程序和H5应用在实现原理上的差异主要体如今架构、渲染方式、数据通讯、运行环境和API接口等方面。以下是具体的对比：
1. 架构和运行环境

• 微信小程序：
  
  
  
  • 架构：微信小程序主要分为逻辑层（JavaScript）和视图层（WXML、WXSS）。逻辑层运行在小程序的JSCore中，而视图层运行在WebView（它是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，官方文档中重点强调了脚本内无法使用浏览器中常用的 window 对象和 document 对象，就是没有 DOM 和 BOM 的相关的 API，这一条就干掉了 JQ 和一些依赖于 BOM 和 DOM 的NPM包）中，两者通过平台提供的桥接机制进行通讯。
    
  • 运行环境：逻辑层在微信提供的JS引擎中运行，视图层在微信内置的WebView中渲染。
    
  
  
• H5 应用：
  
  
  
  • 架构：H5应用是一个团体。HTML、CSS和JavaScript共同构成了一个Web页面。
    
  • 运行环境：H5应用在浏览器中运行，全部代码都在浏览器的环境中解析和执行。
    
  
  

2. 渲染方式

• 微信小程序：
  
  
  
  • 微信小程序采用双线程模子，将逻辑层和视图层分离，分别运行在差别的线程中（两者通过平台提供的桥接机制进行通讯）：
    
    
    
    • 逻辑层：运行在小程序的JSCore环境中，负责处理业务逻辑、数据盘算和API调用。
      
    • 视图层：运行在WebView中，负责渲染用户界面和处理用户交互。( 性能提升：由于小程序的渲染过程并不依赖于JS，因此纵然JS线程发生阻塞，页面的渲染也不会受到影响。这种机制有利于提高渲染效率，减少卡顿，提升用户体验。)
      
    
    
  • 通讯桥接机制
    
    
    
    • 逻辑层和视图层之间不能直接访问和操纵对方的数据和界面，因此必要通过微信小程序框架提供的桥接机制来进行通讯。这种通讯机制通常包罗以下几个方面：
      
    
    
  
  

1. 数据绑定和响应式更新（逻辑层--->视图层）

逻辑层通过数据绑定的方式将数据传递给视图层，视图层根据数据厘革自动更新界面。数据绑定的过程如下：

• 设置数据：逻辑层通过Page或Component实例的setData方法，将数据传递给视图层。
  
• 更新视图：视图层吸收到数据厘革的消息后，根据新的数据重新渲染界面。
  

2. 变乱处理（视图层--->逻辑层）

视图层中的用户交互（如点击、输入等）会触发变乱，这些变乱通过桥接机制传递给逻辑层进行处理。变乱处理的过程如下：

• 变乱绑定：在视图层（WXML）中定义变乱处理函数。
  
• 变乱触发：用户在界面上进行交互时，触发相应的变乱。
  
• 变乱传递：视图层将变乱信息通过桥接机制传递给逻辑层。
  
• 变乱处理：逻辑层的变乱处理函数吸收到变乱信息，执行相应的业务逻辑。
  

3. 消息传递

逻辑层和视图层之间的通讯实际是通过消息传递的方式实现的。微信小程序框架负责在两个层之间传递消息，包罗：

• 逻辑层到视图层的消息：如数据更新、视图更新等。
  
• 视图层到逻辑层的消息：如用户交互变乱、视图状态厘革等
  

• 
  
  
  
  • 
    
    
    
    • 通讯桥接机制具体实现
      
      
      
      • 依赖于微信小程序框架内部的设计和优化，开辟者无需直接接触底层的通讯细节。以下是桥接机制的一些关键点：
        
        
        
        • 消息队列：逻辑层和视图层之间维护一个消息队列，用于存储待传递的消息。
          
        • 消息格式：消息以JSON格式进行编码，包含消息类型、数据内容等信息。
          
        • 消息处理：逻辑层和视图层各自维护一个消息处理器，负责吸收、解析和处理消息。
          
        • 异步通讯：消息传递通常是异步进行的，以确保界面和逻辑的流畅性和响应性
          
        
        
      
      
    
    
  
  
• H5 应用：
  
  
  
  • H5应用的逻辑层和视图层通常是在同一线程（主线程）中运行，直接通过JavaScript代码操纵DOM来更新界面。主要的通讯方式包罗：
    
    
    
    • 直接DOM操纵：通过JavaScript直接操纵DOM元素，更新界面。
      
    • 变乱监听和处理：通过JavaScript监听DOM变乱（如点击、输入等）并处理。
      
    • 数据绑定：使用现代前端框架（如Vue.js、React.js）的数据绑定和响应式机制，实现视图的自动更新。
      
    
    
  
  

3. 数据通讯

• 微信小程序：
  
  
  
  • 通讯机制：逻辑层和视图层之间的通讯通过小程序框架提供的机制来实现，通常是通过变乱和数据绑定。
    
  • 背景通讯：可以通过小程序提供的API与服务器通讯，比方wx.request等。
    
  
  
• H5 应用：
  
  
  
  • 通讯机制：页面内的通讯可以通过DOM变乱、JavaScript函数调用等方式实现。
    
  • 背景通讯：可以使用标准的AJAX哀求、Fetch API、WebSocket等方式与服务器通讯。
    
  
  

4. 运行机制

• 微信小程序
  
  
  
  • 启动
    
    
    
    • 如果用户已经打开过某小程序，在一定时间内再次打开该小程序，此时无需重新启动，只需将背景态的小程序切换到前台，整个过程就是所谓的 热启动
      
    • 如果用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序必要重新加载启动，就是 冷启动
      
    
    
  • 销毁
    
    
    
    • 当小程序进入背景一定时间，或系统资源占用过高，大概是你手动销毁，才算真正的销毁
      
    
    
  
  

• h5：解析HTML CSS形成DOM树和CSSOM树，两者结合形成renderTree，js运行，当然中心存在一系列的阻塞问题，还有同源策略等等
  

5. 系统权限方面（特定功能）

微信小程序依托于微信平台，可以大概使用微信提供的特有功能和API，实现很多H5应用无法直接实现或不易实现的功能，如微信付出、微信登录、硬件接口（如摄像头、麦克风、蓝牙、NFC等）、微信特有功能等。
6.更新机制

• h5更新后访问地址即可
  
• 微信小程序必要稽核
  
  
  
  • 开辟者在发布新版本之后，无法立刻影响到全部现网用户，要在发布之后 24 小时之内才下发新版本信息到用户
    
     
  
  
  
  • 小程序每次 冷启动 时，都会查抄有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包进行启动，所以新版本的小程序必要等下一次 冷启动 才会应用上，当然微信也有 wx.getUpdateManager 可以做查抄更新
    
  
  

7. 开辟工具和调试

• 微信小程序：
  
  
  
  • 开辟工具：微信提供了专门的开辟者工具，集成了调试、预览、上传等功能，方便开辟者进行开辟和测试。
    
  • 调试：可以使用微信开辟者工具进行实时调试，并提供丰富的日志和调试信息。
    
  
  
• H5 应用：
  
  
  
  • 开辟工具：可以使用任何Web开辟工具和IDE（如VS Code、WebStorm等），以及浏览器的开辟者工具进行调试。
    
  • 调试：依赖浏览器的开辟者工具（如Chrome DevTools），可以进行断点调试、查看网络哀求、分析性能等。
    
  
  

总结来说，微信小程序和H5应用在实现原理上的差异主要是由于它们的架构设计、运行环境和生态系统的差别。小程序依托于微信平台，提供了很多平台专属的优化和功能，而H5应用则更加开放和机动，依赖于浏览器的标准和特性。
小程序为什么使用双层架构

微信小程序采用双线程架构的原因主要是为了优化性能和用户体验。双线程架构将逻辑层和视图层分离，使得业务逻辑处理和视图渲染在差别的线程中进行，从而提高了小程序的运行效率和响应速率。以下是采用双线程架构的具体原因和上风：

• 提高性能：
  
  
  
  • 将逻辑处理和页面渲染分离到差别的线程中，可以制止互干系扰，提高团体性能。比方，在复杂的业务逻辑盘算过程中，视图层仍然可以保持流畅的界面更新和响应。
    
  • 逻辑层和视图层通过消息机制进行异步通讯，可以制止阻塞和卡顿。这样纵然逻辑层的操纵较为耗时，也不会影响界面的即时响应。
    
  
  
• 安全性： 视图层无法直接操纵逻辑层的数据和代码，这样可以制止一些潜在的安全风险和漏洞。
  
  
  
  • XSS
    
    
    
    • 由于逻辑层和视图层分离，视图层不能直接执行逻辑层的JavaScript代码。这种隔离使得纵然视图层（WXML）中存在注入的恶意代码，也不能直接影响逻辑层的数据和操纵。
      
    • 逻辑层和视图层之间的通讯通过同一的API进行，传递的数据会颠末平台的安全查抄和过滤，进一步减少了XSS攻击的风险。
      
    
    
  • CSRF
    
    
    
    • 小程序通过平台的同一API进行哀求，这些哀求包含了平台自动添加的安全令牌（如session_key等），确保哀求的合法性。
      
    • 由于逻辑层和视图层的分离，用户在视图层进行操纵时，逻辑层的业务逻辑和数据处理颠末平台的校验，减少了CSRF攻击的风险。
      
    
    
  • DOM篡改:视图层的DOM结构由WXML和WXSS定义，不能直接通过逻辑层的JavaScript代码进行操纵，这种隔离减少了DOM篡改的大概性。
    
  • 安全权限管理：小程序的API权限由平台同一管理和控制，开辟者必要申请和用户授权后才能使用特定的API。
    
  
  
• 用户体验： 微信小程序在启动时可以并行加载逻辑层和视图层资源，减少初始加载时间，提升启动速率。同时，微信平台会对小程序进行预加载和缓存优化，进一步提升加载性能。
  

rpx

微信的自顺应单位，可以根据屏幕宽度进行自顺应。
在微信小程序中，1 rpx 表示屏幕宽度的 1/750，因此 rpx 和 px 的换算关系是动态的，基于设备的实际屏幕宽度。
通常蓝湖的设计稿中我们可以直接切换微信小程序：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。