大家好，我是千与千寻，最近开始涉及小程序开发了，学一学最后做出来一个项目，最开始进入微信小程序开发的时候，如果学过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: 设置绝对定位元素的偏移量

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

微信小程序开发，基础知识点汇总详解
目录一.目录中文件说明 1.app.js文件 2.project.config.json文件 3.sitemap.json文件 4.页面中的.json文件 5.如何创建小程序页面二.微信中代码的格 ...
微信小程序开发笔记基础篇②——微信小程序手动查看和代码查看开发者ID（AppID）
文章目录一.手动查看二.代码查看一.手动查看微信小程序后台开发管理-->开发设置-->开发者ID 二.代码查看 app.js onLaunch(opts) {const acco ...
微信小程序开发-入门基础
微信小程序基本目录 pages:主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件,.wxml文件是界面文件,.js是事件交互文件,用于处理界面的点击事件等功能:.wxss为界面 ...
微信小程序开发常见报错汇总
报错微信小程序(报错):Cannot read property 'name' of undefined TypeError 原因:在引用微信小程序组件时,声明 properties 属性时需要声明 ...
微信小程序开发的基础学习
回顾上篇内容 1.小程序核心理念: 在小程序里面,会把每一个标签看作一个矩阵,该矩阵的宽高会平行x轴.y轴那么我们只需要知道该矩阵一个左上角的坐标,即可确定该矩阵的位置 2.题外话
微信小程序开发教程(基础篇)8-数据绑定下
教程接上篇,当需要展示一组数据时,可以使用wx:for //.wxml <view wx:for="{{array}}">{{index}}: {{item.messa ...
微信小程序开发实战基础二、wxml模板，动态更新内联样式
1.模板使用 1.wxml中创建模板 <template name="msgItem"> <view> <text> {{index}}: {{ ...
微信小程序开发实战基础一、页面跳转，底部导航栏，分享，加载图片标签，列表
1.页面跳转 wx.navigateTo({ url: "../four/four" })--可返回 wx.redirectTo({ url: "../four/four ...
七天学习微信小程序开发（一）—— 学习笔记
文章目录前言目标第一天 -- 前端配置和编写微信开发微信小程序的代码结构常用标签(wxml) 常用样式(wxss) 界面布局的技术任务第二天 -- 深度学习微信前端编写(一) 程序底部 ...
毕业设计之 --- 微信小程序开发
简介近期有不少同学毕设涉及微信小程序开发, 但是基础的环境部署都不会, 面对一大堆资料无从下手, 希望学长能出一篇文章介绍一下微信小程序开发的基础知识. 准备工作申请账号进入小程序注册页根据指 ...

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

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

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

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

四、微信小程序开发模板

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

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

最新文章

热门文章

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

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

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

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

四、微信小程序开发模板

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

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

最新文章

热门文章

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