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

简介: 前端面试题之——小程序篇

小程序面试题

1.数据请求怎么封装

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

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

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

4.小程序的优点

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

    5.小程序的缺点

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

6.简述小程序原理

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

7.怎么解决异步请求问题

  • 不封装接口的话可以在返回成功的回调里面处理逻辑
  • 可以用 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.小程序页面间有哪些传递数据的方法

  • 使用全局变量实现数据传递:在 app.js 文件中定义全局变量 globalData将需要存储的信息存放在里面: // app.js
    App({ // 全局变量 globalData: { userInfo: null } })
  • 使用的时候,直接使用 getApp()拿到存储的信息
  • 使用 wx.navigateTo 和 wx.redirectTo 的时候,可以将部分数据放在 url 里,并在新页面 onLoad 的
    时候初始化

26.小程序网络请求封装
网 络 请 求 小 程 序 提 供 了 wx.request
https://segmentfault.com/a/1190000014789969
27.怎么解决小程序的异步请求问题
小程序支持大部分 es6 语法:在返回成功的回调里面处理逻辑;Promise 异步
28.小程序关联微信公众号如何确定用户的唯一性
unionid 是相同且唯一的
29.如何实现下拉刷新
在全局 config 中的 window 配置 enablePullDownRefresh
30.小程序页面见传值的方式有几种

  • url( 跳 转 ) storage(wx.storageSync) console.log(obj1) // {a:1,b:4,c:5}
  • 全局变量(getApp)
相关文章
|
3天前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
9 2
|
9天前
|
存储 前端开发 小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
|
17天前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
|
3天前
|
前端开发 JavaScript 虚拟化
前端面试题12-22
ES6(ECMAScript 2015)是 JavaScript 的重要版本,引入了许多新特性和语法,提升了语言的功能和可用性。ES6 的主要特性包括箭头函数、类、模板字符串、解构赋值、默认参数、Promise、模块化、Generator 函数、async 函数、Proxy 和 Reflect 等。这些特性不仅简化了代码的编写和维护,还为开发者提供了更多的编程范式和工具。了解和掌握 ES6 的特性是现代 JavaScript 开发的必备技能。
6 1
|
3天前
|
JSON 前端开发 JavaScript
前端面试题01-11
Map是ES6引入的一种新的键值对集合数据结构,类似于对象,但键的范围不限于字符串,还可以是任何类型的值。Map保持键值对的插入顺序,提供更灵活的键值对操作方法,如`set()`、`get()`、`delete()`、`has()`等。
5 1
|
12天前
|
前端开发 小程序
新版校园跑腿外卖独立版+APP+小程序前端外卖配送平台源码
同城校园跑腿外卖配送平台源码,支持自定义diy 你可以设计你的页面,设计你自己的风格,支持多校园,独立版本,多商户,有用户端,骑手端,商家端,强大的功能
27 3
|
20天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
12 1
|
20天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
14 0
|
9天前
|
存储 算法 Java
JAVA后端开发面试题库
JAVA后端开发面试题库
19 1
|
14天前
|
缓存 安全 Java
【Java面试——并发基础、并发关键字】
随着硬件指令集的发展,我们可以使用基于冲突检测的乐观并发策略: 先进行操作,如果没有其它线程争用共享数据,那操作就成功了,否则采取补偿措施(不断地重试,直到成功为止)。这种乐观的并发策略的许多实现都不需要将线程阻塞,因此这种同步操作称为非阻塞同步。 乐观锁需要操作和冲突检测这两个步骤具备原子性,这里就不能再使用互斥同步来保证了,只能靠硬件来完成。硬件支持的原子性操作最典型的是: 比较并交换(Compare-and-Swap,CAS)。CAS 指令需要有 3 个操作数,分别是内存地址 V、旧的预期值 A 和新值 B。当执行操作时,只有当 V 的值等于 A,才将 V 的值更新为 B。