Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

    • Vue

    • 计算机网络

    • CSS

    • JavaScript

    • 小程序

      • 常见面试题
        • 1.什么是微信小程序?
        • 2.小程序和普通网页开发有什么不同?
        • 3.小程序中的 WXML、WXSS、JS、JSON 分别是做什么用的?
        • 4.小程序有哪些常见的组件和 API?
        • 5.小程序如何实现页面跳转和传值?
        • 6.小程序如何进行数据的缓存和管理?
        • 7.小程序中如何处理异步请求?
        • 8.小程序中的双向数据绑定是如何实现的?
        • 9.小程序中如何进行性能优化?
        • 10.小程序的生命周期有哪些,分别做什么用的?
        • 11.小程序如何进行用户授权和登录?
        • 12.小程序如何实现支付功能?
        • 13.小程序如何进行分享功能的实现?
        • 14.小程序中如何进行地图定位和地图显示?
        • 15.小程序如何进行实名认证和获取用户信息?
        • 16.小程序如何进行数据的安全和保护?
        • 17.小程序如何进行版本的管理和发布?
        • 18.小程序如何进行错误的调试和处理?
        • 19.小程序如何进行测试和自动化测试?
        • 20.小程序如何进行跨平台开发?
        • 21.移动端和PC端的适配方案
    • 面试记录

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • 前端面试题
  • 小程序
HiuZing
2023-05-08
目录

常见面试题

# 1.什么是微信小程序?

# 2.小程序和普通网页开发有什么不同?

# 3.小程序中的 WXML、WXSS、JS、JSON 分别是做什么用的?

# 4.小程序有哪些常见的组件和 API?

常见组件:

  • 视图容器:view
  • 按钮:button
  • 图片:image
  • 文本:text
  • 输入框:input
  • 导航栏:navigationBar
  • 列表:list
  • 滚动视图:scroll-view
  • 轮播图:swiper
  • 下拉刷新:pullDownRefresh
  • 上拉加载:onReachBottom
  • 菜单:picker
  • 开关:switch

常见 API:

  • 网络请求:wx.request()
  • 本地存储:wx.setStorage()、wx.getStorage()
  • 用户授权:wx.getUserInfo()、wx.authorize()
  • 地理位置:wx.getLocation()、wx.openLocation()
  • 支付接口:wx.requestPayment()
  • 分享接口:wx.showShareMenu()
  • 语音接口:wx.startRecord()、wx.stopRecord()
  • 图片接口:wx.previewImage()、wx.saveImageToPhotosAlbum()
  • 媒体接口:wx.createVideoContext()、wx.createAudioContext()

# 5.小程序如何实现页面跳转和传值?

# 6.小程序如何进行数据的缓存和管理?

  1. wx.setStorage() 和wx.getStorage():可以将数据存储在本地缓存中,包括同步和异步的方法。
  2. wx.setStorageSync()和 wx.getStorageSync():同上,是同步的方式,一般在小程序启动时使用。
  3. wx.setStorageLimitSize():可以设置本地缓存的最大容量限制。
  4. wx.clearStorage() 和wx.removeStorage():分别用于清除本地缓存和删除指定的缓存数据。
  5. 小程序框架提供了一些内置的数据管理方法,比如页面间传递数据可以使用 Page 的 onLoad 和 onUnload 生命周期函数,组件间传递数据可以使用 props 和事件派发等方式。

# 7.小程序中如何处理异步请求?

  1. 回调函数中的 this 指向会发生改变,一般需要使用箭头函数或者将 this 提前保存在一个变量中,以便在回调函数中使用。
  2. 可以通过 Promise 对象的方式对异步请求进行封装,便于使用 async/await 进行异步编程,增加代码可读性。

# 8.小程序中的双向数据绑定是如何实现的?

小程序中的双向数据绑定可以通过 setData() 方法实现。当页面数据发生变化时,可以通过调用 setData() 方法将变化的数据更新到页面。小程序会自动监听数据的变化并实时更新到页面上,从而实现双向数据绑定。

# 9.小程序中如何进行性能优化?

  1. 使用小程序提供的组件,减少自定义组件的使用,因为小程序提供的组件通常都是经过优化的。
  2. 减少网络请求,可以将一些常用的数据缓存在本地,减少请求的次数。
  3. 对于列表数据,可以使用分页加载的方式,避免一次性加载过多的数据。
  4. 减少页面元素的数量和复杂度,避免过多的嵌套和样式。
  5. 尽可能减少使用动画和过渡效果,因为这些效果会增加页面的复杂度和渲染负担。
  6. 对于大量图片的展示,可以使用懒加载的方式,只有当图片进入视口时才进行加载。
  7. 避免频繁的数据更新和渲染,可以使用防抖或节流的方式控制更新的频率。
  8. 在使用原生组件时,尽量避免频繁的更新样式。
  9. 对于一些复杂的计算或渲染,可以使用 Web Worker 或 WXS 进行处理,避免阻塞主线程。
  10. 对于一些高频操作,可以使用缓存的方式减少操作的次数。

# 10.小程序的生命周期有哪些,分别做什么用的?

  1. App生命周期
    • onLaunch(options): 当小程序初始化完成时触发,全局只触发一次。
    • onShow(options): 当小程序启动或从后台进入前台显示时触发。
    • onHide(): 当小程序从前台进入后台时触发。
    • onError(error): 当小程序发生脚本错误或者 API 调用失败时触发。
  2. Page生命周期
    • onLoad(options): 当页面被加载时触发,可接受页面参数。
    • onShow(): 当页面被展示时触发。
    • onReady(): 当页面初次渲染完成时触发。
    • onHide(): 当页面被隐藏时触发。
    • onUnload(): 当页面被卸载时触发。
    • onPullDownRefresh(): 当下拉刷新时触发。
    • onReachBottom(): 当页面触底时触发。
    • onShareAppMessage(options): 当用户点击分享时触发,返回分享内容。
    • onPageScroll(options): 当页面滚动时触发。
    • onResize(options): 当页面尺寸变化时触发。
    • onTabItemTap(options): 当 tab 栏某一项被点击时触发.
  3. Component生命周期
    • created(): 组件实例被创建时触发,注意此时不能调用 setData 方法。
    • attached(): 组件实例进入页面节点树时触发。
    • detached(): 组件实例被从页面节点树移除时触发。
    • ready(): 组件布局完成后触发,此时可以调用 setData 方法。
    • moved(): 组件实例被移动到另外一个节点时触发。

# 11.小程序如何进行用户授权和登录?

  1. 用户在小程序中点击“登录”按钮,触发事件。
  2. 触发事件后,小程序会调用微信提供的wx.login接口获取用户的 code。
  3. 使用获取到的 code 通过调用微信提供的 wx.request 接口向后端发送请求,后端通过微信提供的接口获取用户的openid和session_key。
  4. 后端通过 openid判断该用户是否已经在系统中注册,如果已经注册则直接返回登录成功,否则跳转到注册页面进行注册。
  5. 注册成功后,后端生成自定义登录态(token),并将 token 返回给小程序。
  6. 小程序将 token 存储在本地,用于后续访问需要登录态的接口。

# 12.小程序如何实现支付功能?

  1. 商户向微信支付平台注册并获取商户号和密钥;
  2. 在小程序端,用户在完成订单后,向商户后台发起支付请求,商户后台再向微信支付平台发起支付请求;
  3. 微信支付平台接收到支付请求后,会生成一个预支付订单;
  4. 商户后台将预支付订单的信息传回小程序端;
  5. 小程序端调用微信支付API,通过微信支付平台生成支付参数;
  6. 小程序端使用微信支付API调起微信支付界面,用户在该界面上完成支付;
  7. 微信支付平台会向商户后台发送支付通知,商户后台收到支付通知后修改订单状态。

例如,如果你有一个小程序的购物功能,用户可以将商品加入购物车,然后进入结算页面。当用户点击结算按钮后,你的小程序需要向后端发送请求,生成订

单并获取支付参数。然后使用wx.requestPayment()调起微信支付界面,让用户完成支付。支付完成后,微信服务器会将支付结果通知给后端,你的小程序

可以根据结果进行相应的处理,如显示支付成功页面,或提示用户支付失败等。

# 13.小程序如何进行分享功能的实现?

  1. 配置小程序的分享信息,可以在页面的 onLoad 函数中设置 wx.showShareMenu() 来开启分享功能,并使用 wx.updateShareMenu() 或 wx.onShareAppMessage() 来设置分享内容和回调函数。
  2. 在需要分享的页面中添加分享按钮,可以使用小程序提供的 button 组件或者自定义样式的 view 等组件来实现。
  3. 当用户点击分享按钮时,触发相应的回调函数来进行分享操作。可以通过调用小程序提供的 wx.shareAppMessage() 函数来实现分享操作。
  4. 可以通过在小程序管理后台配置分享图标和标题等信息来提高分享的效果和转化率。

# 14.小程序中如何进行地图定位和地图显示?

  1. 在小程序开发者工具中,在“工具”菜单下选择“构建 npm”,选择使用的地图组件库(如腾讯地图、百度地图等),安装相应的 npm 包。
  2. 在小程序页面中引入地图组件,可以通过自定义组件的方式引入或者使用原生组件。
  3. 在小程序页面的 js 文件中,通过微信提供的 API 获取当前位置信息,并将当前位置信息传递给地图组件。
  4. 地图组件通过接收到的位置信息,在地图上显示当前位置。

# 15.小程序如何进行实名认证和获取用户信息?

# 16.小程序如何进行数据的安全和保护?

  1. 合理使用接口权限:小程序提供了一些接口权限,比如数据存储、支付等接口,需要进行权限申请和审核,开发者应该按照官方规定进行接口权限使用,避免滥用。
  2. 数据加密:小程序提供了数据加密的功能,可以通过加密算法对敏感数据进行加密,在网络传输和存储过程中增强数据的安全性。
  3. 会话管理:小程序中可以通过登录获取会话凭证,开发者可以通过这个凭证进行用户识别和数据访问的授权。同时,小程序会话过期也是需要关注的,需要及时处理会话过期情况。
  4. 安全检测:开发者可以使用微信提供的安全检测工具进行代码安全检测,避免恶意代码的注入和攻击。
  5. 隐私保护:在小程序中,需要遵循相关的隐私保护规定,比如用户信息保护、数据使用规定等,保护用户隐私信息的安全。开发者需要在小程序开发过程中充分考虑用户隐私的保护。

# 17.小程序如何进行版本的管理和发布?

# 18.小程序如何进行错误的调试和处理?

  1. 日志输出:小程序提供了console对象,可以使用console.log()等方法输出调试信息,可以通过微信开发者工具的调试面板查看输出的日志信息。
  2. 调试工具:微信开发者工具提供了调试工具,可以在开发者工具中模拟用户场景,检测程序的运行情况,包括网络请求、本地存储等方面的问题。
  3. 异常处理:在代码中可以使用try...catch语句捕获异常并进行处理,避免程序崩溃或者出现未知的错误。
  4. 接口调试:小程序中的接口调试可以使用类似Postman等第三方工具,或者使用小程序自带的API接口进行调试,对于接口返回的数据进行打印和检测。
  5. 代码规范:良好的代码规范可以帮助减少代码出现错误的几率,可以参考官方的小程序开发规范。

# 19.小程序如何进行测试和自动化测试?

手动测试是指开发者通过模拟用户在小程序中的操作,对小程序的功能进行测试,以发现并解决潜在的问题和错误。手动测试需要在小程序开发者工具中进行,可以使用模拟器模拟真实设备的运行环境,在不同的设备和环境中进行测试。

自动化测试则是使用脚本自动化测试小程序,可以通过一系列脚本模拟用户操作,对小程序进行自动化测试。自动化测试可以通过提高测试的覆盖率和减少测试成本来提高测试效率。

在小程序中,可以使用一些测试框架进行自动化测试,例如:

  1. WePY:是一个类Vue的小程序组件化开发框架,支持使用Vue的语法,可以进行单元测试和UI测试。
  2. uni-app:是一个跨平台的小程序开发框架,支持多端发布,提供了一系列的测试工具和命令,可以进行单元测试和UI测试。
  3. Jest:是一个流行的JavaScript测试框架,可以用于小程序的单元测试和集成测试。
  4. Mocha:是一个灵活的JavaScript测试框架,可以用于小程序的单元测试和集成测试。

# 20.小程序如何进行跨平台开发?

  1. Taro:一款基于 React 语法的多端跨平台开发框架,支持编译到微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ 小程序、快手小程序、H5 等多个平台。
  2. uni-app:一款基于 Vue 语法的跨平台开发框架,支持编译到微信小程序、支付宝小程序、百度小程序、头条小程序、QQ 小程序、App、H5 等多个平台。
  3. mpvue:一款基于 Vue 语法的小程序开发框架,支持编译到微信小程序、百度小程序、头条小程序等多个平台。

这些框架可以将一些公共的代码抽离出来,然后针对不同平台做出相应的适配。同时也提供了一些平台特有的 API 和组件,方便开发者在不同平台上实现相应的功能。

# 21.移动端和PC端的适配方案

  1. 响应式设计:使用CSS媒体查询和流式布局,根据设备的屏幕大小和特性,自动调整网页的布局和样式。通过设置不同的CSS规则,可以适应不同的屏幕尺寸和设备类型。
  2. 弹性布局:使用相对单位(如百分比、rem、em)和弹性布局技术,使网页元素根据容器或屏幕的尺寸进行自动调整和伸缩。通过设置元素的宽度、高度和间距为相对值,可以实现不同屏幕尺寸下的适配。
  3. 媒体查询:通过使用CSS3的媒体查询功能,根据不同设备的屏幕尺寸、像素密度、方向等特性,应用不同的CSS样式。可以针对不同的媒体查询条件设置不同的样式,实现移动端和PC端的适配。
上次更新: 2024/08/14, 04:14:33
常见面试题
面试记录

← 常见面试题 面试记录→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式