2024年前端面试题小程序篇

2024年前端面试题小程序篇

希望我的解释和答案能起到辅助理解作用

微信小程序的登录

1. 通过wx.login()获取到用户的登录凭证code，再根据getUserInfo方法获取到用户的基本信息。
2. 再把获取到的用户信息通过接口发送给后端，登录成功之后后端会返回标识，比如token
3. 可以把token存到vuex里面

微信小程序的支付

1. 将用户的token、以及商品信息发送到服务端，服务器会创建一个预支付订单
2. 再调用wx.requestPayment(obj)方法，将订单信息传入进去，执行微信支付的过程
3. 可以再通过封装的接口去查询是否支付成功

微信小程序的生命周期

1. app阶段
   • onlaunch函数，用于小程序的初始化
   • onshow，小程序初始化完成，页面加载出来
   • onhide，小程序，进入后台
2. 页面显示
   • onload，页面初始化
   • onshow，页面显示
   • onready，页面渲染完成
3. 页面关闭
   • onhide，页面隐藏
   • onunload，页面销毁

微信小程序的分包

1. 和其他的项目一样，为了提高页面加载性能，模块化语法，实现按需加载。将项目分成几个部分
2. 分包的具体步骤是在app.json里面配置subpackages，比如：

"subpackages": [
  {
    "root": "subpackages/packageA",
    "pages": [
      "pageA1",
      "pageA2"
    ]
  },
  {
    "root": "subpackages/packageB",
    "pages": [
      "pageB1",
      "pageB2"
    ]
  }
]

3. 独立分包：通俗的说就是把一个页面或者某个模块变成了一个内置的项目一样。它可以单独运行启动。但是它不能引用主包和其他分包的资源，做一个独立分包也很简单，如下：

"subpackages": [
  {
    "root": "subpackages/packageA",
    "pages": [
      "pageA1",
      "pageA2"
    ]，
   	"independent":true,
  },
]

微信小程序的发布

1. 上传代码
2. 提交审核
3. 发布版本

微信小程序的性能优化

1. 开发角度：
   • 减少代码量
   • 减少请求次数，二次封装wx.request
2. 用户角度
   • 图片懒加载
   • 分包策略
   • 响应式设计