前端面试题之——小程序篇_前端小程序面试题

• 不封装接口的话可以在返回成功的回调里面处理逻辑
• 可以用 Promise 来封装
• 可以引用 runtime 来使用 async await
• 使用 wepy 或着美团的小程序框架，可以通过安装库解决
• 在回调函数中调用下一个组件的函数

8.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’}) 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’ })
9.小程序和 Vue 写法的区别

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

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

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

11.生命周期函数

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

12.几种跳转，小程序内的页面跳转

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

13.如何自定义组件

• 先创建一个 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)就可以了

14.如何实现下拉刷新
先在 app.json 或 page.json 中配置 enablePullDownRefresh:true page 里用 onPullDownRefresh 函数，在下拉刷新时执行 在下拉函数执行时发起数据请求，请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新的状态
bindtap 和 catchtap 的区别是什么
bindtap 不会阻止冒泡事件，catchtap 阻止冒泡
15. setData 的回调函数
微信小程序的 setData 实现是和 react 的 setData 实现类似的，所以它也是一个异步函数，并且有 回 调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要 用到 setData 后 data 里的数据的步骤，请写入 setData 的回调函数中，如下示例：
this.setData({ a: this.data.a++ },()=>{ })
16.小程序和小程序之间的跳转

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

17.小程序顶部自定义导航怎么写
原生导航栏
自定义导航栏：在 app.json 的 window 对象中定义导航的样式 navigationStyle：“custom” https://www.cnblogs.com/jiangbeixiaoqiao/p/10826291.html
18.小程序的单向数据绑定
{{属性名}}，this.setData{{}}setdata 和页面数据的线程机制
多 线 程 Worker： 执 行 多 条 并 行 线 程 ， https://blog.csdn.net/weixin_40440167/article/details/78386412?depth_1-utm_source=dist ribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 1.https://www.jb51.net/article/165372.htm
2.https://www.cnblogs.com/idreamo/p/10853965.html 3.https://developers.weixin.qq.com/miniprogram/dev/api/worker/Worker.html
19.分包的操作，发布的时候是选择某个包来发吗

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

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

• wx.requestPayment

21.说几个常用的 API

• wx.login
• wx.request
• wx.navigateTo
• wx.redirectTo
• wx.switchTab
• wx.naviageteBack
• wx.reLaunch
  等等…
  22.授权验证登录怎么做，用户退出后下次进入还需要再次授权吗
• 一次性授权：wx.login 获取到一个 code，拿这 code 去请求后台得到 openId, sessionKey, unionId。 调 wx.getUserInfo
• 永久授权：调取授权登录接口并把获取到的用户公开信息存入数据库

23.小程序有常用的 UI 库吗，是什么
WeUI可按需下载，把下载的压缩好放入项目里，项目目录为 weui-miniprogram。 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
24.验证授权是自动弹出还是触发的

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

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

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。