2020最新版前端求职，HR最常问小程序面试题

1.小程序里的事件绑定bindtap和catchtap的区别是什么？

bind事件绑定不会组止冒泡事件像上冒泡，catach事件可以阻止事件向上冒泡

2.在 app.json 配置文件中，最主要的配置节点是

• pages 数组：配置小程序的页面路径

• window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色

3.页面配置和局部配置的关系

• app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现；

• 如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求；

4.小程序的生命周期

• 小程序的启动，表示生命周期的开始

• 小程序的关闭，表示生命周期的结束

• 中间小程序运行的过程，就是小程序的生命周期

5.小程序生命周期的两种类型

• 应用生命周期：特指小程序从启动 --> 运行 --> 销毁的过程；

• 页面生命周期：特指小程序中，每个页面的加载 --> 渲染 --> 销毁的过程；

6.生命周期函数的作用

允许程序员在特定的生命周期时间点上，执行某些特定的操作。例如，页面刚加载的时候，在生命周期函数中自动发起数据请求，获取当前页面的数据；

7.应用生命周期

• app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次。其中，App() 函数是用来注册并执行小程序的。

• App(Object) 函数接收一个 Object 参数，可以通过这个 Object 参数，指定小程序的生命周期函数。

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () { },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) { },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () { },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) { }
})

8.页面生命周期函数

• 每个小程序页面，必须拥有自己的 .js 文件，且必须调用 Page() 函数，否则报错。其中 Page() 函数用来注册小程序页面。

• Page(Object) 函数接收一个 Object 参数，可以通过这个 Object 参数，指定页面的生命周期函数。

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { }
})

9.如何在页面中绑定渲染数据

把 data 中的数据绑定到页面中渲染，使用 Mustache 语法(双大括号) 将变量包裹起来即可

{{ info }}


{{ 1 + 1 }}


{{ id == 10 ? "正确" : "错误" }}

10.小程序中如何实现双向数据绑定

• 在文本框的 input 事件处理函数中，通过事件参数 event ，能够访问到文本框的最新值

  • 语法结构 event.detail.value

• 通过 this.setData(dataObject) 方法，可以把页面中的 data 数据重新赋值

我是按钮




Page({
  data: {
    msg: ''
  },
   
  handle: function (event) {
    console.log('按钮绑定的事件')
    console.log(event)
  },

  inputHandle: function (e) {
    console.log(e)
  },

  // 数据同步演示
  datasync: function (e) {
    console.log(e.detail.value)
    
    this.setData({
      msg: e.detail.value
    })
  }
  
  // coding...
})

12.小程序如何进行事件传参的？

• 小程序的事件传参比较特殊，不能在为组件绑定事件的同时，为事件处理函数传递参数

• 小程序会把 bindtap 后指定的值，统一当做事件名称来处理

• 如果要在组件触发事件处理函数的时候，传递参数，可以为组件提供 data-* 自定义属性传参

• 通过事件参数 event-target-dataset.参数名，能够获取 data-* 自定义属性传递到事件处理函数中的参数

button bindtap='eventHandle' type='primary' data-info='info'>传递参数
Page({
  data: {},
    
  eventHandle: function (e) {
    console.log(e.target.dataset.info)
  }
   
  // coding...
})

13.什么是 wxs 

wxs 是小程序的一套脚本语言，结合 wxml ，可以构建出页面的结构

14.hidden 和 wx:if 的区别

• 被 wx:if 控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的 UI结构。

• wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

• 总结：wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。.

15.wx：for

• 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

• 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

• wx:for 可以用在 标签上，以渲染一个包含多节点的结构块。 用法和vue的template差不多

16：wx:key的作用和注意事项

• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

• 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

• key 值必须具有唯一性，且不能动态改变

• key 的值必须是数字或字符串

• 保留关键字 *this 代表在 for 循环中的 item 本身，它也可以充当 key 值，但是有以下限制：需要 item 本身是一个唯一的字符串或者数字。

• 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

17.如何开启下拉刷新

• 在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh。

• 可以通过 wx.startPullDownRefresh() 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

• 处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，

• 因此需要手动隐藏下拉刷新的 loading 效果，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

  /** * 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh: function () { 
   console.log('触发下拉刷新啦')     
  
   wx.stopPullDownRefresh()
  }

   

18.设置上拉加载的距离

• 在 app.json 的 window选项中或页面配置中设置触底距离 onReachBottomDistance。单位为px，默认触底距离为 50px。

• 为页面添加 onReachBottom() 函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果。

19.页面滑动事件

 onPageScroll 得到 scrollTop，页面在垂直方向已滚动的距离（单位px）

20.如何自定义分享事件 onShareAppMessage

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      imageUrl: ''
    }
  }
})

 21.小程序的跳转方式

小程序导航声明式导航和编程式导航两种

1.声明式

navigator， navigator组件单纯使用 url 属性，无法导航到 tabBar 页面，必须需要结合 open-type 属性设置成switchTab进行导航。小程序如果要后退到上一页面或多级页面，需要把 open-type 设置为 navigateBack，同时使用 delta 属性指定后退的层数

2.编程式导航

通过 wx.navigateTo(Object object) 方法，可以跳转到应用内的某个页面。 通过 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面， 通过 wx.navigateBack(Object object)方法，关闭当前页面，返回上一页面或多级页面。

22.如何进行导航传参

1.声明式导航传参

navigator 组件的 url 属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

2.编程式导航传参

wx.navigateTo(Object object) 方法的 object 参数中，url 属性用来指定需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

3.接受传来的参数

不论是声明式导航还是编程式导航，最终导航到的页面可以在 onLoad 生命周期函数中接收传递过来的参数。