小程序常问面试题
之前准备了 Vue 常问面试题 , 今天为大家整理了小程序经常问到的面试题
1. 了解微信小程序吗？简述小程序的原理。
微信⼩程序采⽤JavaScript、WXML、WXSS三种技术进⾏开发,本质就是⼀个单⻚⾯应⽤，所有的⻚⾯渲染和事件处理，都在⼀个⻚⾯内进⾏，但⼜可以通过微信客户端调⽤原⽣的各种接⼝；
微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的⻚⾯更新，都需要通过对数据的更改来实现；
⼩程序分为两个部分 webview 和 appService 。其中 webview 主要⽤来展现 UI ，appService用来处理业务逻辑、数据及接⼝调⽤。它们在两个进程中运⾏，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理。
2. 小程序项目的主要目录文件作用
project.config.json 项目的配置文件，做一些个性化配置，例如界面颜色、编译配置等等；
app.json 当前小程序的全局配置，包括小程序的所有页面路径配置、界面表现、网络超时时间、底部tab等；
sitemap.json 配置小程序及其页面是否允许被微信索引；
pages 里面包含了一个个具体的页面；
wxss 页面样式，app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效；
app.js 小程序的逻辑
js 页面逻辑
json 页面配置
wxml 页面结构
3. 小程序的双向绑定和vue哪里不一样
小程序直接 this.data 的属性是不可以同步到视图的，必须调用：
this.setData({
// 这里设置
})
4. 小程序页面的生命周期函数
onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数(监听页面加载)
onShow() 页面显示/切入前台时触发(监听页面显示)
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互(监听页面初次渲染完成)
onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等(监听页面隐藏)
onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时(监听页面卸载)
5. 微信小程序的优劣势
优势 :
即用即走，不用安装，省流量，省安装时间，不占用桌面
依托微信流量，天生推广传播优势
开发成本比 App 低
缺点 :
用户留存，即用即走是优势，也存在一些问题
入口相对传统 App 要深很多
限制较多 , 页面大小不能超过2M , 不能打开超过10个层级的页面
6. 小程序的wxss和css有哪些不一样的地方
WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改
尺寸单位 rpx
rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素
使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束
/** index.wxss **/
@import './base.wxss';
.container{
color: red;
}
7. 小程序页面间有哪些传递数据的方法
(1) 使用全局变量实现数据传递在 app.js 文件中定义全局变量 globalData , 将需要存储的信息存放在里面
// app.js
App({
// 全局变量
globalData: {
userInfo: null
}
})
使用的时候，直接使用 getApp() 拿到存储的信息
(2) 使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面,并在新页面 onLoad 的时候初始化
//pageA.js
// Navigate
wx.navigateTo({
url: '../pageD/pageD?name=raymond&gender=male',
})
// Redirect
wx.redirectTo({
url: '../pageD/pageD?name=raymond&gender=male',
})
// pageD.js
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender)
this.setData({
option: option
})
}
})
需要注意的问题：
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面
onLoad 只执行一次
使用本地缓存 Storage 相关
8. 小程序关联微信公众号如何确定用户的唯一性
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的
9. 如何实现下拉刷新
首先在全局 config 中的 window 配置 enablePullDownRefresh
在 Page 中定义 onPullDownRefresh 钩子函数 , 到达下拉刷新条件后 , 该钩子函数执行, 发起请求方法
请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新
10. bindtap和catchtap的区别是什么
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻止冒泡的
11. ‘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()：关闭所有页面，打开到应用内的某个页面
12. typeof 运算符和 instanceof 运算符以及 isPrototypeOf() 方法的区别
typeof是一个运算符，用于检测数据的类型，比如基本数据类型null、undefined、string、number、boolean，以及引用数据类型object、function，但是对于正则表达式、日期、数组这些引用数据类型，它会全部识别为object；
instanceof同样也是一个运算符，它就能很好识别数据具体是哪一种引用类型。它与isPrototypeOf的区别就是它是用来检测构造函数的原型是否存在于指定对象的原型链当中；而isPrototypeOf是用来检测调用此方法的对象是否存在于指定对象的原型链中，所以本质上就是检测目标不同。
13. call()和apply()的区别
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
apply(this对象，[参数1，参数2，…])
call(this对象，参数1，参数2，…)