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

墨蓝 2023-07-15 09:07 11阅读 0赞

\[持续更新，欢迎补充\]

**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][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][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_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.jb51.net_article_165372.htm]

[https://www.cnblogs.com/idreamo/p/10853965.html][https_www.cnblogs.com_idreamo_p_10853965.html]

[https://developers.weixin.qq.com/miniprogram/dev/api/worker/Worker.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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3BlaXNp_size_16_color_FFFFFF_t_70][]

**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][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.js
>     
>     App({
>          // 全局变量
>       globalData: {
>         userInfo: null
>       }
>     })

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

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

**44、小程序网络请求封装**

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

[https://segmentfault.com/a/1190000014789969][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][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][https_www.jianshu.com_p_614c2a7ca7fc]

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

[https://www.cnblogs.com/Renyi-Fan/p/11590231.html][https_www.cnblogs.com_Renyi-Fan_p_11590231.html]

[https://www.cnblogs.com/itjeff/p/10106855.html][https_www.cnblogs.com_itjeff_p_10106855.html]

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

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

[https://www.cnblogs.com/jiajialove/p/11288296.html][https_www.cnblogs.com_jiajialove_p_11288296.html]

[https://segmentfault.com/a/1190000017773877][https_segmentfault.com_a_1190000017773877]

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

*  typeof用来判断变量类型：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3BlaXNp_size_16_color_FFFFFF_t_70 1][]

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

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

62、

63、

64、

65、

66、

[https_res.wx.qq.com_open_js_jweixin-1.3.0.js]: https://res.wx.qq.com/open/js/jweixin-1.3.0.js
[https_www.cnblogs.com_jiangbeixiaoqiao_p_10826291.html]: https://www.cnblogs.com/jiangbeixiaoqiao/p/10826291.html
[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://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.jb51.net/article/165372.htm
[https_www.cnblogs.com_idreamo_p_10853965.html]: https://www.cnblogs.com/idreamo/p/10853965.html
[https_developers.weixin.qq.com_miniprogram_dev_api_worker_Worker.html]: https://developers.weixin.qq.com/miniprogram/dev/api/worker/Worker.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3BlaXNp_size_16_color_FFFFFF_t_70]: /images/20230528/7cb32a7acf284c0abf5e980d716e2d66.png
[https_developers.weixin.qq.com_miniprogram_dev_extended_weui_download.html]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
[https_segmentfault.com_a_1190000014789969]: https://segmentfault.com/a/1190000014789969
[https_www.jianshu.com_p_7b1dd9c50d2b]: https://www.jianshu.com/p/7b1dd9c50d2b
[https_www.jianshu.com_p_614c2a7ca7fc]: https://www.jianshu.com/p/614c2a7ca7fc
[https_www.cnblogs.com_Renyi-Fan_p_11590231.html]: https://www.cnblogs.com/Renyi-Fan/p/11590231.html
[https_www.cnblogs.com_itjeff_p_10106855.html]: https://www.cnblogs.com/itjeff/p/10106855.html
[https_www.cnblogs.com_jiajialove_p_11288296.html]: https://www.cnblogs.com/jiajialove/p/11288296.html
[https_segmentfault.com_a_1190000017773877]: https://segmentfault.com/a/1190000017773877
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3BlaXNp_size_16_color_FFFFFF_t_70 1]: /images/20230528/7e416aa55cd548cf8bd7e303ac33708d.png