微信小程序面试题——面试整理1

发表于 分类于 ， 阅读时长 ≈ 4 分钟

一 面试题汇总

  1. 小程序有几个文件？
  2. 小程序怎么跟随事件传值
  3. 小程序 WXSS 与 CSS 的区别
  4. 小程序的双向绑定和Vue哪里不一样
  5. 小程序的生命周期函数
  6. 小程序怎么实现下拉刷新
  7. bindtap 和 catchtap 区别
  8. 小程序有哪些传递数据的方法
  9. 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 区别
  10. 小程序 wx:if 和 hidden 的区别
  11. app.json 全局配置文件描述
  12. 如何封装小程序请求
  13. 小程序运行机制
  14. 小程序什么时候会主动销毁？
  15. 微信授权流程

二 面试题解答(仅供参考)

2.1 小程序有几个文件？

1
2
3
4
WXML：微信自己定义的一套组件
WXSS: 用于描述 WXML 的组件样式
js: 逻辑处理
json: 小程序页面配置

2.2 小程序怎么跟随事件传值

在 页面标签上通过 绑定 data-key = value ， 然后绑定点击通过 e.currentTarget.dataset.key 来获取标签上绑定的值。

1
2
3
4
5
<button bindtap="get"  data-name="测试"> 拿到传值</button>

get(e){
    console.log(e.currentTarget.dataset.name)
  },

2.3 小程序 WXSS 与 CSS 的区别

WXSS

  • wxss 背景图片只能引入外链，不能使用本地图片
  • 小程序样式使用 @import 引入 外联样式文件，地址为相对路径。
  • 尺寸单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进行自适应。

2.4 小程序的双向绑定和Vue哪里不一样

1
2
小程序直接使用this.data.key = value是不能更新到视图当中的。
必须使用 this.setData({  key ： value  })  来更新值。

2.5 小程序的生命周期函数

1
2
3
4
5
onLoad: 页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数
onShow: 页面显示 / 切入前台时触发调用。
onReady: 页面初次渲染完成时触发,一个页面只会调用一次。
onHide: 页面隐藏 / 切入后台时触发，如 navigateTo 或底部tab切换到其他页面，小程序切入后台等
onUnload: 页面卸载时触发。如 redirectTo或 navigateBack 到其他页面时.

2.6 小程序怎么实现下拉刷新

两种方案

方案 一 ：

通过在 app.json 中， 将 "enablePullDownRefresh": true, 开启全局下拉刷新。 或者通过在 组件 .json ， 将 "enablePullDownRefresh": true, 单组件下拉刷新。

方案二：

scroll-view ： 使用该滚动组件 自定义刷新，通过 bindscrolltoupper 属性， 当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利用这个属性，来实现下拉刷新功能。

2.7 bindtap 和 catchtap 区别

1
2
相同点： `都是点击事件`
不同点： `bindtap` 不会阻止冒泡， `catchtap` 可以阻止冒泡。

2.8 小程序有哪些传递数据的方法

1
2
3
4
5
6
7
8
9
10
11
1. 使用全局变量

在 `app.js`  中的  `this.globalData = { }`   中放入要存储的数据。 
在`组件.js` 中， 头部 引入  `const app = getApp();` 获取到全局变量 直接使用 `app.globalData.key`  来进行赋值和获取值。

2. 使用路由

`wx.navigateTo` 和 `wx.redirectTo` 时，可以通过在 `url`后 拼接 + 变量，
 然后在 `目标页面` 通过在 `onLoad` 周期中，通过参数来获取传递过来的值。

3. 使用本地缓存

2.9 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 区别

1
2
3
4
5
wx.navigateTo(): 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo():  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab():  跳转到 TabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack(): 关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch():  关闭所有页面，打开到应用的某个页面。

2.10 小程序 wx:if 和 hidden 的区别

  • wx:if : 有更高的切换消耗。
  • hidden : 有更高的初始渲染消耗。

使用

  • 频繁切换使用 hidden, 运行时条件变化使用 wx: if

2.11 app.json 全局配置文件描述

1
2
3
pages :  用于存放当前小程序的所有页面路径
window : 小程序所有页面的顶部背景颜色，文字颜色配置。
tabBar :  小程序底部的Tab ,最多5个，最少2个。

2.12 如何封装小程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常用方法 POST , GET , DELETE , PUT .... 最后导出这些方法 然后新建一个 api.js 文件，导入封装好的方法，然后调取相应的方法，传递数据。

wx.request 封装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var app = getApp(); //获取小程序全局唯一app实例
var host = '******************'; //接口地址
 

 
//POST请求
function post(url, data, success,fail) {
  request(url, postData, "POST", doSuccess, doFail);
}
 
//GET请求
function get(url, data, success, fail) {
  request(url, postData, "GET", doSuccess, doFail);
}
 
function request(url, data, method, success, fail) {
  wx.showLoading({
    title: "正在加载中...",
  })
  wx.request({
    url: host + url, //请求地址
    method: method, //请求方法
    header: { //请求头
      "Content-Type": "application/json;charset=UTF-8"
    },
    data: data, //请求参数    
    dataType: 'json', //返回数据格式
    responseType: 'text', //响应的数据类型
    success: function(res) {
      wx.hideLoading();
      //成功执行方法，参数值为res.data,直接将返回的数据传入
      success(res.data);
    },
    fail: function() {
      //失败执行方法
      fail();
    },
  })
}
module.exports = {
  postRequest: post,
  getRequest: get,
}
组件使用 封装好的请求
1
2
3
4
5
6
7
8
9
10
11
12
var http = require('../../utils/request.js'); //相对路径


var params = {//请求参数
  id:this.data.userId
}
http.postRequest("user/delUser", params, function(res) {
  console.log("修改成功！");
  
}, function(res) {
  console.log("修改失败！！！")
})

2.13 小程序运行机制

热启动 ：假如用户已经打开了某个小程序，在一定时间内再次打开小程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的小程序切换到前台来使用。

冷启动：用户首次打开小程序或被微信主动销毁再次打开的情况，此时小程序需要重新加载启动。

2.14 小程序什么时候会主动销毁？

1
2
3
4
小程序在进入后台之后，客户端会帮我们在一定时间内维持我们的一个状态，超过五分钟后，会被微信主动销毁.
官方也没有明确说明 什么时候销毁， 在不同机型表现也不一样，
2019年开发时：时间官方文档没有说明，但是经过询问一般指5分钟内
2020年开发时：时间官方文档没有说明，实测安卓没有固定时间，内存足够情况下，有时候一天了还在，有时候几分钟就没了。

2.15 微信授权流程

三 参考

  • 掘金—15个高频微信小程序面试题