详解微信小程序与HTML5的差异

逃离我推掉我的手 2022-05-23 11:41 330阅读 0赞

微信小程序的页面粗略看与HTML类似，也是基于标记语言和样式渲染，而且多数css样式可以使用。实际上从视图层的角度来说，小程序与传统HTML5还是有明显的区别。

### 开发工具不同 ###

区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。

### 开发语言不同。 ###

小程序自己开发了一套WXML标记语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。

### 组件封装不同 ###

小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。

小程序开发者工具

微信小程序的开发工具，基于MINA框架(现已取消该名称)，现在官方公布的工具名为微信web开发者工具。小程序开发工具是一种基于Native System系统层的框架，由于并非运行在浏览器中，所以JavaScript在web中的一些诸如Document、Window等方法无法使用。

### 执行速度 ###

从执行的速度方面，普通HTML5和小程序有哪些不同呢，下面是简单比较：

传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。

相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。

## 语言层面的比较 ##

### 标签的差异 ###

WXML在语法上更接近XML语言，遵循SGML规范，区别于HTML语言随意的标签闭合方式，WXML语言必须包括开始标签和结束标签

<table> 
 <thead> 
  <tr> 
   <th>小程序</th> 
   <th>HTML5</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;view&gt;</code></td> 
   <td><code>&lt;div&gt;</code></td> 
   <td>默认样式 display:block</td> 
  </tr> 
  <tr> 
   <td><code>&lt;text&gt;</code></td> 
   <td><code>&lt;h1&gt;...&lt;h6&gt;</code><br><code>&lt;p&gt;</code><br><code>&lt;span&gt;</code></td> 
   <td><code>&lt;text&gt;</code>具有长按选中的属性</td> 
  </tr> 
  <tr> 
   <td><code>&lt;icon&gt;</code></td> 
   <td><code>&lt;i class="icon"&gt;&lt;/i&gt;</code></td> 
   <td><code>&lt;icon&gt;</code>可以直接用微信组件默认的图标。</td> 
  </tr> 
  <tr> 
   <td><code>&lt;input type="text"&gt;</code></td> 
   <td><code>&lt;input /&gt;</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>&lt;input type="checkbox"&gt;</code></td> 
   <td><code>&lt;checkbox-group&gt;</code><br>&nbsp;&nbsp;&nbsp;&nbsp;<code>&lt;checkbox /&gt;</code><br><code>&lt;/checkbox-group&gt;</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>&lt;input type="radio"&gt;</code></td> 
   <td><code>&lt;radio-group&gt;</code><br>&nbsp;&nbsp;&nbsp;&nbsp;<code>&lt;radio /&gt;</code><br><code>&lt;/radio-group&gt;</code></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 文件引入 ###

文件引入在模块化页面结构中非常有用。

WXML提供两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有作用域的;而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分。

### 尺寸单位 ###

WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。

在iPhone6上，**1rpx=0.5px**。建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。

所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。

view { font-size: 26rpx; width: 400rpx; height: 400rpx; }