微信小程序开发（一）基础概念汇总

大家好，我是千与千寻，最近开始涉及小程序开发了，学一学最后做出来一个项目，最开始进入微信小程序开发的时候，如果学过Vue框架接触微信小程序开发的速度会非常快。我准备顺便开设一个专题，进行讲解微信小程序的开发理论复习。大家一起学习进步~

一、微信小程序的开发步骤

微信小程序是一种轻量级的应用程序，可以在微信内部直接运行，无需用户下载和安装。以下是快速上手微信小程序开发的步骤：

1. 准备工作：安装微信开发者工具，并注册微信公众平台账号。

2. 创建小程序：在微信开发者工具中，选择“小程序项目”，填写小程序的名称、AppID等信息，创建小程序项目。

3. 编写代码：使用开发者工具自带的代码编辑器编写小程序的前端代码，包括HTML、CSS、JavaScript等。

4. 调试程序：在开发者工具中，点击“预览”按钮，可以在模拟器中预览小程序的效果，同时可以调试程序代码。

5. 发布小程序：在微信公众平台中提交小程序的审核，并等待审核通过后即可发布小程序。

6. 推广小程序：可以通过微信公众号、微信朋友圈等途径，将小程序推广给更多的用户。

总的来说，微信小程序开发相对简单，可以快速上手，同时也可以满足一定的业务需求。

二、微信小程序开发需要的工具

1. 微信开发者工具：用于调试、预览、构建和上传小程序代码的工具，可以在微信官网下载安装。

2. 代码编辑器：用于编写小程序的代码，可以选择多种代码编辑器，如 Visual Studio Code、Sublime Text、Atom 等。

3. 图片编辑器：用于制作小程序的图标、图片和页面设计，可以选择多种图片编辑器，如 Photoshop、Sketch、GIMP 等。

4. 调试工具：用于调试小程序代码，包括 Chrome 开发者工具、微信开发者工具内置的调试器等。

5. 原型设计工具：用于设计小程序的原型和交互，可以选择多种原型设计工具，如 Axure、Mockplus、Sketch、Figma 等。

6. 版本控制工具：用于管理小程序的代码版本，可以选择 Git、SVN 等版本控制工具。

三、 小程序开发中，比较常用的像素概念

1. rpx（responsive pixel）：是小程序中的自适应单位，可以根据不同设备的屏幕宽度进行缩放。在开发过程中，可以使用 rpx 单位来定义组件的尺寸、边距等样式属性，以适应不同屏幕尺寸的设备。

2. px（pixel）：是屏幕上的物理像素点，是设备显示屏幕上最小的显示单元。在小程序开发中，可以使用 px 单位来定义组件的尺寸、边距等样式属性，但是需要注意的是，使用 px 单位定义的尺寸在不同设备上可能会出现显示效果不一致的问题。

3. dp/dip（device pixel）：是设备独立像素，也称为逻辑像素，是一个抽象的概念，与屏幕尺寸和分辨率有关。在不同设备上，1dp 可能会对应不同数量的物理像素。在小程序开发中，通常不直接使用 dp/dip 单位，而是使用 rpx 单位来进行自适应布局。

4. dpr（device pixel ratio）：是设备像素比，指设备上物理像素和逻辑像素的比例关系。通常情况下，dpr 的值为 1、2 或 3，不同的设备具有不同的 dpr 值。在小程序开发中，可以使用 dpr 来进行屏幕适配和像素转换，以适应不同设备的屏幕尺寸和分辨率。
5. 物理像素（Physical Pixel）：也称为设备像素，是显示屏幕上的最小物理单位。在小程序中，物理像素通常用来描述屏幕分辨率，如iPhone 12 Pro Max的分辨率为2778 x 1284。
6. 逻辑像素（Logical Pixel）：也称为设备独立像素，是指在CSS或WXML中使用的像素单位。逻辑像素是根据屏幕像素密度（DPI）和屏幕尺寸来计算得出的，通常被用来描述页面元素的大小和位置。
7. 设备像素比（Device Pixel Ratio，简称DPR）：是物理像素和逻辑像素之间的比例关系，通常表示为逻辑像素数与物理像素数的比值。例如，iPhone 12 Pro Max的DPR为3，表示每个逻辑像素由3个物理像素组成。
8. CSS像素（CSS Pixel）：也称为视口像素，是指浏览器渲染页面时使用的像素单位。在小程序中，CSS像素通常与逻辑像素相同，因此可以直接在CSS中使用像素单位来描述页面元素的大小和位置。

四、微信小程序开发模板

1. WeUI 小程序模板：提供了一个基于 WeUI 样式的小程序模板，包含了常用的 UI 组件和基本的页面结构。可以快速构建一个美观的小程序。

2. ColorUI 小程序模板：提供了一个基于 ColorUI 样式的小程序模板，支持自定义主题和配色方案，可以创建出不同风格的小程序。

3. Taro 小程序模板：提供了一个多端统一开发的框架，支持小程序、H5 等多个平台，提供了一些常用的 UI 组件和 API，可以加速小程序的开发过程。

4. Uni-App 小程序模板：提供了一个基于 Vue.js 的多端开发框架，支持小程序、H5、App 等多个平台，提供了一些常用的 UI 组件和 API，可以快速构建跨平台应用。

五、微信小程序常用的CSS属性

color: 设置文本颜色
background-color: 设置背景颜色
font-size: 设置字体大小
font-family: 设置字体族
font-weight: 设置字体粗细
text-align: 设置文本水平对齐方式
vertical-align: 设置内联元素的垂直对齐方式
padding: 设置元素内部的填充空间
margin: 设置元素外部的边距空间
border: 设置元素的边框
border-radius: 设置元素的圆角半径
width: 设置元素的宽度
height: 设置元素的高度
display: 设置元素的显示方式 (如 block, inline, flex 等)
position: 设置元素的定位方式 (如 static, relative, absolute, fixed 等)
top, right, bottom, left: 设置绝对定位元素的偏移量