2020微信小程序前端面试题汇总

[持续更新，欢迎补充]

1、文件类型

WXML——模板文件
JSON——配置/设置文件，如标题,tabbar,页面注册
WXSS——样式文件，样式可直接用import导入
JS——脚本逻辑文件，逻辑处理，网络请求
app.json——配置文件入口，整个小程序的全局配置，网络超时时间、底部tab、页面路径，window字段是小程序所有页面的顶部背景颜色、文字颜色
app.js——可以没有内容，可以在里边监听生命周期函数、声明全局变量
app.wxss——全局配置样式文件

2、数据请求怎么封装

将所有的接口放在统一的js文件中并导出（或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出）
在app.js创建封装请求数据的方法
在子页面中调用封装的方法请求数据

3、参数传值的方法

给HTML元素中添加data-*属性来传递需要的值，之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母，不可以存放对象
跳转页面时通过navigator传递需要的参数值
设置id的方法标识，通过e.currentTarget.id获取设置的id值，然后通过设置全局变量的方法来传递数值

4、提高小程序的应用速度的方法

减少默认data的大小
组件化方案，公用的如弹框等写个自定义的组件，然后调用

5、小程序的优点

无需下载
打开速度快
开发成本低
为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线
服务请求快

6、小程序的缺点

依托微信，不能开发后台管理功能
大小限制不能超过2M，不能打开超过5个层级的页面

7、简述小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理。

8、怎么解决异步请求问题

<1>不封装接口的话可以在返回成功的回调里面处理逻辑
<2>可以用Promise 来封装
<3>可以引用runtime来使用async await
<4>使用wepy或着美团的小程序框架，可以通过安装库解决

<5>在回调函数中调用下一个组件的函数

app.js

success: function (info) {

that.apirtnCallback(info)

}

index.js

onLoad: function () {

app.apirtnCallback = res => {

console.log(res)

}

｝

9、webview中的页面怎么跳回小程序中

先在管理后台配置域名白名单，
然后引入jweixin-1.3.2.js（https://res.wx.qq.com/open/js/jweixin-1.3.0.js），最后

wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})

wx.miniProgram.navigateTo({url: '/path/to/page'})

10、webview的页面怎么跳转到小程序导航的页面？

小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {

var page = getCurrentPages().pop();

if (page == undefined || page == null) return;

page.onLoad();

}

webview的页面，则通过

wx.miniProgram.switchTab({

url: '/pages/index/index'

})

11、小程序和Vue写法的区别

循环遍历：小程序是wx:for="list"，vue是v-for="inforin list"
调用data模型：小程序是this.data.unifo，vue是this.unifo
给模型赋值：小程序是this.setData({unifo:1})，vue是直接this.unifo=1

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

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

13、1px = 2rpx

14、生命周期函数

onLoad——页面加载，调一次
onShow——页面显示，每次打开页面都调用
onReady——初次渲染完成，调一次
onHide——页面隐藏，当navigateTo或底部tab切换时调用
onUnload——页面卸载，当redirectTo或navigateBack时调用

15、几种跳转，小程序内的页面跳转

wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch——关闭所有页面，打开到应用内的某个页面
通过navigator跳转

16、如何自定义组件

先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss

基本配置：

.json——进行自定义组件声明

{"component": true
}

使用组件：

假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明

{  "usingComponents": {  "toastdemo": "/components/toastdemo/toastdemo"  }
}

接着在index.wxml中引用
然后在index.js进行配置
使用时直接执行this.toastdemo.showToast('弹框组件调用成功',2000)就可以了

17、如何实现下拉刷新

先在app.json或page.json中配置enablePullDownRefresh:true
page里用onPullDownRefresh函数，在下拉刷新时执行
在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

18、bindtap和catchtap的区别是什么

bindtap不会阻止冒泡事件，catchtap阻止冒泡

19、setData的回调函数

微信小程序的setData实现是和react的setData实现类似的，所以它也是一个异步函数，并且有回调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要用到setData后 data里的数据的步骤，请写入setData的回调函数中，如下示例：

this.setData({a: this.data.a++},()=>{
})

20、小程序和小程序之间的跳转

在同一主体公众号上关联2个小程序appid，
用navigator，对应设置一些属性即可
target：miniProgram——其他小程序
target：self——当前小程序

21、小程序顶部自定义导航怎么写

原生导航栏
自定义导航栏：在app.json的window对象中定义导航的样式navigationStyle："custom"
https://www.cnblogs.com/jiangbeixiaoqiao/p/10826291.html

22、小程序的单向数据绑定

{{属性名}}，this.setData{{}}

23、MVVM

model——数据模型
view——界面，数据的展示
ViewModel——model与view通过viewmodel实现双向数据绑定

24、双向数据绑定的原理

vue通过{{}}和v-model和事件指令
mvvm，数据变化更新视图，视图变化更新数据

25、setdata和页面数据的线程机制

多线程Worker：执行多条并行线程，

https://blog.csdn.net/weixin_40440167/article/details/78386412?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

https://www.jb51.net/article/165372.htm

https://www.cnblogs.com/idreamo/p/10853965.html

https://developers.weixin.qq.com/miniprogram/dev/api/worker/Worker.html

26、分包的操作，发布的时候是选择某个包来发吗

分包：主包添加跳转路径，分包放内容，在app.json配置subpakeages声明项目分包结构。代码包总包大小为12M，单个主包/分包大小不能超过2M。
按照功能划分的打包原则：可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包；公共逻辑、组件放在主包内。
首次启动时，先下载小程序主包，显示主包内的页面；如果进入了某个分包的页面，再下载这个对应分包，下载完毕后，显示分包的页面，
总结：首先配置好打包路径，tabbar页面必须在主包内。各分包之间不能互相调用，能调用主包内的
分包加载，预分包加载

27、同时setdata很多数据，对性能有什么影响

28、import是es的还是node的，怎么使用npm install了的文件

29、npm run dev的dev是怎么设置的

30、小程序的微信支付是哪个API，参数是哪些及怎么获取的

wx.requestPayment

31、说几个常用的API

wx.login
wx.request
wx.navigateTo
wx.redirectTo
wx.switchTab
wx.naviageteBack
wx.reLaunch
等等…

32、wepy框架了解多少

33、箭头函数和普通函数有什么区别

34、小程序支持多少并发

35、OCR

36、授权验证登录怎么做，用户退出后下次进入还需要再次授权吗

wx.login获取到一个code，拿这code去请求后台得到openId, sessionKey, unionId。
调wx.getUserInfo
一次性授权：
永久授权：调取授权登录接口并把获取到的用户公开信息存入数据库

37、小程序有常用的UI库吗，是什么

WeUI，可按需下载，把下载的压缩好放入项目里，项目目录为weui-miniprogram。

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

38、节流，防抖，使用过吗

39、JS垃圾回收机制

40、验证授权是自动弹出还是触发的

按钮触发的，open-type指定为getUserInfo类型

41、用JS实现快速排列

42、跨域,怎么解决

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

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

// app.jsApp({// 全局变量globalData: {userInfo: null}
})

使用的时候，直接使用getApp()拿到存储的信息

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

44、小程序网络请求封装

网络请求小程序提供了wx.request

https://segmentfault.com/a/1190000014789969

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

小程序支持大部分es6语法：在返回成功的回调里面处理逻辑；Promise异步

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

unionid是相同且唯一的

47、如何实现下拉刷新

首先在全局config中的window配置enablePullDownRefresh

48、es6的Promise是同步还是异步，Promise的抛出异常和处理异常是什么

Promise本身的同步的，是解决异步编程导致陷入回调地狱问题的。
Promise作用：解决异步回调的问题。
Promise对象：resolve表示将状态变成成功完成，reject表示将状态变成失败完成。
resolve方法执行完后再执行then方法，resolve就走then
https://www.jianshu.com/p/7b1dd9c50d2b

49、Promise和then的区别

50、es6的fetch和map的区别

51、vue双向绑定的原理是什么

52、vue的生命周期

53、vue有哪些属性

54、vue的v-router有几种模式，有什么区别

55、小程序页面见传值的方式有几种

url（跳转）
storage（wx.storageSync）
全局变量（getApp）

56、axios拦截器

57、对Promise中resolve、reject、catch的理解

https://www.jianshu.com/p/614c2a7ca7fc

58、JS闭包了解吗，及怎么使用

https://www.cnblogs.com/Renyi-Fan/p/11590231.html

https://www.cnblogs.com/itjeff/p/10106855.html

闭包3个特性：函数嵌套函数、函数内部可以引用函数外部的参数和变量、参数和变量不会被垃圾回收机制回收。

59、深浅拷贝说说是什么，及怎么实现

https://www.cnblogs.com/jiajialove/p/11288296.html

https://segmentfault.com/a/1190000017773877

60、typeof的返回值是什么，比如typeof(a)返回的是什么

typeof用来判断变量类型：

61、==和===有什么区别，比如 "1"==1，返回什么

==：相等运算符，数值相等就为true
===：严格运算符，数值和数据类型都要相等才为true
"1"==1，返回true
"1"===1，返回false

62、

63、

64、

65、

66、

2020微信小程序前端面试题汇总相关推荐

微信小程序自动解决分包大小问题_2020微信小程序前端面试题汇总
[持续更新,欢迎补充] 1.文件类型 WXML--模板文件 JSON--配置/设置文件,如标题,tabbar,页面注册 WXSS--样式文件,样式可直接用import导入 JS--脚本逻辑文件,逻辑处 ...
微信小程序部分面试题汇总
1.小程序中如何进行接口请求?会不会跨域,为什么微信小程序有自带的api接口,wx.request(); 不会跨域,因为微信小程序不是浏览器,没有同源策略的约束: wx.request({url: ...
面试题（2020）微信小程序常见面试题
面试题(2020)微信小程序常见面试题博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.微信的小程序的主要文件 WXML-- ...
2019前端面试题汇总
面试题 js + 框架闭包的作用函数内部变量外用 || 在一个函数内部嵌套一层或多层函数可以将内部变量外用副作用: 违背垃圾回收机制 ie下回造成内存泄漏解决副作用方案: 变量使用结束后删除 ...
前端面试题汇总（jQuery）
前端面试题汇总(jQuery) 1 你觉得jQuery或zepto源码有哪些写的好的地⽅ jquery源码封装在⼀个匿名函数的⾃执⾏环境中,有助于防⽌变量的全局污染,然后通过传⼊window对象参数, ...
前端面试题汇总（JS 基础篇）
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...
前端面试题汇总（JavaScript面试纯干货）
前端面试题汇总(JavaScript面试纯干货) 1 闭包闭包就是能够读取其他函数内部变量的函数闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
微信小程序wepy框架资源汇总
微信小程序wepy开发资源汇总 ! wepy官方仓库 wepy官方文档开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序深大的树洞:基于wepy开发的树洞类微信小程 ...

2020微信小程序前端面试题汇总

2020微信小程序前端面试题汇总相关推荐

最新文章

热门文章