微信小程序与传统HTML5的区别，你知道吗？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序与传统HTML5的区别，你知道吗？

微信小程序刚刚开放公测，网络圈子里就开始了各种解读和猜测。 有人认为小程序与HTML5密切相关，甚至小程序也是基于HTML5开发。

经过仔细研究文档和代码开发，从视图层来看，微信小程序和传统的HTML5还是有明显的区别。 主要区别是：

1、开发工具不同；

与H5的开发工具+浏览器模式预览模式不同，微信小程序的开发是基于自带的开发工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。

2、开发语言不同；

微信小程序开发自己的一套WXML标签语言和WXSS风格语言，而不是直接使用标准的HTML5+CSS3。

3、元件封装不同；

微信小程序自主开发了许多原生APP组件。 对于需要在HTML5中模拟的功能，可以直接在小程序中调用组件。

小程序开发工具

微信小程序开发工具基于MINA框架（现已取消名称）。 现在官方宣布的工具称为微信网页开发工具。 小程序开发工具是一个基于系统层的框架。 由于它不在浏览器中运行，因此无法使用Web上的一些方法，例如 等。

从执行速度上来说，普通HTML5和小程序有什么区别？ 我们用一个图表来简单表达一下：

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

无线XML

1. 标签

WXML 在语法上更接近 XML 语言并遵循 SGML 规范。 它与HTML语言的随机标签关闭方法不同。 WXML 语言必须包含开始标记和结束标记。 以图片标签为例，支持以下两种写法：

or

这里需要注意的是：

所有组件和属性均为小写并用连字符分隔。

2. 文件介绍

WXML提供了两种引入文件的方式，和。 不同的是：可以引入定义好的模板，并且模板有作用域； 相反，您将公共代码片段复制到目标文件中，这适合拆分公共页面片段。

在小程序的模块化拆分过程中，文件的引入非常重要。

吴晓雅

1. 尺寸单位

WXSS支持的单位有px、rem和rpx，其中rem和rpx可以适应屏幕容器，而px是固定大小。 其中1rpx=0.5px，WXSS和WXML中定义的rpx单位*终会转换成手机上可以识别的rem单位。

建议：设计师在开发微信小程序时可以将其作为视觉稿的标准。

因此，当工程师拿到750设计稿时，可以直接将PS中测量的容器尺寸定义为rpx微信小程序html5开发，而不需要进行2x尺寸转换。

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

注意：rpx单元不仅会在样式上进行适配，在以WXML样式编写时也会适配屏幕。

2. 风格介绍

我看到很多文章说小程序不支持@样式。 事实上，官方宣布的**个官方开发工具已经支持它。

import "../../wxss/common.wxss";

3. 选择器

小程序支持的选择器有官方文档中的.class、#id、,,,::after（注意双冒号）和::。

经测试，小程序支持:first-child、:last-child、.class-a .class-b{}，甚至更多级别的嵌套。 不过官方并不推荐级联的写法，因为考虑到后期扩展的可能性，将无法支持级联选择。

因此，为了保险起见，不建议编写.class-a .class-b{}之类的级联，避免后期工具过滤造成页面混乱。

成分

0.10版本新增小程序，操作反馈系列组件即将废弃。

我们简单用一张表格来对比一下HTML5和小程序的组件标签的区别；

我们来一一分析：

1. 查看

div和view都是盒模型，默认：block。 在盒模型的布局过程中，一般推荐使用flex的写法以及-:;align-items:;的定义。 实现盒子模型的水平和垂直居中。

2. 文字

无法通过长按选择文本节点以外的节点。 从0.10.开始，开发工具文本支持嵌套文本，但带类的文本会被面板过滤，样式不受影响。

    * 友情提示! 
     

3. 图标

图标可以直接使用微信组件的默认图标。 默认图标是，这是继承自WeUI的做法。 建议使用 svg 格式的自定义图标或。

目前市面上还没有什么好的工具可以自动将单个svg合并成一个svg，需要手动拼图。

4. 输入

输入类型，有效值：文本、、、数字、时间、日期。 输入不需要设置为行或垂直居中。 默认文本居中。 小程序已经分别制作了单选和单选组件微信小程序与传统HTML5的区别，你知道吗？，默认输入只支持输入文本。 上传文件需要通过调用小程序中的事件来完成；

:focus在小程序CSS不生效。 需要修改的样式通过-class="class"来定义。

.login .input-group input::-webkit-input-placeholder {
    color: #c0c0c0;
}
.login .input-group input:focus::-webkit-input-placeholder {
    color: transparent; 
}

5.

默认情况下，支持三个选择器：正常、日期和时间。 范围内的自定义数据通过事件检索并显示在页面上。 该调用是系统本机的。

这里小程序就放弃了这个组件。 考虑到该组件的交互不适合移动场景，*终被替换。

 
    选择
    北京
    上海
   
      {{area[index]}}    Page({
  data: {
    area: ['中国', '美国', '巴西', '日本'],
  }
})

6.

支持相对路径和绝对路径跳转。 默认是打开一个新页面。 需要添加才能打开当前页面；

仅支持跳转至5级页面；

无法跳转到小程序之外的链接地址；

登录页

在小程序开发工具中，默认打开一个新页面，工具左上角有一个返回按钮。 另外，当前页面是打开的，没有出现返回按钮。

7.图像

小程序的图片与HTML5的img*大的区别在于，小程序的图片是根据-image来实现的。 默认图像高度和宽度为 320*240。 这个默认的高度和宽度必须通过样式定义来覆盖，auto在这里不生效。

（开发说这样设置的原因是：如果设置了auto，页面布局会因为图片加载过程而闪烁（比如高度从0变成0），所以必须设置一个宽度和高度。）

*新的API支持获取图片的高度和宽度。 但这里返回的高度和宽度都是px单位，不支持屏幕适配；

图片包括三种缩放模式、 和 9 种裁剪模式。 三种缩放模式的实现原理如下：

scaleToFill{
    background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
}
aspectFit{
    background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
}
aspectFill{
    background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
}

8、

除了下面的实现方法之外，边框还使用 :after 方法来实现。 如果用户定义了上面的边框，则会出现两行。 您需要使用 :after 方法来覆盖默认值。 但这应该在*新的开发工具中得到解决。

button::after {
content:" ";
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
}

小程序不支持：这种写法，点击状态用.-hover{}样式覆盖，或者hover-class可以修改为自定义样式名。

9. CSS3动画

*新版本的开发工具已经支持动画，所以不需要在JS中编写动画队列。

小程序除了官方公布的组件外，还支持一些span、em、b等标签，但官方并不推荐使用它们。

浏览器内核

小程序将在下个版本中添加css前缀自动补全。 使用的插件是yes，兼容级别设置为>ios 8且>4.1。

const browserOptions = {
  browsers: [
  'last 3 versions',
  'ios >= 8',
  'android >= 4.1',
  ]
}

也就是说，我们在写css的时候，只要不加前缀就可以了。 例如：:flex，工具自动编译为:flex;:--flex。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等