前端面试题--小程序篇(持续更新中)_前端小程序面试题

1.小程序开发和h5开发的区别?

小程序和H5网页开发都属于移动端开发，它们存在以下几点不同：

应用场景：小程序是一种基于微信、支付宝等平台应用开发的方式，能够向用户提供与原生应用类似的体验。而H5网页则是基于在浏览器的Web应用程序，在各种浏览器中皆可访问。

使用环境：小程序只能在微信或支付宝等平台内使用，需要先下载对应APP，再进入小程序进行使用。而H5网页则不需要下载APP，在任何支持JavaScript和HTML5的浏览器环境下均可使用。

技术架构：小程序的开发需要掌握相关平台提供的API接口、组件库等技术，并且小程序具有较高的安全性，因此对于代码进行了较为严格的限制和审核。H5网页则需要使用前端技术栈，如HTML、CSS、JS等常见的前端语言。

实现方式：小程序采用了类似于原生应用的底层能力实现，包含颜色选择器、音视频处理、位置信息采集和计算等基本能力，这些能力为第三方开发者提供了灵活的扩展结构。而H5网页则主要通过JavaScript渲染HTML页面和CSS样式来展现出不同的效果。

功能差异：小程序相对于H5网页具有更强大的硬件能力支持，如热点连接、低功耗蓝牙设备互通、微信支付等。同时小程序提供了原生应用的特性，例如可以实现离线使用、推送服务等。而H5网页则兼容性更好，可以适配不同品牌和型号的移动设备，并且不需要App Store或应用商店审核，更新也更加便捷。

综上所述，小程序的优势在于提供分享、轻量级、本地化、无需下载等多项特点，而H5的优势在于灵活性、可访问性、方便和更强的跨平台支持，适合于一些非特定行业和领域的简单交互和易扩展的开发需求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.微信小程序全局的生命周期钩子有哪些?

App() 中可使用的全局钩子：
onLaunch：小程序初始化完成时触发，全局只触发一次；
onShow：小程序启动或从后台进入前台时触发；
onHide：小程序从前台进入后台时触发；
onError：小程序发生脚本错误或 API 调用失败时触发。
onPageNotFound:页面不存在监听函数.
1
2
3
4
5
6

3.微信小程序页面的生命周期钩子

Pages() 中可使用的页面级钩子：

onLoad(options)：监听页面加载，在页面初次渲染完成时触发，options 为页面跳转所带来的参数；
onShow()：监听页面显示，每次打开页面都会触发；
onReady()：监听页面初次渲染完成，通常用于与视图相关的操作，如获取 DOM 节点信息、动态设置元素样式等；
onHide()：监听页面隐藏，当页面被切换到后台或路由跳转时触发；
onUnload()：监听页面卸载，当页面被销毁时触发。

 
Component() 中可使用的组件级钩子：

created()：组件实例化时触发，可以进行组件数据的初始化等工作；
attached()：组件被添加到页面时触发，可以进行事件的绑定等操作；
ready()：组件在视图层布局完成后触发，可以对组件进行操作；
moved()：组件被移动到节流树另一个位置时触发；
detached()：组件被删除时触发。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.怎么理解微信小程序r px那个单位

rpx是微信小程序的一种长度单位，它是相对于屏幕宽度的一个单位。在不同的设备上，屏幕的宽度可能有所不同，使用rpx可以使开发者编写的小程序在不同的设备上都能以合适的比例显示。其中1rpx等于屏幕宽度的1/750，例如在iPhone6上，屏幕宽度为375px，则1rpx=0.5px。因此，开发者在编写小程序时可以使用rpx作为长度单位，来保证小程序可以在不同的设备上自适应地展示。

动态公式： 真机下 显示 尺寸公式

 (rpx/2) * (真机宽度/375)
1
2
3
4
5

5.on Launch和on Show获取参数的区别?

onLaunch和onShow是小程序生命周期函数，都可以用来获取传递进来的参数。它们之间的区别在于触发时机不同。

onLaunch：当小程序初始化完成时触发，全局只触发一次，在这个生命周期函数中可以获取到打开小程序的场景值和启动参数，但该函数在切换后台再次进入小程序时不会被触发。 冷启动 类似于轿车刚启动

onShow：当小程序启动，或从后台进入前台显示时触发，此时也可以获取到打开小程序的场景值和所有传入的参数。与onLaunch不同，此函数每次进入小程序时都会被触发。 冷热都启动

因此，如果需要在整个小程序中获取某些启动时带来的数据，应该使用onLaunch；如果需要根据用户进出小程序而执行不同的操作并获取对应参数，应该使用onShow。
1
2
3
4
5
6
7

6.on Load和on Show的区别?

onLoad和onShow都是页面生命周期函数，它们之间的区别如下：

onLoad函数：当一个页面被加载时，onLoad函数会被调用一次。这个函数只会在页面初始化时执行一次，通常用于获取初始数据或进行页面的初始化操作。

onShow函数：当页面从后台进入前台显示时，onShow函数会被调用,onShow会触发多次。如果这个页面已经在前台显示过了，再次进入前台时，也会触发onShow函数。通常用于实现页面状态的更新。

因此，可以将onLoad看作是页面的初始化函数，而onShow则是页面状态的更新函数。在实际开发中，我们可以根据业务需求，在这两个函数中编写相应的代码来完成数据的初始化和更新。
1
2
3
4
5
6
7

7.微信小程序如何开启下拉刷新?

在微信小程序中，可以通过使用enablePullDownRefreshAPI来启用下拉刷新功能。开启后用户就可以通过下拉页面进行刷新操作，以下是具体步骤：

在Page函数中设置enablePullDownRefresh属性为true，表示允许当前页面开启下拉刷新。
javascript
Page({
  data: {...},
  onPullDownRefresh() {
   // 触发下拉刷新时执行的代码逻辑
  },
  enablePullDownRefresh: true
})
在上面的代码中，我们还定义了onPullDownRefresh钩子函数，用于监听下拉刷新事件的触发。当用户下拉刷新时，系统会自动调用该函数并执行相关的逻辑代码。开发者可以根据业务需求在这个函数内实现数据刷新、网络请求或其他需要的操作。

如果下拉刷新触发后，需要手动停止下拉刷新的动画变化，否则会出现卡顿和不必要的资源浪费，需要在逻辑处理完毕时手动调用wx.stopPullDownRefresh()方法，来停止下拉刷新的动画效果。

javascript
Page({
  data: {...},
  onPullDownRefresh() {
    // 模拟异步请求数据
    setTimeout(() => {
      // 数据请求完成后，手动调用停止下拉刷新动画的 API
      wx.stopPullDownRefresh();
      console.log('数据已更新');
    }, 2000);
  },
  enablePullDownRefresh: true
})
通过上述步骤，即可在微信小程序中成功启用下拉刷新功能。
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

8.小程序适配方案?

小程序的适配需要考虑以下几个方面：

1.分辨率适配
根据不同设备的分辨率，开发者可以使用 rpx 作为单位，它与屏幕宽度有关，能够自适应不同尺寸的设备，并在样式文件中设置元素大小和位置。 2rpx=1px
` 动态公式: 真机下 显示尺寸公式:
  (rpx/2) *{真机宽度/375}
`

2.图片适配
为了适配不同分辨率的图片，在小程序里可以使用 <image> 标签并设置 mode 属性。选项包括 scaleToFill（缩放以填充）、aspectFit（缩放以适合）、aspectFill（缩放以覆盖）、widthFix（宽度不变、高度自动调整）等。

3.字体适配
在小程序中，字体也需要适配，考虑到不同设备的屏幕尺寸和像素密度，建议使用 rpx 和 vw 等单位，使字体大小与屏幕大小保持一致，同时也可以根据需要在不同设备上设置不同尺寸的字号。

4.交互设计
由于不同屏幕尺寸的差异，导致用户操作方式可能略有不同，因此开发者需要重新考虑哪些交互元素适合添加到小程序中，同时还需要给出清晰易懂的交互方式，以方便用户进行操作。

5.数据展示
不同尺寸的屏幕所能承载的数据量也会有所不同，因此在小程序中需要根据设备尺寸适当调整页面内容并采用合适的布局方式，同时也要注意细节问题，例如颜色、字体和标识的适配等。

总之，小程序的适配需要考虑多个方面的因素，在开发时需要充分考虑设备的屏幕尺寸、分辨率密度等情况，并针对性地制定相应的适配方案。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

9.前端大屏可视化适配方案

前端大屏可视化适配方案需要考虑以下几个方面：

1.分辨率适配
大屏分辨率通常比普通电脑或移动设备的屏幕更高，因此在编写前端代码时需要注意布局和元素的大小。可以使用百分比单位或 rem 等相对单位进行布局，并根据实际情况调整元素的大小。

2.元素排版
大屏可显示区域较大，可以适当调整元素之间的间距和大小，使页面更加美观。但是不要忘记保持一定的平衡性和协调感。

3.效果优化
为了提升用户体验，可以添加一些特效或动画，但需要注意不要出现过于复杂的效果或过度渲染导致卡顿的问题。另外，还需要考虑特效在不同分辨率下的表现情况。

4.交互设计
大屏幕具有更好的互动性和展示效果，开发者需要重新考虑哪些交互元素适合添加到大屏幕中，给出清晰易懂的交互方式，以方便用户进行操作。同时，还需要注意大屏幕的触控范围和指针精度等特殊情况。

5.数据展示
大屏幕可以同时展示更多的数据内容和信息，但也需要注意细节问题，例如在数据可视化方面，颜色、字体和标识的适配等问题。

总之，前端大屏可视化需要综合考虑用户需求、交互方式、UI设计和开发技巧等多方面因素，在此基础上进行适配方案的制定。特别是对于跨平台或移动端的前端项目，不同设备之间存在的屏幕尺寸、分辨率、浏览器版本以及操作系统等诸多因素都需要充分考虑。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

10.小程序bind和catch事件绑定的区别

小程序中，bind 和 catch 属性均表示事件绑定的类型。它们的区别在于触发事件时，bind是冒泡,catch阻止冒泡阶段,处理方式不同。

bind 用于绑定冒泡阶段的事件处理函数，当一个组件上的事件被触发后，该事件会从这个组件开始向父节点传递，直到传递到捕获阶段的最上层元素或者通过 stopPropagation 方法终止传递。因此，如果需要多个嵌套组件的事件都能够执行，可以使用 bind 绑定。

catch 用于绑定阻止冒泡阶段的事件处理函数，当一个组件上的事件被触发后，该事件不会向父节点传递，并且通过 stopPropagation 方法也无法继续向上传递。相比 bind，catch 捕获的事件处理函数执行会比较早，在性能上也更优秀。因此，如果需要在子组件内对一个事件进行拦截或预处理，可以使用 catch 绑定。

另外，还需要注意的是，对于 bind 和 catch 属性的设置，只需写属性名即可，不需要带上 on 前缀。例如：使用 bindtap="handleTap" 或 catchtap="handleTap" 来绑定点击事件处理函数。

总之，在开发小程序时，需要根据具体场景选择合适的事件绑定方式。如果需要冒泡传递，就使用 bind，否则使用 catch。当然，在实际开发过程中，根据需求来灵活使用这两种方式也是很常见的。
1
2
3
4
5
6
7
8
9

11. e.target 和e.currentTarget

//得到事件源
一个事件触发冒泡时
currentTarget指向绑定事件(祖先元素)
target触发事件的后代元素
用currentTarget更好
1
2
3
4
5

12.声明式导航-----小程序内部 页面跳转

navigator
	url  跳转页面路径
	open-type
		navigate  跳转到非 tab页， 跳转时新建新的webview打开新的页面（不会导致原来页面的卸载）
		redirect  跳转到非 tab页， 跳转时关闭当前页webview,打开新的页面（导致原来页面的卸载）
		switchTab 跳转到tab页 
		reLaunch 跳转到非tab页， 会关闭已经打开的所有的页面， 打开目标页面
		navigateBack  不定义url属性 
			结合delta 定义回退层级  默认值1
		exit 不需要url 直接退出小程序
1
2
3
4
5
6
7
8
9
10

13.声明式导航-----跳转到外部的小程序

navigator
	target 值为 miniProgram
	app-id  目标 小程序的 appid
	path  跳转到目标小程序 页面的路径
	extra-data 对象， 跳转到模板小程序携带的参数
		目标小程序 如何 接收 其他小程序跳转时 携带的参数
			1 使用 全局对象生命周期钩子函数的参数  app.js
				onLaunch(options){}     冷启动时
				onShow(options){}	冷启动和热启动都可以
			options就是 跳转携带的参数
			2 通过 微信  全局 api获取
					wx.getLaunchOptionsSync()  与 App.onLaunch 的回调参数一致。
					wx.getEnterOptionsSync()
						获取本次小程序启动时的参数。如果当前是冷启动，则返回值与 App.onLaunch 的回调参数一致；如果当前是热启动，则返回值与 App.onShow 一致
1
2
3
4
5
6
7
8
9
10
11
12
13
14

14.编程式导航

- wx.switchTab()   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- wx.reLaunch()    关闭所有页面，打开到应用内的某个页面
- wx.redirectTo()  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
- wx.navigateTo()  保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
- wx.navigateBack() 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
- wx.exitMiniProgram() 退出当前小程序。必须有点击行为才能调用成功
- wx.navigateToMiniProgram()  打开另一个小程序
- wx.navigateBackMiniProgram() 返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功   注意：微信客户端 iOS 6.5.9，Android 6.5.10 及以上版本支持
1
2
3
4
5
6
7
8

15.小程序接口规范

- 接口 源 必须是 加密协议 https 或者 wss

- 接口源 （web-view源），必须要在小程序后台中 定义 否则 无法请求（后台、开发管理、开发设置、服务器域名配置）

- 将请求 分成 四种

  普通http请求 （ajax） wx.request()

  上传文件 wx.uploadFile()

  下载文件 wx.downloadFile()

  websocket

  小程序 包括 app 直接跨域请求 没有同源策略限制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

16.tab页是无法通过在跳转url后面通过 search携带参数，那将要如何获取？

tab页是无法通过上述方法传参的？

如何跳转tab时 携带参数?

1 使用 globalData

2 使用缓存
1
2
3
4
5
6
7

17.微信小程序怎么得到open id

要获取微信小程序的 OpenID，需要进行以下步骤：

用户登录授权 - 小程序中使用 wx.login() 方法获取用户登录凭证 code，然后使用 wx.getUserInfo() 方法获取用户的基本信息和加密数据。

后端验证 - 在小程序后端服务器上发送请求获取 session_key 和 openid。开发者应该在小程序开发平台上将小程序配置中的 AppID 与 AppSecret 设置好，并在后端使用这些参数来完成登录验证。

解密数据 - 前端收到用户数据时可以对其进行加密处理，在后端需要通过相应解密算法来解密数据。

以上是获取微信小程序 OpenID 的大致流程。需要注意的是，获取 OpenID 是需要保障用户隐私权的，应该妥善处理用户数据，并遵守相关法律规定。此外，也建议采用官方提供的 SDK 或者第三方库来进行开发，以确保代码安全、规范并避免常见问题。
1
2
3
4
5
6
7
8
9