小程序真题合集

小程序真题合集

    • 1. 微信小程序主要目录和文件的作用
    • 2. 微信小程序的生命周期函数
      • 2.1 应用(App)的生命周期
      • 2.2 小程序页面(Page)的生命周期
    • 3. 微信小程序的登陆流程
    • 4. 微信小程序中路由跳转的方式
    • 5. 谈谈wxml与标准的html的异同
    • 6. 谈谈WXSS和CSS的异同
    • 7. 封装微信小程序的数据请求
    • 8. 小程序传递数据的方法
    • 9. 小程序的双向绑定和vue的异同

1. 微信小程序主要目录和文件的作用

  • project.config.json 项目配置文件,用得最多的就是配置是否开启https校验;
  • App.js 设置一些全局的基础数据等;
  • App.json 底部tab, 标题栏和路由等设置;
  • App.wxss 公共样式,引入iconfont等;
  • pages 里面包含一个个具体的页面;
  • index.json (配置当前页面标题和引入组件等);
  • index.wxml (页面结构);
  • index.wxss (页面样式表);
  • index.js (页面的逻辑,请求和数据处理等);

2. 微信小程序的生命周期函数

2.1 应用(App)的生命周期

  • onLaunch:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。
  • onShow:当小程序启动,或从后台进入前台显示,会触发 onShow。
  • onHide:当小程序从前台进入后台,会触发 onHide。
  • onError:当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息。
[小程序初始化]  |  V  
[onLaunch]  |  V  
[onShow] (循环,当小程序显示时触发)  |     |  |<----|  V  
[onHide] (当小程序隐藏时触发)  |  V  
[onError] (发生错误时触发)

2.2 小程序页面(Page)的生命周期

  • onLoad:页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。

  • onShow:页面显示/切入前台时触发。

  • onReady:页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如 wx:if 等请在此函数中进行,否则可能出现设置无效的情况。

  • onHide:页面隐藏/切入后台时触发。如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。

  • onUnload:页面卸载时触发。如 redirectTo 或 navigateBack 的其他页面。
    此外,还有一些与页面滚动相关的事件:

  • onPullDownRefresh:监听用户下拉动作,一般用于实现下拉刷新功能。

  • onReachBottom:页面上拉触底事件的处理函数。

  • onShareAppMessage:用户点击右上角转发时触发。

[页面加载]  |  V  
[onLoad] (页面加载时触发,只触发一次)  |  V  
[onShow] (页面显示时触发,每次显示都会触发)  |  V  
[onReady] (页面初次渲染完成时触发,只触发一次)  |  V  
[页面与用户交互]  |  V  
[onHide] (页面隐藏时触发)  |  V  
[onUnload] (页面卸载时触发)  ^     |  |     |  |<----|  |  V  
[onPullDownRefresh] (用户下拉刷新时触发)  |  V  
[onReachBottom] (页面上拉触底时触发)

3. 微信小程序的登陆流程

  1. 用户触发登录
    • 用户在小程序中点击登录按钮或触发登录行为。
  2. 小程序前端调用wx.login()
    • 小程序前端调用wx.login()接口,请求微信服务器获取临时登录凭证(code)。
    • 微信服务器返回code。
  3. 小程序前端将code发送到开发者服务器
    • 小程序前端通过HTTP请求(如POST请求)将code发送到开发者服务器。
  4. 开发者服务器请求微信服务器
    • 开发者服务器接收到code后,结合小程序的appId和appSecret,向微信服务器发送请求。
    • 请求中包含code、appId和appSecret。
  5. 微信服务器验证code并返回用户信息
    • 微信服务器验证code的有效性。
    • 如果验证通过,返回用户的openid和session_key等信息给开发者服务器。
  6. 开发者服务器处理用户信息并生成登录态
    • 开发者服务器接收到微信服务器返回的用户信息后,进行进一步处理(如存储用户信息到数据库)。
    • 生成自定义的登录态(如token),用于后续的用户识别。
  7. 开发者服务器将登录态返回给小程序前端
    • 开发者服务器将生成的登录态通过HTTP响应返回给小程序前端。
  8. 小程序前端存储登录态并完成登录
    • 小程序前端接收到登录态后,将其存储到本地缓存中(如使用wx.setStorageSync())。
    • 存储成功后,小程序前端完成登录流程,用户已登录状态。
  9. 获取用户更多信息(如昵称、头像)
    • 如果业务需要,小程序前端可以调用wx.getUserProfile()接口,请求用户授权获取更多信息。
    • 用户授权后,小程序前端接收到用户信息并进行处理。
  10. 手机号授权
    • 如果业务需要手机号授权,小程序前端可以设置按钮的open-type属性为getPhoneNumber。
    • 用户点击授权按钮后,小程序前端接收到一个包含加密手机信息的code,并将其发送到开发者服务器进行解密。
[开始]  |  V  
[用户触发登录]  |  V  
[小程序前端调用 wx.login()]  |  V  
[微信服务器返回 code]  |  V  
[小程序前端将 code 发送到开发者服务器]  |  V  
[开发者服务器请求微信服务器验证 code]  |  V  
[微信服务器验证 code 并返回 openid, session_key]  |  V  
[开发者服务器处理用户信息并生成登录态]  |  V  
[开发者服务器将登录态返回给小程序前端]  |  V  
[小程序前端存储登录态]  |  V  
[小程序前端完成登录]  |  V  
[可选:获取用户更多信息]  |  V  
[可选:手机号授权]  |  V  
[结束]

4. 微信小程序中路由跳转的方式

  1. wx.navigateTo
    • 保留当前页面,跳转到应用内的某个页面。
    • 特性:
      • 会将页面缓放在页面栈中,最多十个。
      • 不能跳转到tabBar页面。
      • 使用wx.navigateBack可以返回到原页面。
    • 对于页面不是特别多的小程序,通常推荐使用wx.navigateTo进行跳转,以便返回原页面,提高加载速度。
  2. wx.redirectTo
    • 关闭当前页面,跳转到应用内的某个页面。
    • 特性:
      • 不会将当前页缓存在内存中。
      • 重定向到其它页面,当前页面移出页面栈,重定向的页面入栈。
      • 不允许跳转到tabbar页面。
      • 使用wx.redirectTo不能返回到原页面。
    • 当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的10层页面栈的情况下,使用wx.redirectTo可以避免跳转前页面占据运行内存。
  3. wx.switchTab
    • 跳转到tabBar页面,并关闭其他所有非tabBar页面。
    • 特性:
      - 删除内存中缓存的页面。
      - 页面栈全移除,只留下tabBar页面。
    • 用于跳转到tabBar页面。
  4. wx.navigateBack
    • 关闭当前页面,返回上一页面或多级页面。
    • 特性:
      • 传入参数-1返回上一页,-2返回上上页,返几个就移出几个页面栈。
      • 开发者可通过getCurrentPages()获取当前的页面栈,决定需要返回几层。
    • 用于返回上一页面或多级页面。
  5. wx.reLaunch
    • 关闭所有页面,打开到应用内的某个页面。
    • 特性:
      • 全部出栈,只留跳转后的页面。
      • 返回的时候跳到首页。
    • 用于关闭所有页面,重新打开某个页面。
函数名跳转方式特性
wx.navigateTo保留当前页面并跳转保留当前页面,最多可保留10个页面在栈中
wx.redirectTo关闭当前页面并跳转关闭当前页面,跳转到应用内某个页面,不允许跳转到tabBar页面
wx.switchTab跳转到tabBar页面跳转到tabBar页面,并关闭其他所有非tabBar页面
wx.navigateBack关闭当前页面并返回上一级或多级关闭当前页面,返回上一页面或多级页面
wx.reLaunch关闭所有页面并重新打开关闭所有页面,打开到应用内的某个页面

5. 谈谈wxml与标准的html的异同

WXMLHTML
用途微信小程序中用于构建页面结构的标记语言用于构建网页的标记语言
平台限制专为微信小程序设计,主要在微信客户端上运行可在各种Web浏览器上运行
语法结构类似于HTML,但更简洁,使用尖括号包裹标签,尾部斜杠闭合使用尖括号包裹标签,尾部斜杠或双标签闭合
标签特点为微信小程序定制,包括view、text、image等广泛的标签集合,如div、p、span、img、a等
样式表使用WXSS使用CSS
布局方式支持flex布局、grid布局等支持盒模型、浮动、定位等
数据绑定支持数据绑定功能,如{{ }}和wx:if等无内置数据绑定功能,但可通过JavaScript或前端框架实现
DOM树与window对象无DOM树和window对象有DOM树和window对象
组件与扩展性组件进行了重新封装,可通过自定义组件扩展丰富的组件和广泛的生态系统
兼容性在微信小程序平台上具有良好的兼容性在各种Web浏览器上具有良好的兼容性
预览与调试只能在微信小程序开发工具中预览和调试可在浏览器内预览和调试

6. 谈谈WXSS和CSS的异同

WXSSCSS
用途微信小程序中用于描述页面样式的语言用于描述HTML或XML等文件样式的计算机语言
语法结构大部分与CSS相似,但有一些特定的扩展和限制标准的样式表语法
选择器支持特定的选择器,如.class、#id、element等,但不支持某些高级选择器,如属性选择器[attribute]支持丰富的选择器,包括元素选择器、类选择器、ID选择器、属性选择器等
尺寸单位引入新的尺寸单位rpx(responsive pixel),可自适应屏幕宽度使用传统的像素(px)、百分比(%)、em、rem等单位
样式特性专注于微信小程序的特性,如rpx单位的自适应通用性强,适用于各种Web页面
响应式设计通过rpx单位支持响应式设计通过媒体查询等方式支持响应式设计
应用平台主要在微信小程序中使用广泛应用于各种Web页面
与HTML/WXML的关系与WXML配合,用于描述微信小程序页面的样式与HTML配合,用于描述网页的样式
继承与层叠与CSS类似,支持样式的继承和层叠完整的继承和层叠机制
动画与过渡支持动画和过渡效果,但具体实现可能与CSS略有不同丰富的动画和过渡效果支持
调试工具使用微信小程序开发者工具进行调试可在浏览器开发者工具中调试

7. 封装微信小程序的数据请求

  • 在根目录下创建utils目录及api.js文件和apiConfig.js文件;
  • 在apiConfig.js 封装基础的get, post 和 put, upload等请求方法,设置请求体,带上token和异常处理等;
  • 在api中引入apiConfig.js封装好的请求方法,根据页面数据请求的urls, 设置对应的方法并导出;
  • 在具体的页面中导入;

封装请求函数

// utils/request.js  function request(url, method = 'GET', data = {}, header = {}) {  return new Promise((resolve, reject) => {  wx.request({  url: url,  method: method.toUpperCase(),  data: method === 'GET' ? {} : data, // 根据请求方法决定是否发送 data  header: {  'content-type': 'application/json', // 默认为 JSON 数据  ...header,  },  success(res) {  if (res.statusCode === 200) {  resolve(res.data);  } else {  reject(res);  }  },  fail(err) {  reject(err);  },  });  });  
}  module.exports = {  request,  
};

在页面或其他地方使用封装的请求

// pages/somePage/somePage.js  const { request } = require('../../utils/request');  Page({  onLoad: function () {  request('https://api.example.com/data', 'GET')  .then((res) => {  console.log('请求成功', res);  // 处理成功逻辑  })  .catch((err) => {  console.error('请求失败', err);  // 处理失败逻辑  });  },  // ... 其他页面逻辑  
});

8. 小程序传递数据的方法

  • 使用全局变量实现数据传递 :在app.js文件中定义全局变量globalData,在源页面设置变量的值,目标页面通过getApp().globalData获取变量的值。

假设我们有一个全局的用户信息,需要在多个页面中使用,如用户名、头像等。
app.js

App({  globalData: {  userInfo: null // 初始化为null,后续可以通过登录等操作设置值  }  
});

xxx.js

const app = getApp();  
// 设置全局变量  
app.globalData.userInfo = {name: '张三', avatarUrl: 'http://example.com/avatar.jpg'};  // 获取全局变量  
console.log(app.globalData.userInfo);
  • 页面跳转或重定向时,使用url带参数传递数据 :通过在跳转链接中附加参数,目标页面在onLoad函数中通过options参数获取传递的值。

假设我们有一个商品列表页面(pages/productList/productList),当用户点击某个商品时,我们想要跳转到商品详情页面(pages/productDetail/productDetail)并传递商品ID。
productList.js

wx.navigateTo({  url: `/pages/productDetail/productDetail?productId=${productId}` // 假设productId是用户点击商品的ID  
});

productDetail.js

Page({  onLoad: function (options) {  // options中包含了从URL中解析出的参数  const productId = options.productId;  // 使用productId进行后续操作,如请求商品详情数据等  }  
});
  • 事件触发传参 :通过事件绑定,在源页面触发事件传递需要的参数,目标页面通过事件对象获取传递的值。
  • 使用缓存传递参数 :使用wx.setStorageSync()在源页面设置存储的值,目标页面通过wx.getStorageSync()获取值。

用户登录后,我们想要将登录凭证(如token)存储在缓存中,以便在后续请求中使用。
登录成功页面(loginSuccess.js)

wx.setStorageSync('token', loginToken); // 假设loginToken是登录成功后获取的token

需要token的页面(xxx.js)

const token = wx.getStorageSync('token');  
// 使用token进行后续请求或其他操作
  • 使用eventChannel(路由传参) :在页面跳转时,通过success回调函数中的eventChannel来向被打开页面传送数据。

A页面打开一个B页面,并希望在B页面打开后立即传递一些数据给B页面。
A.js

wx.navigateTo({  url: '/pages/B/B',  success: function (res) {  // 通过eventChannel向B页面发送数据  const eventChannel = res.eventChannel;  eventChannel.emit('acceptDataFromA', { data: '这是A页面传递的数据' });  }  
});

B.js

Page({  onLoad: function (options) {  // 监听A页面通过eventChannel发送的数据  const eventChannel = this.getOpenerEventChannel();  eventChannel.on('acceptDataFromA', function (data) {  console.log(data); // 输出:{ data: '这是A页面传递的数据' }  });  }  
});

9. 小程序的双向绑定和vue的异同

大体相同,但小程序直接this.data的属性是不可以同步到视图的,必须调用this.setData()方法!

小程序双向绑定Vue双向绑定
实现方式通过WXML模板和JS脚本实现,需要手动调用setData()更新数据通过模板引擎和响应式数据等机制实现,数据变化自动触发视图更新
数据绑定方式单向绑定,从数据到视图双向绑定,支持从视图到数据和从数据到视图的自动同步
视图渲染基于组件的渲染,需要手动编写组件模板和逻辑基于组件的渲染,提供丰富的组件选项和生命周期钩子函数
开发效率相对较低,需要手动处理数据更新和视图渲染相对较高,数据变化自动触发视图更新,减少手动操作
<view>  <input name="username" bindinput="handleInput" placeholder="请输入用户名" />  <view>输入的用户名是:{{username}}</view>  
</view>Page({  data: {  username: ''  },  handleInput: function(e) {  this.setData({  username: e.detail.value  });  }  
});
<div id="app">  <input v-model="message" placeholder="请输入信息">  <p>输入的信息是:{{ message }}</p>  
</div>new Vue({  el: '#app',  data: {  message: ''  }  
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】(六)—— vim编辑器

vim文件编辑器 Vim&#xff08;Vi Improved&#xff09;是一个高度可配置的文本编辑器&#xff0c;最初基于UNIX下的Vi编辑器发展而来&#xff0c;广泛用于程序开发和系统管理中。vim编辑器可以只通过终端命令即可编写修改文件&#xff0c;不需要和gedit一样需要打开类似于记事…

1V1音视频实时互动直播系统

李超老师的项目 先肯定分为两个两个端&#xff0c;一个是服务器端一个是客户端。客户端用于UI界面的显示&#xff0c;服务器端用于处理客户端发来的消息。 我们先搭建stun和turn服务器 首先介绍一下什么是stun协议&#xff0c; 它是用来干什么的&#xff1f; stun协议存在…

【深度学习】之 卷积(Convolution2D)、最大池化(Max Pooling)和 Dropout 的NumPy实现

1. 2D 卷积操作 import numpy as npdef conv2d(image, kernel, stride1, padding0):"""应用2D卷积操作到输入图像上。参数&#xff1a;- image: 输入图像&#xff0c;2D数组。- kernel: 卷积核&#xff0c;2D数组。- stride: 卷积步幅。- padding: 图像周围的零…

自动化迁移和更新物体检测XML数据集

引言 当处理大规模的图片数据集&#xff0c;尤其是在物体识别和计算机视觉领域时&#xff0c;有效管理和更新数据集变得非常重要。在本文中&#xff0c;我们将介绍一个简单的Python脚本&#xff0c;该脚本自动化了迁移和更新标注过的XML数据集的过程。 脚本概览 该脚本进行了…

vue3中多语言切换vue-i18n

安装 npm install vue-i18nnext 使用 一.在src中创建i18n文件夹&#xff08;文件名无所谓&#xff09; 在i18n下创建 en.ts zh.ts index.ts 分别写入下面代码 en.ts/js //en export default {message: {login: login} } zh.ts //zh export default {message: {login:…

Nginx网站服务【☆☆☆】

市面上常用Linux的web服务器&#xff1a;apache、Nginx。 apache与nginx的区别&#xff1f; 最核心的区别在于NGINX采用异步非阻塞机制&#xff0c;多个连接可以对应一个进程&#xff1b;apache采用的是同步阻塞多进程/线程模型&#xff0c;一个连接对应一个进程。apache美国…

MacOS 安装C语言版TensorFlow

文章目录 安装C语言版TensorFlow解压归档环境变量c_api.hC语言示例 安装C语言版TensorFlow 官方文档&#xff1a;https://tensorflow.google.cn/install/lang_c?hlzh-cnTensorFlow 提供了一个 C API&#xff0c;该 API 可用于为其他语言构建绑定。该 API 在 c_api.h 中定义&a…

从C到C++,C++入门(2)

在C入门篇&#xff08;1&#xff09;中&#xff0c;博主为大家简单介绍了什么是C&#xff0c;以及C中的关键字&#xff0c;命名空间&#xff0c;输入与输出和缺省参数的相关知识。今天就让我们继续一起学习C的基础知识点吧&#xff01;&#xff01; 1.函数重载 1.1函数重载的概…

经典的泡泡龙游戏源码免费下载

源码介绍 HTML5泡泡龙冒险小游戏是一款休闲网页游戏&#xff0c;游戏玩法是玩家从下方中央的弹珠发射台射出彩珠&#xff0c;多于3个同色珠相连则会消失。 源码下载 经典的泡泡龙游戏源码免费下载

C# WPF入门学习主线篇(六)—— TextBox常见属性和事件

欢迎回到C# WPF入门学习系列的第六篇。在前面的文章中&#xff0c;我们探讨了按钮&#xff08;Button&#xff09;的事件处理。今天&#xff0c;我们将继续学习另一个常用的WPF控件——TextBox。本文将介绍 TextBox 的常见属性和事件&#xff0c;并通过示例代码展示如何在实际应…

企业办公网安全管控挑战与解决方案

在数字化浪潮的推动下&#xff0c;企业正经历前所未有的变革。然而&#xff0c;随之而来的是一系列复杂的网络安全风险和挑战。我们的网络边界不再清晰&#xff0c;各种设备轻松接入企业网络&#xff0c;这不仅带来了便利&#xff0c;也极大地增加了安全风险。想象一下&#xf…

JavaScript 学习笔记 总结

回顾&#xff1a; Web页面标准 页面结构&#xff1a;HTML4、HTML5页面外观和布局&#xff1a;CSS页面行为&#xff1a;JavaScript强调三者的分离前后端分离开发模式 响应式设计Bootstrap框架入门 Bootstrap总结 基础 下载和使用基础样式&#xff1a;文本样式、图片样式、表格…

机器学习和深度学习相关指标和方法

什么是机器学习 机器学习是一门多学科交叉专业&#xff0c;它涵盖概率论、统计学、近似理论知识和复杂算法知识等领域。机器学习专门研究计算机如何模拟或实现人类的学习行为&#xff0c;以获取新的知识或技能&#xff0c;并重新组织已有的知识结构&#xff0c;从而不断改善自…

Vue Router 使用教程

Vue Router 是 Vue.js 的官方路由管理器&#xff0c;它提供了一种方便的方式来管理应用的路由。在本教程中&#xff0c;我们将介绍 Vue Router 的一些常见用法和示例。 一、安装 Vue Router 使用 Vue Router 之前&#xff0c;需要先安装它。可以使用以下命令通过 npm 安装&am…

笔记 | 软件工程03:软件过程和软件开发方法

软件过程 1 何为软件过程模型 1.1 软件开发的特点 1.2 软件过程 1.3 软件过程模型 1.3.1 软件过程模型产生的背景 软件工程产生之前的软件开发——作坊式的个人创作&#xff1a;聚焦于编写代码&#xff1b;依靠个体技能&#xff0c;缺乏合作&#xff1b;关注时空利用&#x…

SWIG源码安装

SWIG源码安装 https://github.com/swig 下载源码首先需要先生成.configure&#xff0c;在执行make & make install ./autogen.sh test -d Tools/configaclocal -I Tools/config ./autogen.sh: 11: aclocal: not found报错了 解决方案&#xff0c;安装automake sudo ap…

Threejs加载DOM+CSS到场景中,实现3D场景展示2D平面的效果

1. 前言 本篇文章主要实现了将DOM元素转换为Threejs可以使用的数据结构,使用CSS2DRenderer渲染器渲染这些DOMCSS的平面,使其可以作为一个物体添加到Threejs场景里 如下效果图: 2. 实现步骤 首先创建一个ThreejsVueVite的项目,作为本次的demo项目下载Threejs第三方库 yarn…

C++候捷stl-视频笔记4

一个万用的hash function 哈希函数的形式&#xff0c;一种是一般函数(右边)&#xff0c;一种是成员函数(左边)&#xff0c;类的对象将成为函数对象 具体做法例子。直接把属性的所有hash值加起来&#xff0c;会在hashtable中会产生很多的碰撞&#xff0c;放在同一个bucket中的元…

游戏UI设计秘诀:专家总结与实际案例解析!

随着游戏产业的不断发展&#xff0c;游戏UI界面设计变得越来越重要。一个好的游戏UI界面设计可以让玩家更容易理解游戏规则&#xff0c;提高游戏的可玩性&#xff0c;增加游戏的吸引力。在本文中&#xff0c;我们将讨论游戏UI界面设计的重要性和一些常见的设计原则。 1. 游戏U…

为什么要选择AWS?AWS的优势有哪些?

在当今时代,云计算已经成为各行各业的必备技术。作为全球领先的云计算平台,AWS(Amazon Web Services)凭借其卓越的性能、可靠性和创新能力,吸引了无数企业和个人开发者选择使用其服务。但是,为什么要选择AWS呢?AWS又有哪些独特的优势呢?让我们结合九河云的分析一起探讨一下。…