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

微信小程序面试题全攻略：10 大板块深度解析，附丰富案例代码

article 2024/12/31 10:50:57

一、基础概念类

1. 简述微信小程序的特点

  • 无需安装，触手可及，用完即走，无需卸载。
  • 开发成本低、周期短。
  • 跨平台，可在 iOS 和 Android 系统上运行。
  • 拥有丰富的微信生态入口。

2. 微信小程序的文件结构及作用

  • .json配置文件：用于页面或项目的配置，如窗口表现、导航栏样式等。
    • 页面的.json文件配置导航栏标题。
{
  "navigationBarTitleText": "我的页面"
}

  • .wxml文件：描述页面结构，类似 HTML。
<view>这是一个文本</view>

  • .wxss文件：定义页面样式，类似 CSS。
view {
  color: red;
}

  • .js文件：处理页面逻辑。
Page({
  data: {
    message: 'Hello World'
  }
})

3. 微信小程序架构及逻辑层与视图层关系

架构分为逻辑层和视图层。逻辑层运行在 JavaScriptCore 中，负责业务逻辑处理；视图层由 WXML 和 WXSS 组成，运行在 WebView 中，负责页面渲染。两层通过数据通信和事件系统进行交互。例如，逻辑层通过setData方法将数据传递给视图层进行渲染。

二、生命周期类

1. 微信小程序页面生命周期函数及触发情况

  • onLoad：页面加载时触发，可获取页面参数。
    • 从 A 页面跳转到 B 页面并传递参数，在 B 页面的onLoad中获取参数。
Page({
  onLoad: function (options) {
    console.log(options.param);
  }
})

  • onShow：页面显示时触发。
  • onReady：页面初次渲染完成时触发。
  • onHide：页面隐藏时触发。
  • onUnload：页面卸载时触发。

2. 小程序应用生命周期函数及触发时机

  • onLaunch：小程序初始化完成时触发。
    • 可以在这个函数中进行一些全局的初始化操作。
App({
  onLaunch: function () {
    console.log('小程序初始化完成');
  }
})

  • onShow：小程序显示时触发。
  • onHide：小程序隐藏时触发。

3. 利用页面生命周期函数优化性能和用户体验

在onLoad中加载必要数据，避免页面加载缓慢。在onHide中保存页面状态，以便下次快速恢复。例如，在onHide中保存当前页面滚动位置。

Page({
  onHide: function () {
    wx.setStorageSync('scrollTop', this.data.scrollTop);
  }
})

三、数据处理类

1. 微信小程序数据存储方式及适用场景

  • 本地存储：使用wx.setStorageSync/wx.getStorageSync等方法，适用于存储用户偏好设置等小量数据。
    • 存储用户的主题偏好。
wx.setStorageSync('theme', 'dark');

  • 云开发数据库：适用于存储大量数据，具有自动备份、权限管理等优势。
    • 存储用户的订单信息。
const db = wx.cloud.database();
db.collection('orders').add({
  // 订单数据
})

2. 小程序页面间数据传递方法

  • 通过 URL 参数传递，在页面跳转时将数据拼接到 URL 中，在目标页面的onLoad中获取参数。
    • 从 A 页面跳转到 B 页面并传递参数。
wx.navigateTo({
  url: '/pages/B?param=value'
})

在 B 页面的onLoad中获取参数：

Page({
  onLoad: function (options) {
    console.log(options.param);
  }
})

  • 使用全局变量或应用级别的数据存储，但要注意数据同步和管理。

3. 封装小程序网络请求及好处

  • 可以创建一个网络请求工具类，封装wx.request方法，处理请求头、错误处理等。
class HttpUtil {
  static request(url, data = {}, method = 'GET') {
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        data,
        method,
        header: {
          'Content-Type': 'application/json'
        },
        success: res => {
          resolve(res.data);
        },
        fail: err => {
          reject(err);
        }
      });
    });
  }
}

封装的好处是提高代码可维护性和复用性。

四、页面跳转与路由类

1. 小程序常见路由跳转方式及区别

  • wx.navigateTo：打开新页面，可返回原页面。
  • wx.redirectTo：重定向到新页面，不可返回原页面。
  • wx.switchTab：跳转到 tabBar 页面。

2. 路由跳转时携带参数及接收方法

在 URL 中拼接参数，如wx.navigateTo({ url: '/page?param=value' })。在目标页面的onLoad中通过options.param获取参数。

3. 从非 tabBar 页面跳转到 tabBar 页面并刷新数据

使用wx.switchTab跳转到 tabBar 页面，在目标页面的onShow中重新加载数据。

  • 从非 tabBar 页面 A 跳转到 tabBar 页面 B。
wx.switchTab({
  url: '/pages/B'
})

在 B 页面的onShow中重新加载数据：

Page({
  onShow: function () {
    // 重新加载数据的逻辑
  }
})

五、样式与布局类

1. 小程序wxss与传统 CSS 的区别

  • 单位不同，小程序有rpx单位，可根据屏幕宽度自适应。
  • 选择器支持有限。

2. 小程序实现响应式布局及rpx单位作用

使用rpx单位，它会根据屏幕宽度自动调整大小。以 750rpx 为基准宽度，在不同屏幕宽度下进行自适应。

view {
  width: 375rpx;
  height: 200rpx;
}

3. 页面布局问题的调试方法和工具

使用微信开发者工具查看元素层级、样式属性等。进行真机调试，查看实际效果。

六、组件与自定义组件类

1. 微信小程序内置组件及使用方法

视图容器组件（如view、scroll-view）、表单组件（如button、input）、导航组件（如navigator）等。在.wxml文件中通过标签形式引入并设置属性。

<view>这是一个视图容器</view>
<button>这是一个按钮</button>
<input placeholder="请输入内容"/>
<navigator url="/pages/other">跳转到其他页面</navigator>

2. 创建和使用自定义组件及适用情况

在项目目录下创建组件文件夹，包含.json、.wxml、.wxss、.js文件，进行配置和实现。

  • 创建一个自定义组件my-component。
  • my-component.json：
{
  "component": true
}

  • my-component.wxml：
<view>这是一个自定义组件</view>

  • my-component.wxss：
view {
  color: blue;
}

  • my-component.js：
Component({
  properties: {},
  data: {},
  methods: {}
})

在页面中使用自定义组件：

<my-component></my-component>

自定义组件适用于多个页面复用的功能模块。

3. 父子组件通信方式

  • 属性绑定：父组件向子组件传递数据。
    • 父组件向子组件传递一个名为message的属性。
<my-component message="{{messageFromParent}}"></my-component>

  • 事件绑定：子组件向父组件传递数据。
    • 子组件触发一个名为customEvent的事件并传递数据。
// 子组件
Component({
  methods: {
    triggerEvent() {
      this.triggerEvent('customEvent', { data: '这是子组件传递的数据' });
    }
  }
})

在父组件中监听子组件的事件并获取数据：

<my-component bind:customEvent="onCustomEvent"></my-component>


// 父组件
Page({
  onCustomEvent: function (e) {
    console.log(e.detail.data);
  }
})

七、性能优化类

1. 提高微信小程序性能的方法和技巧

  • 减少不必要的setData操作，避免频繁触发页面渲染。例如，不要在每次数据变化时都调用setData，可以合并多次数据变化后再调用。
  • 对图片进行适当压缩，减少加载时间。
  • 合理使用缓存，避免重复请求数据。例如，使用本地存储缓存一些不经常变化的数据。
  • 懒加载数据和页面，提高页面加载速度。例如，当用户滚动到特定位置时再加载更多数据。

2. 优化小程序首屏加载速度的方法

  • 减少首屏加载的数据量。例如，只加载首屏必需的数据，其他数据在用户交互时再加载。
  • 合理使用分包加载，避免一次性加载过多资源。例如，将不常用的页面或功能放在分包中，只有在需要时才加载。

3. 处理大量数据时避免频繁setData操作的方法

先对数据进行处理（如分页、过滤），减少传递给页面的数据量。例如，只显示当前页的数据，而不是一次性加载所有数据。

八、安全与权限类

1. 微信小程序数据安全措施和注意事项

  • 对用户输入的数据进行严格校验和过滤。例如，使用正则表达式对用户输入的手机号码进行校验。
  • 对敏感数据进行加密存储。例如，使用加密算法对用户密码进行加密存储。
  • 使用安全的网络协议（如 HTTPS）。
  • 合理控制小程序权限，避免过度授权。

2. 小程序获取用户信息和权限的注意事项及管理方法

明确提示获取目的和用途，在用户授权后进行操作。例如，在获取用户位置信息时，弹出提示告知用户获取位置的目的。使用wx.getSetting和wx.authorize等方法进行权限管理。

wx.getSetting({
  success: res => {
    if (!res.authSetting['scope.userInfo']) {
      wx.authorize({
        scope: 'scope.userInfo',
        success: () => {
          // 获取用户信息的逻辑
        },
        fail: () => {
          console.log('用户未授权获取用户信息');
        }
      });
    }
  }
})

3. 防止小程序被恶意攻击或篡改的方法

  • 进行安全加固，如代码混淆。
  • 对用户身份进行验证，防止非法用户访问。例如，使用登录验证机制。
  • 及时更新小程序，修复已知安全漏洞。

九、功能实现类

1. 微信小程序支付功能实现流程

小程序端调用支付接口，传递订单信息。后端接收到请求后，调用微信支付接口生成预支付订单，并返回给小程序端预支付交易会话标识等信息。小程序端使用返回的信息调用微信支付 API 发起支付请求。用户在微信中完成支付，微信服务器会通知小程序后端支付结果。小程序后端根据支付结果进行相应的业务处理，并通知小程序端支付结果。

// 小程序端支付逻辑
wx.request({
  url: '后端接口地址',
  data: {
    // 订单信息
  },
  success: res => {
    if (res.data.code === 0) {
      const payParams = res.data.data;
      wx.requestPayment({
        timeStamp: payParams.timeStamp,
        nonceStr: payParams.nonceStr,
        package: payParams.package,
        signType: payParams.signType,
        paySign: payParams.paySign,
        success: () => {
          console.log('支付成功');
        },
        fail: err => {
          console.log('支付失败', err);
        }
      });
    }
  }
})

2. 小程序实现下拉刷新和上拉加载更多功能

  • 在页面的.json文件中配置enablePullDownRefresh为true开启下拉刷新功能，在页面的onPullDownRefresh函数中进行下拉刷新的数据加载操作，并调用wx.stopPullDownRefresh停止下拉刷新动画。
Page({
  onPullDownRefresh: function () {
    // 下拉刷新数据加载逻辑
    wx.stopPullDownRefresh();
  }
})

  • 在页面的底部添加加载更多的提示，当页面滚动到底部时触发onReachBottom函数，进行上拉加载更多的数据加载操作。
Page({
  onReachBottom: function () {
    // 上拉加载更多数据加载逻辑
  }
})

3. 小程序集成地图功能及实现相关操作

  • 在页面的.json文件中引入地图组件。
{
  "usingComponents": {
    "map": "plugin://myPlugin/map"
  }
}

  • 在.wxml文件中使用<map>标签展示地图。
<map id="myMap"></map>

  • 通过wx.getLocation等方法获取用户位置信息，并设置地图的中心坐标等属性。可以使用地图的相关 API 实现定位、导航等功能。
Page({
  onLoad: function () {
    wx.getLocation({
      success: res => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        this.setData({
          latitude,
          longitude
        });
      }
    });
  }
})

十、综合类

1. 微信小程序与 H5 的异同点

  • 相同点：都可在移动端运行，使用 HTML、CSS、JavaScript 开发。
  • 不同点：小程序无需安装，性能相对较高，开发框架和 API 由微信提供相对封闭；H5 需要通过浏览器访问，性能受浏览器限制，开发更灵活。

2. 微信小程序未来发展看法及面临的挑战

  • 看法：在更多领域应用，生态更完善，技术不断更新。
  • 挑战：安全、性能、用户体验需改进，与原生应用竞争，兼容性问题。

3. 开发复杂微信小程序的项目规划和技术选型

  • 项目规划：需求分析、架构设计、开发计划、测试计划、发布计划。
  • 技术选型：开发框架、数据存储、网络请求、组件库、测试工具。例如，可以选择使用 Taro 等多端开发框架，云开发数据库进行数据存储，封装网络请求工具类进行网络请求，使用一些成熟的组件库提高开发效率，选择合适的测试工具进行单元测试、集成测试等。

http://www.kler.cn/a/372337.html

相关文章：

  • 【React】- 跨域PDF预览、下载（改文件名）、打印
  • 大数据Scala面试题汇总
  • Docker-构建自己的Web-Linux系统-镜像webtop:ubuntu-kde
  • 【openGauss】正则表达式次数符号“{}“在ORACLE和openGauss中的差异
  • 使用C++实现一个高效的线程池
  • 基于FPGA的2ASK+帧同步系统verilog开发,包含testbench,高斯信道,误码统计,可设置SNR
  • 2024-网鼎杯第二次模拟练习-web02
  • 【数据结构与算法】力扣 23. 合并 K 个升序链表
  • 正则表达式：强大的文本匹配与处理工具
  • 【数据库】数据库管理（上）事务 视图 索引分类以及生效规则
  • 【计算机网络 - 基础问题】每日 3 题（五十九）
  • Spring Boot框架实现的学生宿舍信息综合管理
  • 100种算法【Python版】第28篇——扩展欧几里得算法
  • Unity3D 鼠标移动到按钮上显示信息
  • vue3+vant实现视频播放（含首次禁止进度条拖拽，视频看完后恢复，保存播放视频进度，刷新及下次进入继续播放，判断视频有无全部看完等）
  • 记第一次本地编译seatunnel源码
  • 常见网安面试题
  • git log 用法详解
  • mysql遇到的问题
  • Optuna深度学习自动调参工具使用简明教程
  • Java 文件路径一口气讲完！(*￣3￣)╭
  • 牛客网刷题(3)（Java的几种常用包）
  • 实操｜如何优雅的实现RAG与GraphRAG应用中的知识文档增量更新？
  • Webserver(1.8)操作函数
  • CSS常见适配布局方式
  • 逆变器竞品分析--倍思500W方案【2024/10/30】