微信小程序开发超详细保姆式教程

JAY.LIN 收录于未分类

2025-01-03 约 9076 字预计阅读 19 分钟

https://bing.ee123.net/img/rand?artid=144910137

微信小程序开发（超详细保姆式教程）

一、微信小程序简介

（一）小程序的发展历程与优势

诞生与演进
- 微信小程序于 2016 年正式推出，自此开启了一种全新的应用模式。它凭借着无需下载安装、即点即用的便捷特性，迅速在移动应用领域崭露头角。随着时间的推移，小程序不断发展完善，功能日益丰富，生态逐渐壮大，成为连接用户与服务的重要桥梁。
独特优势
- 便捷分享 ：依托微信庞大的社交生态，小程序可以在微信内自由分享，用户能够轻松将感兴趣的小程序推荐给好友或分享到朋友圈，实现快速传播。例如，一款美食小程序，用户发现后可立即分享给朋友，方便大家一起查看美食推荐和餐厅信息。
- 无需安装 ：与传统 App 不同，小程序无需用户进行繁琐的下载和安装过程，节省了手机存储空间和下载时间。用户只需在微信中搜索或扫描小程序码，即可直接使用，真正实现了 “触手可及” 的应用体验。
- 快速开发 ：小程序提供了丰富的组件和 API，开发者可以基于这些资源快速构建应用。同时，开发文档详细且完善，降低了开发门槛，使得开发者能够在较短时间内完成项目开发，快速响应市场需求。

（二）与竞品对比

与支付宝小程序等的区别
- 虽然支付宝小程序、钉钉小程序、美团小程序、头条小程序、抖音 QQ 小程序等也在各自的平台上提供了类似的小程序服务，但微信小程序凭借微信的海量用户基础和强大的社交属性，具有独特的优势。微信小程序在社交分享、用户获取方面更加便捷，用户可以直接在聊天窗口、朋友圈等场景中分享和使用小程序，而其他平台的小程序在社交传播的广度和深度上相对较弱。

（三）开发前的准备工作

注册小程序账号
- 若尚未拥有微信公众平台账号，需前往微信公众平台首页（），点击 “立即注册” 按钮开启注册流程。注册时，账号类型有订阅号、服务号、小程序以及企业微信等多种选择，这里我们明确选择 “小程序” 类型。
- 接着填写账号信息，要特别注意使用未被微信公众平台注册且未被个人微信号绑定的邮箱，因为每个邮箱仅能用于申请一个小程序。填写完成后，登录邮箱激活账号。激活成功后，选择主体类型，若以个人身份开发，选择 “个人类型”，然后按要求准确登记主体信息，如姓名、身份证号码等。需牢记主体信息一旦提交便不可修改，它将作为使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时也不能变更或修改，所以务必确保信息的准确性和完整性。
下载并安装微信开发者工具
- 根据自己使用的操作系统（如 Windows 或 Mac），前往微信官方网站下载对应的微信 web 开发者工具安装包。下载完成后，找到安装文件并双击运行，按照安装向导的提示逐步完成安装过程。安装成功后，即可在电脑上找到开发者工具的图标，为后续的小程序开发做好准备。

（四）开发者工具的使用

新建项目
- 打开微信开发者工具，使用微信扫码登录。登录成功后，点击 “新建项目” 按钮，在弹出的窗口中依次填写相关信息。输入项目名称，例如 “myFirstMiniProgram”，选择项目存储路径，建议选择一个空文件夹，以便清晰管理项目文件。然后，输入注册小程序时获得的 AppID（若暂时没有 AppID，可选择 “注册或使用测试号” 进行开发，但部分功能可能会受限）。接着选择开发模式为 “小程序”，后端服务根据实际需求决定是否使用云开发，若不使用则选择 “不使用云服务”，模板选择可参考个人喜好或项目特点，如 “全部来源”“全部分类” 等。最后点击 “确定” 按钮，即可成功创建一个小程序项目，进入开发界面。
项目页面介绍
- 成功创建项目后，进入开发者工具主界面。该界面主要由菜单栏、工具栏、模拟器、编辑器和调试器等部分组成。菜单栏包含了项目管理、文件操作、编辑功能、视图控制、设置调整等各类操作选项，通过菜单栏可以方便地进行各种项目相关的操作。工具栏则提供了常用功能的快捷按钮，如编译、预览、真机调试、清缓存、上传等，使开发者能够快速执行这些常用操作。模拟器用于模拟小程序在手机上的运行效果，开发者可以在模拟器中查看小程序的界面布局、交互行为等，并且可以选择不同型号的手机进行模拟测试，以确保小程序在多种设备上的兼容性。编辑器是开发者编写代码的主要区域，分为左右两栏，左栏用于浏览项目文件目录结构，方便快速定位文件，右栏则用于编辑代码文件，支持代码的输入、修改、格式化等操作。调试器提供了强大的调试功能，如 Console（控制台）用于输出调试信息，方便开发者查看代码运行过程中的输出和错误提示；Sources（源代码）用于查看和调试代码，开发者可以在其中设置断点、单步调试等；Network（网络）用于记录网络请求信息，有助于分析网络请求的情况，优化网络性能等，这些调试功能能够帮助开发者快速定位和解决代码中的问题，提高开发效率。
项目组成结构剖析
- 一个完整的小程序项目由多个重要部分构成，各部分承担着不同的功能，共同协作实现小程序的正常运行。
- pages 文件夹 ：这是存放小程序各个页面文件的核心文件夹，每个页面都有其独立的文件夹，且文件夹名称与页面名称保持一致。在页面文件夹内，通常包含四个关键文件。.js 文件用于编写页面的逻辑代码，处理用户交互、数据请求、业务逻辑实现等操作，是页面功能实现的关键所在。.json 文件用于配置页面的相关属性，如是否允许下拉刷新、页面标题等，通过对这些属性的设置，可以定制页面的行为和外观。.wxml 文件类似于 HTML，主要负责构建页面的结构，描述页面中各个元素的布局和层次关系，决定了页面的呈现形式。.wxss 文件类似于 CSS，用于设置页面的样式，包括元素的颜色、字体、大小、边距、背景等样式属性，使页面具有美观的视觉效果。例如，一个名为 “index” 的页面，其完整的文件结构为 “pages/index/index.js”“pages/index/index.json”“pages/index/index.wxml”“pages/index/index.wxss”，每个文件各司其职，共同构建出 “index” 页面的功能和外观。
- utils 文件夹（可选） ：该文件夹用于存放一些工具类文件，如封装的网络请求函数、数据处理函数等。这些工具类文件具有较高的复用性，可以在多个页面中被重复调用，从而提高了代码的开发效率，避免了重复编写相似功能代码的繁琐过程。例如，开发者可以在 “utils” 文件夹中创建一个 “http.js” 文件，用于封装微信小程序的网络请求 API，这样在其他页面需要进行网络请求时，只需简单调用该函数即可，使代码结构更加清晰，易于维护。
- app.js 文件 ：小程序的入口文件，小程序启动时首先执行该文件。在 app.js 中，开发者可以进行全局数据的定义和初始化，例如定义全局变量来存储用户信息、应用配置等数据，还可以注册全局函数，方便在整个小程序中调用。同时，app.js 还负责处理小程序的生命周期函数，如 onLaunch 函数在小程序初始化时触发，常用于执行一些初始化操作，如获取用户信息、检查登录状态、初始化全局数据等；onShow 函数在小程序显示时触发，可用于更新页面数据、处理页面显示时的逻辑等操作；onHide 函数在小程序隐藏时触发，例如当用户切换到其他应用时，可在该函数中进行一些资源释放或数据保存等操作。通过合理处理这些生命周期函数，开发者可以更好地管理小程序的运行状态，确保小程序在不同阶段的正常运行。
- app.json 文件 ：小程序的全局配置文件，用于配置小程序的整体属性和页面路由等重要信息。在 app.json 中，“pages” 字段用于指定小程序包含的所有页面路径，这些路径必须按照 “pages / 页面名称 / 页面名称” 的格式准确填写，确保小程序能够正确识别和加载各个页面。“window” 字段用于设置小程序窗口的外观样式，如导航栏背景颜色、标题文字颜色、下拉 loading 样式等，通过对这些属性的精细配置，可以打造出具有统一风格和良好用户体验的小程序界面。此外，还可以在 app.json 中配置 tabBar（若小程序需要使用底部或顶部 tab 栏），详细设置 tab 栏的颜色、选中颜色、背景色、页签列表等属性，实现便捷的多页面切换功能。除了上述常用配置项外，app.json 还包含其他一些配置选项，用于进一步定制小程序的行为和功能，如设置小程序的样式版本、指定 sitemap.json 的位置等。
- app.wxss 文件 ：小程序的全局样式文件，用于设置小程序的全局样式规则。在 app.wxss 中定义的样式规则将作用于整个小程序的所有页面，为小程序提供统一的视觉风格。例如，可以在 app.wxss 中设置全局的字体大小、颜色、背景颜色等基本样式，确保各个页面在这些基本样式上保持一致。当然，页面自身的 wxss 文件也可以针对个别页面进行特殊样式的设置，当页面样式与全局样式冲突时，根据就近原则，页面样式会覆盖全局样式，从而实现个性化的页面设计，满足不同页面的特定需求。
- project.config.json 文件 ：项目的配置文件，主要保存了开发者在工具上针对项目所做的各种配置信息，包括项目名称、AppID、开发模式、后端服务等关键信息。此外，该文件还涵盖了编辑器的相关设置，如颜色主题、代码格式等，以及代码上传时的配置，如是否自动压缩等。当开发者更换电脑或重新安装工具时，只要载入同一项目的代码包，开发者工具会自动依据此文件恢复之前的个性化配置，极大地方便了开发者在不同环境下继续进行项目开发，确保开发环境的一致性和便捷性。
- project.private.config.json 文件（可选） ：个人项目配置文件，其中相同设置的优先级高于 project.config.json。该文件通常用于保存开发者个人的一些特定配置，如个人偏好的代码编辑设置、个性化的开发工具参数等。在团队协作开发时，为避免版本管理冲突，一般将 project.private.config.json 写入.gitignore 文件中，不进行版本控制，以确保团队开发过程的顺利进行，避免因个人配置差异对团队项目造成影响。
- sitemap.json 文件（可选） ：站点地图文件，其主要作用是告诉微信哪些页面可以被收录，从而提高小程序在微信搜索中的曝光率。通过配置 “rules” 数组中的 “action”（取值为 “allow” 或 “disallow”，用于指定是否允许被搜索）和 “page”（允许 / 不允许被搜索的页面路径或通配符）属性，可以灵活控制小程序页面的搜索可见性。例如，{“rules”:[{“action”:“allow”,“page”:"*"}]} 表示所有页面都允许被微信索引（这是默认情况）；而 {“rules”:[{“action”:“disallow”,“page”:“path/to/page”}]} 则配置指定页面不被索引，其余页面允许被索引。如果项目中没有 sitemap.json 文件，默认所有页面都能被索引，且该文件中默认的设置优先级最低，开发者可以根据小程序的需求合理配置 sitemap.json，以提升小程序的搜索效果。

比文云官网，专为企业提供小程序、网站、系统搭建服务，无论是模板搭建还是代码定制，通通都能满足，找服务来比文云官网。

二、小程序基本语法

（一）模板语法

文本渲染
- 小程序使用双大括号 “{ {}}” 进行文本插值，在双大括号内可以执行简单的 JavaScript 表达式，实现数据与视图的动态绑定。例如，在页面的.js 文件中定义了一个变量 “message”，其值为 “Hello, World!”，在.wxml 文件中使用 “{ {message}}”，则会在页面上显示 “Hello, World!”。除了直接显示变量值，还可以在双大括号内进行简单的计算，如 “{ {2 + 3}}” 会显示结果 “5”，“{ {msg.length}}” 可以显示变量 “msg” 的长度。这种文本渲染方式使得页面能够根据数据的变化实时更新显示内容，增强了页面的动态性和交互性。
条件渲染
- 通过 “wx:if”“wx:elif”“wx:else” 指令实现条件渲染。“wx:if="{ {condition}}"” 用于判断是否渲染某个元素，当 “condition” 为真时，渲染对应的元素；当 “condition” 为假时，可以结合 “wx:elif” 和 “wx:else” 来指定其他条件和对应的渲染内容。例如，根据用户的登录状态显示不同的界面元素：

收起

xml

复制

<view wx:if="{{isLoggedIn}}">欢迎回来，{{username}}！</view>
<view wx:elif="{{isLoggingIn}}">正在登录，请稍候...</view>
<view wx:else>请先登录。</view>

这样可以根据不同的业务逻辑，在页面上灵活展示不同的内容，提高页面的适应性和用户体验。

列表渲染
- 使用 “wx:for” 指令可以遍历数组或对象，生成重复的页面元素。例如，有一个数组 “fruits” 包含多个水果名称，在.wxml 文件中可以这样使用：

收起

xml

复制

<view wx:for="{{fruits}}" wx:key="index">{{item}}</view>

这里 “wx:key” 用于指定一个唯一的键值，提高渲染效率，默认情况下，当前循环项的索引用 “index” 表示，当前循环项用 “item” 表示。也可以使用 “wx:for-index” 和 “wx:for-item” 自定义索引和当前项的变量名，如：

收起

xml

复制

<view wx:for="{{fruits}}" wx:for-index="idx" wx:for-item="fruit">{{idx}} - {{fruit}}</view>

这样可以更清晰地在循环体内使用变量，方便处理和展示数据。

（二）样式语法

尺寸单位 rpx
- rpx（responsive pixel）是小程序独有的尺寸单位，用于解决屏幕适配问题。小程序规定无论手机型号如何，屏幕宽都为 750rpx。例如，在设计稿上量取的宽度为 375px 的元素，在小程序中应设置为 375rpx，这样在不同屏幕宽度的手机上，元素能够保持相对合适的显示效果，实现自适应布局。在开发过程中，建议以 iPhone6 的设计稿（750px）为标准，量取的像素值直接作为 rpx 的数值，无需进行复杂的换算，大大提高了开发效率。例如，一个按钮在设计稿上宽为 100px，高为 50px，在小程序中则设置为宽 100rpx，高 50rpx，即可在各种设备上保持较好的比例和显示效果。
样式规则与选择器
- WXSS 具有 CSS 的大部分特性，并进行了一些扩充和修改。开发者可以使用类选择器（.class）、ID 选择器（#id）、元素选择器（element）等定义样式规则，设置页面元素的颜色、字体、大小、边距、背景等样式属性。例如，定义一个类名为 “container” 的样式：

收起

css

复制

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  padding: 20rpx;
}

然后在.wxml 文件中应用该样式：

收起

xml

复制

<view class="container">
  <text>这是一个容器内的文本</text>
</view>

这样就可以将 “container” 类的样式应用到对应的视图元素上，实现页面的布局和美化。同时，WXSS 还支持样式的继承、组合等特性，方便开发者进行样式的管理和优化，提高样式代码的复用性和可维护性。

（三）事件处理

常用事件类型
- 小程序提供了多种常用事件类型，用于响应用户的操作。
- 点击事件（tap） ：通过 “bindtap” 或 “bind:tap” 绑定点击事件，当用户手指触摸后马上离开元素时触发。例如，为一个按钮绑定点击事件：

收起

xml

复制

<button bindtap="handleButtonClick">点击我</button>

在对应的.js 文件中定义 “handleButtonClick” 函数来处理点击事件的逻辑，如执行某个操作、更新页面数据等。
表单输入事件（input） ：使用 “bindinput” 或 “bind:input” 监听表单输入框的输入事件，用户在输入框中输入内容时会实时触发。例如：

收起

xml

复制

<input bindinput="handleInput" placeholder="请输入内容" />

在 “handleInput” 函数中，可以通过 “e.detail.value” 获取输入框中的当前值，并进行相应的处理，如实时验证输入内容、更新相关数据等。
表单确认事件（confirm） ：“bindconfirm” 用于监听表单输入确认事件，当用户点击输入框的确认按钮（如键盘上的回车键）时触发。常用于处理用户完成输入后的操作，如提交表单数据等。

事件传参
- 在小程序中，事件传参有特殊的方式。不能在绑定事件的同时直接为事件处理函数传递参数，而是通过 “data-*” 自定义属性传参。例如：

收起

xml

复制

<button data-id="100" bindtap="handleClick">按钮</button>

在事件处理函数中，可以通过 “e.target.dataset.id” 获取传递的参数 “100”。也可以使用 “mark” 属性传参，“mark” 包含从触发事件的节点到根节点上所有的 “mark:” 属性值，但使用相对较少，开发者可以根据实际需求选择合适的传参方式，实现事件处理函数与组件之间的数据传递，使事件处理更加灵活和多样化。

（四）内置组件

视图容器组件（view）
- view 组件相当于 HTML 中的 “
  ”，是一个块级元素，在小程序中广泛用于布局和分组页面内容。通过设置样式属性，可以实现各种灵活的页面布局效果。例如，使用 “display:flex” 可以将内部元素设置为弹性布局，“flex-direction” 属性可以指定弹性布局的方向（如 row 为水平方向，column 为垂直方向），“justify-content” 和 “align-items” 属性可以分别控制元素在主轴和交叉轴上的对齐方式。例如：

收起

xml

复制

<view class="flex-container">
  <view>元素 1</view>
  <view>元素 2</view>
  <view>元素 3</view>
</view>

css

复制

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

这样就可以将三个元素在水平方向上均匀分布，并在垂直方向上居中对齐，实现美观的布局效果。

文本组件（text）
- text 组件类似于 HTML 中的 “”，是行内元素，主要用于显示文本内容。可以通过设置 “color” 属性改变文本颜色，“font-size” 属性调整字体大小，“font-weight” 属性设置字体粗细等样式属性来美化文本显示。例如：

收起

xml

复制

<text style="color: red; font-size: 20rpx; font-weight: bold;">这是一段红色、20rpx 大小、加粗的文本</text>

此外，还可以通过 “user-select” 属性控制文本是否可选，“space” 属性控制文本中的空格显示方式，如 “space=“ensp”" 表示按照中文字符宽度的一半显示空格，为文本展示提供更多的灵活性和定制化选项。

按钮组件（button）
- button 组件用于创建按钮，触发点击事件，具有多种类型和样式可供选择。通过 “type” 属性可以设置按钮类型，如 “primary”（主色调按钮）、“default”（默认按钮）、“warn”（警告按钮）等，不同类型按钮具有不同的颜色和样式，以适应不同的场景需求。例如：

收起

xml

复制

<button type="primary">主色调按钮</button>
<button type="default">默认按钮</button>
<button type="warn">警告按钮</button>

还可以通过 “size” 属性设置按钮大小，如 “mini”（小尺寸按钮），“plain” 属性可以创建镂空按钮效果。同时，通过 “bindtap” 绑定点击事件处理函数，实现按钮点击后的业务逻辑处理，如提交表单、执行操作等。

输入框组件（input）
- input 组件用于接收用户输入的文本信息，具有丰富的属性和功能。可以通过 “type” 属性设置输入框类型，如 “text”（普通文本输入）、“number”（数字输入）、“password”（密码输入）等，满足不同类型数据的输入需求。“placeholder” 属性用于设置占位符文本，提示用户输入内容。例如：

收起

xml

复制

<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />

通过 “bindinput” 和 “bindconfirm” 等事件处理用户输入操作，在 “bindinput” 事件中实时获取用户输入的值并更新数据，在 “bindconfirm” 事件中处理输入完成后的操作，如提交表单、验证数据等，为用户提供流畅的输入体验和数据交互功能。

（五）内置 API

显示提示（showToast）
- “showToast” API 用于在页面上显示短暂的提示信息，向用户反馈操作结果或提供相关提示。例如，当用户提交表单成功时，可以显示 “提交成功” 的提示：

收起

javascript

复制

wx.showToast({
  title: '提交成功',
  icon:'success',
  duration: 2000
});

可以通过 “title” 属性设置提示文字内容，“icon” 属性选择提示图标（如 “success” 表示成功图标，“loading” 表示加载图标，“none” 表示不显示图标），“duration” 属性控制提示显示的时长，单位为毫秒，根据实际需求调整提示的样式和显示时间，以提高用户体验和交互效果。

本地存储（wx.setStorageSync 和 wx.getStorageSync）
- “wx.setStorageSync (key, value)” 用于将数据存储到本地缓存中，其中 “key” 是存储数据的键名，用于唯一标识存储的数据，“value” 是要存储的数据，可以是字符串、对象、数组等各种数据类型。例如，存储用户的登录信息：

收起

javascript

复制

wx.setStorageSync('userInfo', {
  username: '张三',
  password: '123456'
});

“wx.getStorageSync (key)” 则用于从本地缓存中获取数据，根据指定的 “key” 返回相应的数据。例如，获取用户登录信息：

收起

javascript

复制

let userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
  console.log('用户名：', userInfo.username);
}

通过本地存储 API，可以方便地在小程序中实现数据的持久化存储，用于保存用户偏好、登录状态、缓存数据等，提高用户体验和应用性能。

网络请求（wx.request）
- “wx.request” 用于向服务器发送网络请求，获取数据或提交数据，是小程序与服务器进行数据交互的重要方式。例如，向服务器获取商品列表数据：

收起

javascript

复制

wx.request({
  url: 'https://api.example.com/goods/list',
  method: 'GET',
  success(res) {
    console.log(res.data);
    // 处理获取到的商品列表数据
  },
  fail(err) {
    console.log(err);
    // 处理请求失败的情况
  }
});

可以通过 “url” 属性指定请求的 URL 地址，“method” 属性设置请求方法（如 “GET”“POST”“PUT”“DELETE” 等），“data” 属性在 POST 等请求中用于提交数据，“header” 属性设置请求头信息（如 “Content-Type”“Authorization” 等），根据服务器接口要求和业务需求，灵活定制网络请求，实现与服务器的高效数据交互，满足各种业务场景的数据需求。

（六）生命周期

页面生命周期函数
- 小程序的页面生命周期函数在页面的不同阶段自动触发，开发者可以在相应的生命周期函数中执行特定的操作。
- onLoad ：页面加载完毕时触发，常用于进行页面初始化工作，如获取页面参数、调用接口获取初始数据、初始化页面状态等。例如，

目录

微信小程序开发超详细保姆式教程

微信小程序开发（超详细保姆式教程）

一、微信小程序简介

（一）小程序的发展历程与优势

（二）与竞品对比

（三）开发前的准备工作

（四）开发者工具的使用

二、小程序基本语法

（一）模板语法

（二）样式语法

（三）事件处理

（四）内置组件

（五）内置 API

（六）生命周期