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

小程序面试题

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）