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

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

浏览量:1969 时间: 来源:亮子介

微信小程序的页面粗略看与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语言必须包括开始标签和结束标签

                                         
小程序HTML5说明
viewdiv默认样式 display:block
texth1...h6
p
span
text具有长按选中的属性
iconi class="icon"/iicon可以直接用微信组件默认的图标。
input type="text"input /
input type="checkbox"checkbox-group
checkbox /
/checkbox-group
input type="radio"radio-group
radio /
/radio-group

文件引入

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

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;}
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎