微信小程序的简单介绍

最新推荐文章于 2025-07-11 18:02:18 发布

转载最新推荐文章于 2025-07-11 18:02:18 发布 · 600 阅读

文章标签：

#微信小程序

总结专栏收录该内容

14 篇文章

订阅专栏

本文对比了微信小程序与HTML在开发语言、组件封装、执行速度、文件引入、尺寸单位等方面的差异，介绍了小程序的WXML、WXSS语言特点，以及其在组件、执行效率上的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序的简单介绍

1.与HTML的区别

HTML	微信小程序
`<div></div>`	`<view></view>`
`<h1></h1> ---<h6></h6><span></span><p></p>`	`<view></view>`
`<i class="icon"`	`<icon></icon>`
`<iput type="text">`	`<input/>`
`<iput type="checkbox">`	`<checkbox/>`
`<iput type="radio">`	`<radio/>`
`<iput type="file">`	`<view bindtab="chooseImage">`
`<a href="#"></a>`	`<navigator url="#" redirect></navigator >`
`<img src="">`	`<image src="" ></image >`

2.小程序与HTML的差别

开发语言的不同。
小程序自己开发了一套WXML标记语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。小程序自己开发了一套WXML标记语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。
组件封装不同。
小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。
执行速度
传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。
相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。
小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度
文件引入
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: 66rpx;
    width: 666rpx;
    height: 666rpx;
}

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