微信小程序开发和HTML5开发、css3开发的区别

发布日期： 2017-02-27 阅读量： 作者： 网络

微信小程序自从宣布上线以来啊，热度一直不减。因为其开发入门门槛之低，很多刚入行的工程师甚至还没有毕业的学生都是摩拳擦掌的想要大展一番拳脚，今天小女子就献丑，也来蹭一下热度。作为前端ui工程师，就从前端的视角，为大家分析下微信小程序开发和html5，css3开发之间的主要区别！

小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和html5有着紧密关联，甚至小程序就是基于html5开发。
经过仔细研究文档和代码开发，从视图层的角度来说，小程序与传统html5还是有明显的区别，主要区别在于：

第一：开发工具不同
区别于h5的开发工具+浏览器device mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。微信小程序的开发工具，基于mina框架（现已取消该名称），现在官方公布的工具名为微信web开发者工具。小程序开发工具是一种基于native system系统层的框架，由于并非运行在浏览器中，所以javascript在web中的一些诸如document、window等方法无法使用。
从执行的速度方面，普通html5和小程序有哪些不同呢，用一张图表简单表示下：

传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。
相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。
小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。

第二：开发语言不同
小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。我们来看一下WXML的标签语言和WXSS与HTML5+CSS3的语言区别。1、WXML在语法上更接近XML语言，遵循SGML规范，区别于HTML语言随意的标签闭合方式，WXML语言必须包括开始标签和结束标签，以image标签为例，以下2种写法都支持：
[img][/img]
or
[img][/img]
这里需要注意的是：
所有组件与属性都是小写，以连字符-连接。

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

<!--import-->
<import></import><!--include--><include></include>

# 微信小程序 HTML5开发 css3开发

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯3160 】【 SEO推广3048 】

上一篇: 批量删除 WordPress 垃圾评论及待审评论

下一篇: win10电脑显示无Internet访问怎么办

微信小程序开发和HTML5开发、css3开发的区别

随便看看