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

小程序面试题

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）