当前位置：首页 > news >正文

微信小程序部分知识点总结【2】

news 2026/5/20 1:32:13

微信小程序的原理是什么

微信小程序的原理是基于一种轻量级的应用程序模型，它允许开发者在微信客户端内部创建和运行应用程序。微信小程序采用了类似网页的技术栈，主要由两部分组成：前端和后端。

前端部分使用HTML、CSS和JavaScript等标准的Web前端技术来构建用户界面。开发者可以使用微信提供的小程序框架，如WXML（类似HTML）、WXSS（类似CSS）和小程序API等进行开发。这些技术使得开发者能够创建出丰富、交互性强的界面，并且支持实时更新。

后端部分是指小程序的服务端，负责处理小程序的逻辑和数据操作。开发者可以通过调用微信提供的云开发能力，实现服务器端的接口和功能，包括数据库存储、文件上传下载、云函数等。云开发还提供了便捷的开发工具和托管服务，简化了后端开发的流程。

当用户打开一个小程序时，微信客户端会进行相应的资源加载和解析，展示小程序的界面。小程序的前端代码在微信客户端内运行，与后端进行通信获取数据或执行相关操作。通过这种方式，开发者可以在微信中快速地开发和发布小程序，用户无需下载和安装即可使用。

微信小程序,vue,uni-app的生命周期

Vue、小程序和Uni-app都有自己的生命周期。

Vue的生命周期

Vue组件的生命周期分为8个阶段：

beforeCreate：实例被创建之前的阶段，此时数据观测和事件还未初始化。
created：实例已经创建完成，数据观测和事件已经初始化完毕，但DOM还未生成，无法访问到el。
beforeMount：在挂载之前调用，即将开始编译模板，将模板转换成虚拟DOM。
mounted：实例挂载到页面上后调用，此时可以操作DOM，进行异步操作。
beforeUpdate：数据更新之前调用，在这一步可以修改数据，但是不会触发再次渲染。
updated：数据更新之后调用，DOM已经更新完成，可以执行依赖于DOM的操作。
beforeDestroy：实例销毁之前调用，可以进行清理操作。
destroyed：实例已经销毁后调用，所有的事件监听器和子实例都已被移除。

小程序的生命周期

小程序的生命周期分为5个阶段：

onLaunch：小程序初始化时触发，只会触发一次。
onShow：小程序启动或从后台进入前台显示时触发。
onHide：小程序从前台进入后台时触发。
onError：小程序发生脚本错误或 API 调用失败时触发。
onPageNotFound：页面不存在触发。

Uni-app的生命周期

Uni-app的生命周期与Vue的生命周期类似，主要包括：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

需要注意的是，Uni-app还有一些平台特有的生命周期钩子，例如：

onLaunch：应用初始化完成时触发（仅H5、APP等非小程序平台）。
onShow：应用启动或从后台进入前台显示时触发（仅H5、APP等非小程序平台）。
onHide：应用从前台进入后台时触发（仅H5、APP等非小程序平台）。
onUniNViewMessage：监听原生nvue向uni–app发送的消息（仅App-nvue、微信小程序-nvue、QQ小程序-nvue）。

这些生命周期方法可以在实际开发中根据需要使用，以便控制组件或应用的行为。

Git项目如何配置，如何上传至GitHub

要配置Git项目并将其上传至GitHub，您需要按照以下步骤进行操作：

配置Git项目

安装Git：首先，确保您的计算机上已安装Git。您可以从Git官方网站（https://git-scm.com/）下载并安装适合您操作系统的版本。
创建本地仓库：在本地文件夹中，打开终端或命令提示符，并运行以下命令初始化一个新的Git仓库：

```
git init
```
添加文件到暂存区：将项目文件添加到Git仓库的暂存区，使用以下命令：
```
git add .
```
提交更改：将暂存区的文件提交到本地Git仓库中，使用以下命令：

```
git commit -m "Initial commit"
```

上传至GitHub

创建GitHub仓库：登录到GitHub，创建一个新仓库。输入仓库名称和描述，并选择公开或私有等选项。
关联远程仓库：返回本地终端或命令提示符，在其中运行以下命令，将本地仓库与远程GitHub仓库关联起来：

git remote add origin <GitHub仓库URL>

推送到远程仓库：最后，将本地仓库的内容推送到远程GitHub仓库中，使用以下命令：

```
git push -u origin master
```
这将把本地的master分支推送到远程GitHub仓库。

完成以上步骤后，您的Git项目将被配置并上传至GitHub！您可以在GitHub上查看并管理您的代码。

rpx、px、em、rem、%、vh、vw的区别是什么

rpx、px、em、rem、%、vh、vw 是用于表示长度或尺寸的单位，它们的区别如下：

rpx（响应式像素）：是微信小程序独有的单位，用于适配不同屏幕密度的设备。在不同设备上，1rpx 会等于对应设备下的物理像素数，即可实现屏幕适配。
px（像素）：是最常见的单位，在网页和移动应用开发中使用。它代表相对于屏幕的物理像素点。在同一设备下，1px 表示一个物理像素。
em：相对于父元素的字体大小，默认情况下是相对于浏览器的默认字体大小(16px)。例如，2em 表示当前元素的字体大小的两倍。
rem（根元素字体大小）：相对于根元素（通常为 <html> 元素）的字体大小。与 em 不同，rem 的参考值固定为根元素的字体大小。这使得 rem 单位更适合进行整体布局的控制。
%（百分比）：相对于父元素的百分比值。例如，50% 表示元素宽度或高度的一半。
vh（视窗高度单位）：表示相对于视口高度的百分比。例如，1vh 表示视口高度的 1%。
vw（视窗宽度单位）：表示相对于视口宽度的百分比。例如，1vw 表示视口宽度的 1%。

总结：

rpx 是用于微信小程序中的适配单位。
px 是常见的像素单位。
em 是相对于父元素字体大小的单位。
rem 是相对于根元素字体大小的单位。
% 是相对于父元素的百分比单位。
vh 和 vw 是相对于视口高度和宽度的百分比单位。

wx.getPhoneNumber()使用

在微信小程序中，您可以使用wx.getPhoneNumber()方法来获取用户的手机号码。以下是使用wx.getPhoneNumber()的基本步骤：

用户授权：确保您已经引导用户进行了手机号授权，例如通过按钮等触发用户点击事件。在事件处理函数中，调用wx.getPhoneNumber()方法。
调用wx.getPhoneNumber()：在授权的事件处理函数中，使用wx.getPhoneNumber()方法获取用户手机号。示例代码如下：

wx.getPhoneNumber({success: function(res) {var encryptedData = res.encryptedData;var iv = res.iv;// 在这里处理获取到的用户手机号数据},fail: function(err) {// 获取用户手机号失败}
})

处理获取到的手机号数据：在success回调函数中，您可以获取到用户手机号的加密数据（encryptedData）和解密算法的初始向量（iv）。您可以将这些数据发送到服务器端进行解密操作，以获取真实的手机号。请注意，解密过程需要在服务器端进行，因为涉及到敏感信息的处理。

需要注意的是，在使用wx.getPhoneNumber()之前，您需要先获取用户的登录凭证（code），并将其发送到服务器端与手机号关联，以便后续解密操作。解密过程需要参考微信提供的解密算法进行处理。

另外，为了确保数据安全性和合法性，请遵循微信官方的开发指南和隐私政策，并严格遵守相关法律法规。

以上是使用wx.getPhoneNumber()方法获取用户手机号的基本流程。具体实现时，请参考微信小程序官方文档和示例代码，以确保正确使用该 API。