前端核心面试题：小程序

搬砖的乔布梭
2,038 阅读4分钟

@小程序生命周期

@路由跳转方式与区别

@小程序的性能优化

开启代码压缩

  • 上传代码时勾选开发者工具中“压缩代码”选项；

处理静态资源

  • 预先对图片、视频等静态资源进行物理压缩，推荐大家一个在线压缩图片的网站 TinyPNG；
  • 能使用CDN服务的图片视频等就尽量不要打到代码包中；

对页面进行分包

对分包进行预加载

微信小程序的分包预加载是一种优化手段，可以提高小程序的加载速度和性能。以下是进行分包预加载的步骤：

  • 首先，在微信小程序的项目配置文件 app.json 中，设置 preloadRule 字段来定义需要预加载的分包。可以使用正则表达式来匹配分包的路径，例如：
{
  "preloadRule": {
    "pages/subpackageA/": true,
    "pages/subpackageB/": true
  }
}

上述代码将会预加载 pages/subpackageA/ 和 pages/subpackageB/ 这两个分包。

  • 接下来，在小程序的入口页面中，通过 wx.loadSubpackage() 方法进行分包的预加载。例如：
wx.loadSubpackage({
  name: 'subpackageA',
  success: function(res) {
    // 分包预加载成功后的回调
  },
  fail: function(res) {
    // 分包预加载失败后的回调
  }
})

上述代码将会预加载名为 subpackageA 的分包。在 success 回调中可以进行相关逻辑处理，例如跳转到分包页面。

通过以上步骤，你可以实现微信小程序的分包预加载，提高用户体验和性能。注意，为了避免过多的预加载影响页面加载速度，建议仅对关键的分包进行预加载。

合理使用缓存

  • 尽量减少HTTP请求的次数：拿到数据setStorage缓存起来，下次需要使用相同数据时先getStorage，没有再发起网络请求，
  • 如果使用的是uniapp/Vue2框架，则可以使用Vuex作为存储的store；
  • 组件内缓存状态数据，在uniapp/Vue2中合理使用computed；

@小程序的微信授权流程

  • 什么是小程序的微信授权流程？说人话：用微信账号登录自家服务器
  • 在小程序端wx.login()得到登录码code
  • 小程序请求自家的登录接口，携带登录码code
  • 自家服务器请求微信服务器，使用appid+appSecret+code换回session_key与openid
  • 自家服务器将session_key与openid重新换算为自家的登录信息(如token)
  • 小程序在后续请求自家服务器的过程中都携带该token,自家服务器就知道小程序端已经登录过了 参考链接

b60638c0-3428-11ec-a752-75723a64e8f5.png

@微信支付流程

  • 用户点击下单；
  • 调用wx.login 获取临时登录凭证code，发送到后端换取openId；
  • 将商品信息（id、数量等）+ 用户的openId一并通过购买接口发送服务端；
  • 服务器综合以上信息生成订单+签名（根据微信支付SDK要求生成），向微信支付后台发送支付请求，获取其返回的预付款订单id(prepay_id)，同时再次根据微信支付SDK要求生成预付款订单签名，二者一并响应给小程序端；
  • 小程序端调用wx.requestPayment()发起微信支付，此时微信内部的支付窗口被唤醒，用户输入支付密码或指纹；
  • 微信支付后台处理支付，将结果同时推送给小程序端和我们自己的服务端；

image.png

@多端打包流程

参考 uni-app卖座电影多端开发纪实（六）：多端打包

@微信小程序的发布流程

  • 在uni-app端完成微信小程序的打包；
  • 在微信开发者工具中将代码上传到微信公众平台，形成体验版；
  • 测试人员根据扫描体验版二维码进行最后的测试工作；
  • 测试通过后，点击提交审核，进入审核流程，通常24小时就能出结果；
  • 审核通过后，用户即可通过维系小程序搜索到我们的小程序；同时我们还可以在微信公众平台生成小程序的葵花码，交给推广人员进行推广；
avatar
文章
阅读
粉丝