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

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

微信小程序的原理是什么

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

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

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

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

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

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

Vue的生命周期

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

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

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

  1. onLaunch:小程序初始化时触发,只会触发一次。
  2. onShow:小程序启动或从后台进入前台显示时触发。
  3. onHide:小程序从前台进入后台时触发。
  4. onError:小程序发生脚本错误或 API 调用失败时触发。
  5. onPageNotFound:页面不存在触发。
Uni-app的生命周期

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

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. 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项目
  1. 安装Git:首先,确保您的计算机上已安装Git。您可以从Git官方网站(https://git-scm.com/)下载并安装适合您操作系统的版本。
  2. 创建本地仓库:在本地文件夹中,打开终端或命令提示符,并运行以下命令初始化一个新的Git仓库:
git init
  • 添加文件到暂存区:将项目文件添加到Git仓库的暂存区,使用以下命令:
git add .
  • 提交更改:将暂存区的文件提交到本地Git仓库中,使用以下命令:
git commit -m "Initial commit"
上传至GitHub
  1. 创建GitHub仓库:登录到GitHub,创建一个新仓库。输入仓库名称和描述,并选择公开或私有等选项。
  2. 关联远程仓库:返回本地终端或命令提示符,在其中运行以下命令,将本地仓库与远程GitHub仓库关联起来:
git remote add origin <GitHub仓库URL>
  • 推送到远程仓库:最后,将本地仓库的内容推送到远程GitHub仓库中,使用以下命令:
git push -u origin master
  1. 这将把本地的master分支推送到远程GitHub仓库。

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

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

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

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

总结:

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

wx.getPhoneNumber()使用

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

  1. 用户授权:确保您已经引导用户进行了手机号授权,例如通过按钮等触发用户点击事件。在事件处理函数中,调用wx.getPhoneNumber()方法。
  2. 调用wx.getPhoneNumber():在授权的事件处理函数中,使用wx.getPhoneNumber()方法获取用户手机号。示例代码如下:
wx.getPhoneNumber({
  success: function(res) {
    var encryptedData = res.encryptedData;
    var iv = res.iv;
    // 在这里处理获取到的用户手机号数据
  },
  fail: function(err) {
    // 获取用户手机号失败
  }
})
  1. 处理获取到的手机号数据:在success回调函数中,您可以获取到用户手机号的加密数据(encryptedData)和解密算法的初始向量(iv)。您可以将这些数据发送到服务器端进行解密操作,以获取真实的手机号。请注意,解密过程需要在服务器端进行,因为涉及到敏感信息的处理。

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

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

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

相关文章
|
6月前
|
缓存 小程序 前端开发
微信小程序开发知识点
微信小程序开发知识点
229 0
|
小程序 JavaScript 前端开发
微信小程序系列——开发知识点集锦
微信小程序系列——开发知识点集锦
|
6月前
|
存储 小程序 API
微信小程序部分知识点总结
微信小程序部分知识点总结
81 0
|
12月前
|
JSON 小程序 前端开发
微信小程序开发之会议OA首页后台数据交互(内带新知识点分享)
微信小程序开发之会议OA首页后台数据交互(内带新知识点分享)
111 0
|
JSON 小程序 JavaScript
微信小程序学习第一周的第一篇博客(知识点:了解什么是小程序、各文件的作用和小程序的宿主环境)
微信小程序学习第一周的第一篇博客(知识点:了解什么是小程序、各文件的作用和小程序的宿主环境)
|
开发框架 JavaScript 小程序
小程序(逻辑层的全部知识点)保姆级讲解
小程序(逻辑层的全部知识点)保姆级讲解
204 0
小程序(逻辑层的全部知识点)保姆级讲解
|
前端开发 JavaScript 小程序
2.4【微信小程序全栈开发课程】ES6知识点详解--创建config.js配置文件
ES6是JavaScript的一个版本,因为我们前面用到的vue默认使用ES6语法开发,所以我们在这一节补充ES6的知识点,先了解我们项目经常用到的ES6的一些语法。
479 0
2.4【微信小程序全栈开发课程】ES6知识点详解--创建config.js配置文件
|
19天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
142 3
|
26天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
39 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目