小程序真题合集

小程序真题合集

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

	WXML	HTML
用途	微信小程序中用于构建页面结构的标记语言	用于构建网页的标记语言
平台限制	专为微信小程序设计，主要在微信客户端上运行	可在各种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的异同

	WXSS	CSS
用途	微信小程序中用于描述页面样式的语言	用于描述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: ''  
  }  
});