小程序面试题#

1. 如何避免微信小程序中app.js中onShow事件的n次触发的问题?#

在开发中，遇到app.js中onShow事件总是因调用其它Api（如wx.chooseImage、wx.makePhoneCall、wx.previewImage等）而触发的情况，小程序热启动也会引发该问题，一般开发者在onLaunch处理扫码进入逻辑，热启动时就容易出bug。目前较好的办法是在onShow中通过首个参数optnios下的scene判断进入的场景，根据场景处理相关逻辑。如果是转发的场景，可把业务代码写在onLoad函数中，因为分享后的事件不会执行onLoad，只会执行onShow。

2. 简单描述下微信小程序的相关文件类型?#

微信小程序项目结构主要有四个文件类型：

• WXML(WeiXin Markup Language)：是框架设计的一套标签语言，结合基础组件、事件系统，可构建页面结构，内部主要是微信自己定义的组件。
• WXSS(WeiXin Style Sheets)：一套样式语言，用于描述WXML的组件样式。
• js：负责逻辑处理和网络请求。
• json：用于小程序设置，如页面注册、页面标题及tabBar配置等。其中app.json是必须有的配置文件入口，包含整个小程序的全局配置，如页面注册、网络设置、小程序的window背景色、导航条样式、默认标题等；app.js也必须存在，可在其中监听并处理小程序的生命周期函数、声明全局变量；app.wxss是全局样式文件。

3. 你是怎么封装微信小程序的数据请求的?#

• 将所有的接口放在统一的js文件中并导出。
• 在app.js中创建封装请求数据的方法。
• 在子页面中调用封装的方法请求数据。

4. 有哪些参数传值的方法?#

• 给HTML元素添加data-*属性来传递需要的值，然后通过e.currentTarget.dataset或onLoad的param参数获取，但data-名称不能有大写字母且不可以存放对象 。
• 设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，再通过设置全局对象的方式来传递数值。
• 在navigator中添加参数传值。

5. 你使用过哪些方法，来提高微信小程序的应用速度?#

• 提高页面加载速度。
• 进行用户行为预测。
• 减少默认data的大小。
• 采用组件化方案。

6. 小程序与原生App哪个好?#

小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势外，在服务请求延时与用户使用体验方面都得到了较大幅度的提升，能够承载更复杂的服务功能，使用户获得更好的体验。原生App性能更好，可充分利用设备硬件功能，但开发成本高、更新周期长。

7. 简述微信小程序原理?#

微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，与现有的前端开发有相似之处但又存在差异。JavaScript代码运行在微信App中，而非浏览器，一些H5技术的应用需微信App提供对应的API支持，微信也有独有的某些API，H5支持不佳或不支持；WXML是微信基于XML语法开发的，开发时只能使用微信提供的现有标签，无法使用HTML标签；WXSS具有CSS的大部分特性，但并非全部支持，且支持情况没有详细文档说明。微信的架构是数据驱动的架构模式，UI和数据分离，所有页面更新都需通过数据更改来实现。小程序分为webview和appService两部分，webview主要展现UI，appService处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层SBridge实现通信，完成UI的渲染、事件的处理。

8. 分析下微信小程序的优劣势?#

• 优势：无需下载，通过搜索和扫一扫就可以打开；用户体验好，打开速度快；开发成本比App低；安卓上可以添加到桌面，与原生App差不多；微信有严格的审查流程，为用户提供良好的安全保障，未通过审查的小程序无法发布到线上。
• 劣势：限制较多，页面大小不能超过1M，不能打开超过5个层级的页面；样式单一，部分组件样式不可修改，如幻灯片、导航；推广面窄，不能分享朋友圈，只能通过分享给朋友、附近小程序推广，且附近小程序推广也受微信限制；依托于微信，无法开发后台管理功能。

9. 微信小程序与H5的区别?#

• 运行环境不同：传统HTML5的运行环境是浏览器（包括webview），微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门优化，配合自定义开发语言标准，提升了性能。
• 开发成本不同：小程序只在微信中运行，无需顾虑浏览器兼容性问题，不用担心生产环境出现不可预料的BUG。
• 获取系统级权限不同：系统级权限都可以和微信小程序无缝衔接。
• 应用在生产环境的运行流畅度不同：HTML5应用面对复杂业务逻辑或丰富页面交互时，体验不尽人意，需不断优化提升用户体验；微信小程序运行环境独立，性能表现更优。

10. 怎么解决小程序的异步请求问题?#

可以在回调函数中调用下一个组件的函数，示例如下：

// app.js
success: function(info){ 
    that.apirtnCallback (info)
}
// index.js
onLoad: function(){ 
    app.apirtnCallback =res=>{
        console.log(res)
    }
}

11. 小程序直接this.data的属性是不可以同步到视图的，必须调用什么方法？#

必须调用this.setData方法，才能将数据同步到视图，示例代码如下：

this.setData({
    noBind: true
})

12. 哪些方法可以用来提高微信小程序的应用速度？#

• 提高页面加载速度。
• 进行用户行为预测。
• 减少默认data的大小。
• 采用组件化方案。

13. 如何实现下拉刷新？#

首先在全局config中的window配置enablePullDownRefresh开启下拉刷新功能，然后在Page中定义onPullDownRefresh钩子函数。当达到下拉刷新条件时，该函数执行，发起请求。请求返回后，调用wx.stopPullDownRefresh停止下拉刷新动画。

14. bindtap和catchtap的区别是什么？#

• 相同点：二者都是点击事件函数，点击时都会触发。
• 不同点：bindtap不会阻止冒泡事件，catchtap会阻止冒泡。

15. 简述下wx.navigateTo()，wx.redirectTo()，wx.switchTab()，wx.navigateBack()，wx.reLaunch()的区别？#

• wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但不能跳到tabbar页面。
• wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabbar页面。
• wx.switchTab()：跳转到tabBar页面，并关闭其他所有非tabBar页面。
• wx.navigateBack()：关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。
• wx.reLaunch()：关闭所有页面，打开到应用内的某个页面。