小程序面试题-小程序文档描述冲突

用户971884103405
481 阅读13分钟

小程序面试题

小程序文档描述冲突 '是人性的扭曲，还是道德的沦丧' 哈哈哈，开个玩笑 也是当一次标题党，看看能不能吸到一些爱学习的同伴，但也确实出了一些问题，可能微信小程序官方的文档更新不及时导致的，原谅我的99小心机

需要看问题的直接到第23. 预加载分包

1. 小程序原理

  • 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
  • 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
  • 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
  • 功能可分为 webview 和 jscore 两个部分；
  • webview 用来展现UI，jscore 用来处理业务逻辑、数据及接口调用、用户的交互问题；
  • 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

具体讲解 小程序原理

2. 小程序的优缺点

  • 优势：
    • 容易上手，基础组件库比较全，基本上不需要考虑兼容问题；
    • 开发文档比较完善，开发社区比较活跃，支持插件式开发；
    • 良好的用户体验：无需下载，通过搜索和扫一扫就可以打开，
    • 打开速度快，安卓上可以添加到桌面，与原生APP差不多；
    • 开发成本比APP要低；
    • 为用户提供良好的安全保障（小程序发布严格的审查流程）
  • 劣势：
    • 限制较多，不能打开超过10个层级的页面；
    • 样式单一，部分组件已经是成型了的，样式不可修改，例如：幻灯片、导航
    • 推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广
    • 依托于微信，无法开发后台管理功能
    • 后台调试麻烦，因为api接口必须https请求且公网地址
    • 真机测试，个别功能安卓和苹果表现迥异，例如安卓的定位功能加载很慢

3. 小程序项目主要目录和文件的作用

  • project.config.json: 项目配置文件，用得最多的就是配置appid、是否开启https校验、压缩等；
  • app.js: 小程序逻辑 比如: 设置一些全局的基础数据等；
  • app.json: 小程序公共配置 比如：底部 tab、 标题栏、路由、分包等设置；
  • app.wxss: 小程序公共样式 比如：引入主题颜色、iconfont等；

一个小程序页面由四个文件组成

  • index.json: 配置当前页面标题和引入组件等；
  • index.wxml: 页面结构；
  • index.wxss: 页面样式表；
  • index.js: 页面的逻辑，请求和数据处理等；

4. WXML 和 HTML 的区别

  • WXML 更侧重于与微信小程序的原生 API 结合使用，而 HTML 则更通用，可以与多种前端框架结合使用
  • 标签不同，HTML 更多 WXML 相对较少
  • 部分语法不同，数据绑定 条件渲染 循环渲染 事件绑定 属性绑定
数据绑定：WXML 支持使用双大括号 {{ }} 进行数据绑定，直接在页面中显示动态数据
条件渲染：WXML 支持使用 wx:if 和 wx:elif 进行条件渲染
循环渲染：WXML 支持使用 wx:for 进行循环渲染
事件绑定：WXML 支持使用 bind 前缀进行事件绑定，例如 bindtap
属性绑定：WXML 支持使用 bind: 前缀进行属性绑定，例如 bind:class

5. Wxss 和 Css 的区别

  • WXSS 更侧重于与微信小程序的原生 API 结合使用，而 CSS 则更通用，可以与多种前端框架结合使用
  • Wxss 支持尺寸单位有 rpx、px、pt、em、rem，但主要使用 rpx
  • Css 支持尺寸单位有 px、em、rem、vw、vh
  • WXSS 支持基本的选择器，如类选择器、ID 选择器等，但不支持 CSS 中一些复杂的选择器和伪类

6. 小程序页面的传参方式

  • 给 wxml 元素添加data-*属性来传递值，然后通过 e.currentTarget.dataset 获取标签传参
  • 使用全局变量实现数据传递
  • 页面跳转或重定向时，使用url带参数传递数据,通过 onload 的 param 参数获取
  • 使用缓存传递参数

7. 小程序跳转页面有哪些？区别是什么？

  • wx.navigateTo: 将页面推入当前页面栈，并跳转到应用内的某个页面。保留当前页面，跳转后可返回当前页面
  • wx.redirectTo: 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面
  • wx.switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • wx.reLaunch: 关闭所有页面，打开到应用内的某个页面
  • wx.navigateBack: 将页面推入当前页面栈，并跳转到应用内的某个页面。保留当前页面，跳转后可返回当前页面
  • wx.navigateTo: 关闭当前页面，返回上一页面或多级页面

8. 小程序生命周期

1.1 应用级别

  • onLaunch
  • onShow
  • onHide
  • onError

1.2 页面级别

  • onLoad
  • onShow
  • onReady
  • onHide
  • onUnload

1.3 组件级别

  • created 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
  • attached 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
  • detached 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
  • ready 在组件在视图层布局完成后执行
  • moved 在组件实例被移动到节点树另一个位置时执行
  • error 每当组件方法抛出错误时执行
Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})

1.4 组件所在页面的生命周期

  • show 组件所在的页面被展示时执行
  • hide 组件所在的页面被隐藏时执行
  • resize 组件所在的页面尺寸变化时执行
  • routeDone 组件所在页面路由动画完成时执行
Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

9. 组件之间的通信

和 vue 差不多，都是通过父级绑定事件，子级通过 this.triggerEvent 触发父级的事件

10. 如何分装小程序的请求

使用 wx.request 模仿 axios 可以封装一个函数，有一个请求拦截的操作，在请求完成之后，有一个响应拦截的操作，这样可以统一的在请求和响应阶段做统一的处理。

11. webview与小程序的通信和跳转小程序的方法

通信方法

wx.miniProgram.postMessage({
  data: 'data'
});
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

跳转小程序的方法

//跳转到小程序子页面
wx.miniProgram.navigateTo({
 url:'pages/login/login'+'$params'
 })
//跳转到小程序导航页面
wx.miniProgram.switchTab({
 url:'/pages/index/index'
}

12. 小程序与 vue 数据绑定之间的区别

绑定数据都是通过 {{}} vue 修改数据直接this.data = 'dada' 小程序修改数据this.setData({data:'data'})

13. 小程序和 H5 的区别

  • 运行环境
    • 微信小程序只能在微信客户端内运行
    • H5 应用运行在用户的浏览器中，可以在任何支持 HTML5 的浏览器上运行
  • 技术栈和功能
    • 小程序使用专有的框架和组件库，例如微信小程序使用 WXML 和 WXSS
    • H5 使用标准的 Web 技术栈，包括 HTML5、CSS3 和 JavaScript
    • 小程序提供了特定的 API 接口来访问设备功能，如摄像头、地理位置等
    • H5 应用通过标准的 Web API 访问设备功能
    • 小程序通常可以访问更多的设备功能，如支付、社交分享等，可以集成更多的微信提供的功能，提供更多的功能和服务
    • H5 应用的功能受限于浏览器支持的 Web API
  • 用户体验
    • 小程序提供了接近原生应用的用户体验，加载速度快，交互流畅
    • 小程序用户可以通过扫一扫或者搜索直接使用，无需下载安装
    • H5 应用的用户体验通常不如原生应用，尤其是在动画和复杂交互方面
    • 通过 Service Worker 和缓存策略，部分 H5 应用可以实现离线使用
  • 发布流程
    • 小程序发布前需要经过平台的审核流程。小程序更新需要重新提交审核，用户需要更新到最新版本才能体验新功能
    • H5 应用可以实时更新，用户无需重新安装，H5 应用不需要经过平台审核即可发布
  • 性能方面
    • 由于使用了专有的渲染引擎，小程序的性能通常优于 H5
    • H5 应用的性能受到浏览器性能的限制
  • 开发成本
    • 小程序原生开发需要学习特定的技术栈，可能增加开发成本，如果要在多个平台上开发小程序，则需要为每个平台编写特定的代码
    • H5 使用标准化的 Web 技术，易于学习和维护
  • 用户获取
    • 小程序用户可以通过扫一扫、搜索等方式快速找到并使用小程序
    • H5 应用可以通过 SEO 优化提高搜索引擎排名，从而获得更多流量

14. 小程序开发中点击事件的方法有哪些？区别是什么？

  • bind 事件绑定不会阻止冒泡事件向上冒泡
  • catch 事件绑定可以阻止冒泡事件向上冒泡

15. 小程序关联微信公众号如何确定用户的唯一性？

unionID：如果小程序与公众号关联，并且用户已关注公众号，还可以通过 wx.login 获取 unionID，该标识符在同一个微信开放平台账号下的不同应用中是相同的。 使用 wx.getUserInfo 方法 withCredentials为true 时，可获取 encryptedData，里面有 union_id.后端需要进行对称解密。

16. 小程序如何持久化登陆状态？

微信小程序提供了wx.setStorage和wx.getStorage方法来存储和读取数据。这些方法可以用来存储Token以及一些其他的信息。 确保在存储和使用Token的过程中采用加密或其他安全措施 考虑Token的有效期和刷新策略，避免频繁刷新或Token过早失效。

17. 你如何安全地存储敏感信息？

使用加密算法对数据进行加密，并使用 https 与服务端进行通信

18. 小程序的优化有哪些

  1. 提高页面加载速度
  2. 使用组件进行复用
  3. 减少默认 data 的大小
  4. 分包加载
  5. 分包预加载
  6. 数据预拉取: 服务器拉取业务数据
  7. 压缩代码、去除无效代码
  8. 减少网络请求次数，使用缓存策略，优化图片资源
  9. 减少 setData 的调用频率，合理使用虚拟节点，避免使用大量动态样式
  10. 注意及时释放不再使用的数据引用，避免闭包导致的内存占用

19. 小程序的分包如何做

在 项目根目录的 app.json 配置 subpackages root 分包根路径 name 分包名称 分包预加载时可以使用 pages 分包包含的 page
independent 分包是否是独立分包 entry 分包的入口文件 在加载分包时 入口文件优先加载执行

20. 小程序包大小不能超过20M，单包不能超过2M

分包文档

21. 小程序独立分包的作用

优化加载速度，比如：当从独立分包进入小程序时，不需要下载主包，提升加载速度

22. 独立分包的缺点

  • 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式
  • App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为
  • 独立分包中暂时不支持使用插件

23. 预加载分包

小程序文档出现了部分乌龙, 一边说不能用 API 调用 一边又提供了 API 当前时间 2024/08/22 如果未发现可能已经更新 建议大家保险一点，想使用 API 最一些兜底的行为

小程序文档-指南-基础能力-分包加载-预加载分包 分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成 通过在 app.json 增加 preloadRule 配置来控制

小程序文档-API-基础-分包加载 wx.preDownloadSubpackage 触发分包预下载, 配置 packageType 分包的类型。目前仅支持填 "workers"，表示 workers 分包

例子(直接贴了代码示例)：

// 首先要在 app.json / game.json 中配置workers作为分包
{
  "workers": {
    "path": "myWorkersFolder",
    "isSubpackage": true  // true 表示把 worker 打包为分包。默认 false。填 false 时等同于 { "workers": "myWorkersFolder" }
  }
}

// 然后调用 wx.preDownloadSubpackage 下载 worker 分包，下载成功后才可以创建 worker
var task = wx.preDownloadSubpackage({
  packageType: "workers",
  success(res) {
    console.log("load worker success", res)
    wx.createWorker("myWorkersFolder/request/index.js")   // 创建 worker。 如果 worker 分包没下载完就调 createWorker 的话将报错
  },
  fail(res) {
    console.log("load worker fail", res)
  }
})

task.onProgressUpdate(res => {
  console.log(res.progress) // 可通过 onProgressUpdate 接口监听下载进度
  console.log(res.totalBytesWritten)
  console.log(res.totalBytesExpectedToWrite)
})

24. 小程序常见的问题有哪些？

  • 真机调试与模拟器部分功能有出入
  • 部分功能调试困难，需上线之后才可以调试
  • 线上审核，在不了解规范的情况下很容易被拒绝
  • 更新迭代时，小程序用户未及时更新
  • 分享只能分享微信好友，不可以分享朋友圈
  • 性能优化，包体大小超出，加载速度慢
  • Wxss 不能加载本地资源

25. 如何监控小程序性能？

  • 通过微信开发者工具内置了性能监控功能，可以帮助开发者实时查看小程序在各个方面的性能指标，比如 CPU 占用率、内存占用、网络请求等
  • 微信小程序后台提供了“性能分析”模块，能够帮助开发者监控和分析小程序的性能问题，例如页面加载速度、JS执行效率等
  • 利用小程序自带的API
    • wx.onMemoryWarning()：监听内存警告事件，当小程序收到内存警告时触发，可用于优化内存使用
    • 使用 console.time() 和 console.timeEnd() 来分析函数或代码块的执行时间
  • 第三方监控工具
  • 性能测试，压力测试，兼容性测试

小小面试题，大家可以轻松拿捏，小编只是小作总结，还有很多细节的面试题，使用的面试题，冷门的面试题没有总结 大家可以留言 我后续继续添加

最好的文档 还是官方文档

关于 Vue 相关的问题可以阅读一下文章！

Vue 双向绑定原理

Vue Computed 原理

关于webpack 相关的问题可以阅读一下文章！

Webpack-基础

avatar
文章
阅读
粉丝