小程序真题合集

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
   • 关闭所有页面，打开到应用内的某个页面。
   • 特性：
     • 全部出栈，只留跳转后的页面。
     • 返回的时候跳到首页。
   • 用于关闭所有页面，重新打开某个页面。

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

6. 谈谈WXSS和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()方法！

<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: ''  
  }  
});