前端uniapp、微信小程序面试题整理

一、微信小程序页面传参的方法

1.通过url

2.通过uni.navigateTo的success回调，下游页面通过eventChannel.$emit传参

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

 3.使用getApp().gloabData

js中操作globalData的方式如下：

赋值：getApp().globalData.text = 'test'

取值：console.log(getApp().globalData.text) // 'test'

4.全局的自定义事件

uni.$emit、uni.$on、uni.$once、uni.$off

5.浏览器缓存

使用wx.setStorageSync(key, value)将目标页面需要的数据存储到本地浏览器缓存中，在目标页面使用getStorageSync(key)的方式将数据又重缓存中读取出来，一般用于存储token，详情信息等

6.vuex/pinia

7.事件绑定

适用于父子组件间的数据传输和通信，子组件通过this.$emit(name, value)方法传递数据给父组件，父组件在子组件上自定义一个事件，就可以监听并接收子组件传递过来的数据

二、应用和小程序层级的生命周期

1.应用级别的

onLaunch	用户首次打开，当小程序初始化完成时，会触发onLaunch(全局触发一次)
onShow	小程序启动或从后台进入前台时，触发onShow，监听小程序显示
onHide	小程序隐藏或从前台进入后台，触发onHide
onError	小程序发生脚本错误或 API 调用报错时触发

2.微信小程序级别

onLoad    监听页面加载，触发onLoad，此时可以发送请求获取数据
onShow    监听页面显示，触发onShow，页面显示，此时可以请求数据
onReady    监听页面初次渲染完成，触发onReady，渲染⻚⾯元素和样式，此时可以获取页面元素的信息
onHide    监听页面隐藏，如果小程序跳转到其它页面或进入后台运行时，触发onHide，此时可以终止任务
onUnload    监听页面卸载，调用wx.redirectTo() 或wx.navigateBack()，触发onUnload，此时可以终止任务
onResize   窗口尺寸改变时触发，最低基础库：2.4.0

三、小程序如何实现下拉刷新和上拉加载更多

1.下拉刷新
首先在json文件中开启下拉刷新功能（enablePullDownRefresh ：true），然后onPullDownRefresh通过该方法监听是否产生了下拉的动作，如果有就会执行响应的操作，可以在函数里面进行http请求等；注意这里需要进行手动的关闭，不然loading效果会一直在，可以使用wx.stopPullDownRefresh(）停止下拉刷新。
2.上拉加载更多
使用onReachBottom事件处理函数可以监听到是否上拉的操作，然后再函数体里面可以进行数据请求等操作，实现上拉加载更多；默认的触底距离是50px可以在json文件中通过onReachBottomDistance进行自定义更改

四、移动端如何适配不同屏幕尺寸

参考地址https://blog.csdn.net/smznbhh/article/details/132959204

使用meta-viewport标签通过配置例如设置width=device-width、initial-scale=1、minimum-scale=1等。