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

发表于 2024-03-20 分类于面试相关，微信小程序面试题阅读时长 ≈ 6 分钟

一面试题汇总

简单描述下微信小程序的相关文件类型
主要文件
小程序的双向绑定和vue哪里不一样
小程序的wxss和css有哪些不一样的地方
小程序页面间有哪些传递数据的方法
绑定事件
小程序的生命周期函数
怎么封装微信小程序的数据请求
微信小程序框架
wepy框架
$apply异步数据脏检查
computed和watch的区别
哪些方法可以用来提高微信小程序的应用速度
微信小程序的优劣势
怎么解决小程序的异步请求问题
小程序关联微信公众号如何确定用户的唯一性
如何实现下拉刷新
bindtap和catchtap的区别是什么
简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

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

2.1 简单描述下微信小程序的相关文件类型

微信小程序项目结构主要有四个文件类型

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
js 逻辑处理，网络请求
json 小程序设置，如页面注册，页面标题及tabBar

2.2 主要文件

1.app.json

1
2

所有的显示页面要在pages中定义，管理的是所有的页面
配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题

2.app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量

2.3 小程序的双向绑定和vue哪里不一样

小程序直接 this.data 的属性是不可以同步到视图的，必须调用：

this.setData({
    // 这里设置
})

//wepy框架使用
// 或者
  this.swiperArr=res.data
  // 异步数据更新
 this.$apply()

2.4 小程序的wxss和css有哪些不一样的地方

WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改
1.尺寸单位 rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

换算成px 就是实际尺寸/2 = px;

2.使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

1	@import '../plugins/wxParse/wxParse.wxss';

2.5 小程序页面间有哪些传递数据的方法

使用全局变量实现数据传递
在 app.js 文件中定义全局变量 globalData，将需要存储的信息存放在里面

//app.js

App({
  onLaunch: function () {},
  globalData: {
    userInfo: null
  },
  globalData1: 'http//www/www'
})

// xxx.js 在子组件中获取传递的参数
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化

打开新页面 
调用 API wx.navigateTo 
使用组件 <navigator open-type="navigateTo"/>
使用navigitaor 时 设置open-type  switchTab| navigate

页面重定向	调用 API wx.redirectTo 
使用组件 <navigator open-type="redirectTo"/>

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})


// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

使用本地缓存 Storage 相关

需要注意的问题：

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面

使用组件可以将open-type设置为 switchTab

onLoad 只执行一次

2.6 绑定事件

bindtap='testHandle' 在pages中定义

事件绑定和冒泡bind catch bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
1
2
bindtap="handleTap1"
catchtap="handleTap2"
currentTarget.dataset

绑定的事件传递参数使用 data- ，在js中接收参数使用

<view bindtap="handleTap" data-pars="参数">事件</view>
 handleTap(event) {
    console.log(event.currentTarget.dataset) // {pars: "参数"}
  }

2.7 小程序的生命周期函数

onLoad 新页面载入底部和头部出现
一个页面只会调用一次，可以在onload中获取打开当前页面所调用的query参数
唯一有参数的
打开页面url传递来的参数可以下onload中接受
1
2
3
onLoad: function (options) {
console.log(options) // {name: ""ssss"", age: "18"}
}
onShow 页面显示每次打开页面都会调用一次
onReady 打开新页面一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onhide 页面隐藏在切换页面的时候回执行如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload 页面卸载如 redirectTo 或 navigateBack 到其他页面时

2.8 怎么封装微信小程序的数据请求

wepy中的安装和配置promise

在wepy中不支持promise的使用 .then()的写法也不支持async await
https://github.com/Tencent/wepy/wiki/wepy%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8async-await

使用库wepy-async-function --save

封装异步请求

import wepy from 'wepy'
const wxRequest =(url, params={})=>{
  let res= wepy.request({
    url: wxRequest.baseURL+url,
    method:params.method||'GET',
    data: params.query||{}
  })
  return res
}
wxRequest.baseURL="http://localhost:8888/api/public/v1"
export default wxRequest

并使用异步模块wepy-async-function

// app.wpy

import 'wepy-async-function'

export default class extends wepy.app {
  // 设置constructor
  constructor () {
        super();
        this.use('promisify');
    }
}

// xxx.wpy
import api from '../api/api.js'

api.getCategory().then(res=>{
  this.catArr=res.data
  // 异步数据更新
  this.$apply()
})

2.9 微信小程序框架

wepy
mpvue

美团开源mpvue 是一个使用 Vue.js 开发小程序的前端框架，目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于 Vue.js

2.10 wepy框架

语法高亮使用vetur插件之后再vscode右下角选中就改变颜色了。
编译项目 npm run build
打包好的文件在模拟器中查看

在小程序编译器中默认入口文件的根目录在project.config.json

1
2
3

// project.config.json

"miniprogramRoot": "./dist"

2.11 $apply异步数据脏检查

$apply 在使用setData({}) 更新视图数据的时候调用

// 更新视图，用于解决数据异步请求后，视图更新异常_this.$apply()

import api from '../api/api.js'
 // 封装的api 发起请求
     api.getHomeSwiper().then(res=>{
        this.swiperArr=res.data
      // 异步数据更新
     this.$apply()

2.12.computed和watch的区别

在微信小程序中，computed 和 watch 是两种不同的数据监听和计算方式。

Computed（计算属性）:
- 计算属性是指根据已有的数据（通常是响应式数据）进行计算得出的新数据。
- 计算属性会根据其依赖的数据自动更新，只有当其依赖的数据发生变化时，计算属性才会重新计算。
- 计算属性通常用于对数据进行处理、筛选、计算等操作，以产生新的衍生数据，而不需要手动监听数据的变化。
- 通过计算属性，可以使代码更加简洁，减少冗余的监听逻辑。
Watch（监听属性）:
- 监听属性是指主动监听数据的变化，并在数据发生变化时执行特定的操作。
- 当被监听的数据发生变化时，回调函数会被触发执行。
- 监听属性适用于需要在特定数据变化时执行一些额外操作的场景，比如数据变化后的网络请求、动画效果等。
- 使用监听属性可以更精确地控制数据变化后的行为，但相对而言会增加一些额外的代码。

区别:

主要区别在于自动更新和手动更新的方式。计算属性是自动更新的，它会根据其依赖的数据自动重新计算；而监听属性需要手动指定需要监听的数据，并在数据发生变化时执行相应的操作。
计算属性适用于对数据进行处理、计算等场景，而监听属性适用于需要在数据变化时执行特定操作的场景。
使用计算属性可以使代码更加简洁，减少手动监听数据变化的逻辑，而监听属性则更灵活，可以在需要时执行更复杂的操作。

2.13 哪些方法可以用来提高微信小程序的应用速度

1、提高页面加载速度
2、用户行为预测
3、减少默认 data 的大小
4、组件化方案

2.14 微信小程序的优劣势

优势

1.即用即走，不用安装，省流量，省安装时间，不占用桌面
2.依托微信流量，天生推广传播优势
3.开发成本比 App 低
缺点

1.用户留存，即用即走是优势，也存在一些问题
2.入口相对传统 App 要深很多
3.限制较多,页面大小不能超过1M。不能打开超过5个层级的页面

2.15 怎么解决小程序的异步请求问题

小程序支持 ES6 语法，在返回成功的回调里面处理逻辑

Promise 异步
async/await

2.16 小程序关联微信公众号如何确定用户的唯一性

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的

2.17 如何实现下拉刷新

首先在全局 config 中的 window 配置 enablePullDownRefresh
在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新
参考这里

2.18 bindtap和catchtap的区别是什么

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

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

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

三参考

微信小程序面试题

一 面试题汇总

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