最新最全的前端⾯试题集锦之⼩程序篇（从基础到⾼级）该内容主要整理关于⼩程序的相关⾯试题，其他内容⾯试题请移步⾄ 查看。
⽬录
⼀、技术类问题
1. 简单描述下⼩程序的相关⽂件类型？
⼩程序项⽬结构主要有四个⽂件类型：
1. wxml 模板⽂件，是框架设计的⼀套标签语⾔，结合基础组件、事件系统、可以构建出页⾯的结构；
2. wxss 样式⽂件，是⼀套样式语⾔，⽤于描述 WXML 的组件样式；查询英语四级成绩
3. js 脚本逻辑⽂件，逻辑处理⽹络请求；
4. json 配置⽂件，⼩程序设置，如页⾯注册，页⾯标题及tabBar；
5. app.json 整个⼩程序的全局配置，包括：
1. pages: [所有页⾯路径]
2. ⽹络设置（⽹络超时时间）
3. 界⾯表现（页⾯注册）
4. window: {背景⾊、导航样式、默认标题}
5. 底部tab等
6. app.js 监听并处理⼩程序的⽣命周期函数、声明全局变量；
7. app.wxss 全局配置的样式⽂件。
2. 请谈谈 wxml 与标准的 html 的异同？
都是⽤来描述页⾯的结构；
都由标签、属性等构成；
标签名字不⼀样，且⼩程序标签更少，单⼀标签更多；
多了⼀些 wx:if 这样的属性以及 {{ }} 这样的表达式；
WXML 仅能在⼩程序开发者⼯具中预览，⽽ HTML 可以在浏览器内预览；
组件封装不同， WXML 对组件进⾏了重新封装；
⼩程序运⾏在 JS Core 内，没有DOM树和window对象，⼩程序中⽆法使⽤window对象和document对象。
3. 请谈谈 WXSS 和 CSS 的异同？
都是⽤来描述页⾯的样式；
WXSS 具有 CSS ⼤部分的特性，但是也做了⼀些扩充和修改；
WXSS 新增了尺⼨单位，WXSS 在底层⽀持新的尺⼨单位 rpx；
WXSS 仅⽀持部分 CSS 选择器；
WXSS 提供全局样式与局部样式；
WXSS 不⽀持 window 和 dom ⽂档流。
4. 怎么封装⼩程序的数据请求？
⽅案⼀：
1. 将所有的接⼝放在统⼀的js⽂件中并导出；
2. 在app.js中创建封装请求数据的⽅法；
3. 在⼦页⾯中调⽤封装的请求数据。
⽅案⼆：
1. 在根⽬录下创建utils⽬录及api.js⽂件和apiConfig.js⽂件；
2. 在appConfig.js 封装基础的请求⽅法，设置请求体，带上token和异常处理等；
3. 在api.js中引⼊apiConfig.js封装好的请求⽅法，根据页⾯数据请求的urls，设置对应的⽅法并导出；
4. 在具体页⾯导⼊。
5. ⼩程序页⾯间有哪些传递数据的⽅法？
1. 在app.js中使⽤全局变量实现数据传递；
2. 给元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取。注：data-名称不能有⼤写字母、不可
以存放对象；厉娜宣布结婚
3. 通过设置id的⽅法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的⽅式来传递数值；
4. 页⾯跳转或重定向时，在navigator中使⽤url带参数传递数据；
5. 使⽤组件模板template传递参数；
6. 使⽤缓存传递参数；
7. 使⽤数据库传递参数。
6. 请谈谈⼩程序的双向绑定和vue的异同？
两者⼤体相同，但⼩程序直接使⽤this.data 属性是不可以同步到视图的，必须调⽤this.setData()⽅法。
1. 双向绑定：vue默认⽀持双向绑定；⼩程序需要借助data 来实现。
2. 取值：vue 中，通过 取值；⼩程序中，通过 取值。
3. 定义⽅法：⼩程序定义⽅法在 page.js 中直接定义即可，vue的⽅法通过写在method中进⾏定义。
4. 取变量：⼩程序通过 wx:for = "{{ lists }}"；Vue是 v-for = "item in lists"；
5. 调⽤data模型（赋值）：
1. ⼩程序：this.data.item 需要调⽤ this.setData({item:1}) 进⾏赋值
2. vue: this.item 调⽤ this.item = 1 赋值
⼩程序的双向绑定原则上来说并不是真正的双向绑定。如果在⼩程序 .js ⽂件中改变了某个变量的值，那么页⾯上的值并不会跟着改变；如果想要页⾯上的值也跟着改变的话，需要通过this.setData来操作。⽽ Vue 默认就是双向绑定，只改变了某个变量的值，页⾯上也会跟着改变。
7. 请谈谈⼩程序的⽣命周期函数？
全局⽣命周期app.js：
onLaunch() ⼩程序初始化，只会调⽤⼀次，可获取当前页⾯路径中的参数；
onShow() 页⾯显⽰或切⼊前台时触发，⼀般⽤来发送数据请求；
onHide() 页⾯隐藏或切⼊后台时触发；
onError() 页⾯发⽣错误时触发；
onPageNotFound() ⼩程序要打开的页⾯不存在时触发，可以在此函数进⾏重定向操作。
郭人豪nina⼩程序页⾯的⽣命周期：
onLoad() 页⾯加载时触发，只会调⽤⼀次，可获取当前页⾯路径中的参数；
onShow() 页⾯显⽰或切⼊前台时触发，⼀般⽤来发送数据请求；
onReady() 页⾯初次渲染完成时触发, 只会调⽤⼀次，代表页⾯已可和视图层进⾏交互；
onHide() 页⾯隐藏或切⼊后台时触发, 如底部 tab 切换到其他页⾯或⼩程序切⼊后台等；
onUnload() 页⾯卸载时触发，如redirectTo或navigateBack到其他页⾯时；
onPullDownRefresh() 下拉刷新的钩⼦函数，⽤户下拉刷新时会⾃动⾛到这个函数中；
onReachBottom() 上拉触底的钩⼦函数；
onShareAppMessage() ⽤户点击右上⾓分享。
⼩程序组件中的⽣命周期：
lifetimes：组件⽣命周期
created() 在组件实例刚刚被创建时执⾏；
attached() 在组件实例进⼊页⾯节点树时执⾏；
ready() 在组件在视图层布局完成后执⾏；
moved() 在组件实例被移动到节点树另⼀个位置时执⾏；
detached() 在组件实例被从页⾯节点树移除时执⾏；
error() 每当组件⽅法抛出错误时执⾏。
pageLifetimes：组件所在页⾯的⽣命周期
show() 页⾯被展⽰时执⾏；
hide() 页⾯被隐藏时执⾏；
resize() 页⾯尺⼨变化时执⾏。
8. 简述⼩程序原理？
⼩程序本质就是⼀个单页⾯应⽤，所有的页⾯渲染和事件处理，都在⼀个页⾯内进⾏，但⼜可以通过客户端调⽤原⽣的各种接⼝；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页⾯更新，都需要通过对数据的更改来实现；
它从技术上讲和现有的前端开发差不多，采⽤JavaScript、WXML、WXSS三种技术进⾏开发；
功能可分为webview和appService两个部分：webview⽤来展现UI，appService⽤来处理业务逻辑、数据及接⼝调⽤，两个部分在两个进程中运⾏，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
9. 请谈谈原⽣开发⼩程序、wepy、mpvue 的对⽐？
个⼈认为，如果是新项⽬，且没有旧的 h5 项⽬迁移，则考虑⽤⼩程序原⽣开发，好处是相⽐于第三⽅框架，坑少。
如果有⽼的 h5 项⽬且是 vue 开发 或者 也有 h5 项⽬也需要⼩程序开发，则⽐较适合 wepy 或者 mpvue 来做迁移或者开发。
10. 哪些⽅法来提⾼⼩程序的应⽤速度？
具体见：
1. 提⾼页⾯的加载速度
2. ⽤户⾏为预测 # 什么叫⾏为预测
3. 减少默认data的⼤⼩
4. 组件化⽅案 # 使⽤
邓文迪是谁11. 怎么解决⼩程序的异步请求问题？
⼩程序⽀持 ES6 语法，使⽤ Promise 来解决异步请求
function asyncFn1(){
return new Promise(function(resolve, reject){
//...
})
}
// 调⽤
asyncFn1()
怎么更新最新版本
.then(asyncFn2)
.then(asyncFn3);
12. ⼩程序关联如何确定⽤户的唯⼀性？
使⽤ wx.getUserInfo ⽅法 withCredentials 为 true 时，可获取 encryptedData，⾥⾯有 union_id，后端需要进⾏对称解密。13. ⼩程序如何实现下拉刷新？
在json配置中开启 enablePullDownRefresh 下拉刷新的动作，在.js ⽂件中通过 onPullDownRefresh 函数来实现相关的操作。
详细的实现代码请移步⾄：
14. ⼩程序使⽤webview直接加载要注意哪些事项？
1. 必须要在⼩程序后台使⽤管理员添加业务域名；
2. h5页⾯跳转⾄⼩程序的版本必须是1.
3.1以上；
3. 分享只可以是⼩程序的主名称，如要⾃定义分享内容，需⼩程序版本在1.7.1以上
4. h5的⽀付不可以是的appid，必须是⼩程序的appid，⽽且⽤户的openid也必须是⽤户和
⼩程序的。
15. webview中的页⾯怎么跳转回⼩程序？
详情请移步⾄：
wx.miniProgram.navigateTo({
url:’pages/login/login’+’$params’
})
// 跳转到⼩程序导航页⾯
wx.miniProgram.switchTab({
url:’/pages/index/index’
})
16. bindtap和catchtap的区别？
相同点：⾸先他们都是作为点击事件函数，就是点击时触发。在这个作⽤上他们是⼀样的，可以不做区分。
不同点：他们的不同点主要是bindtap是不会阻⽌冒泡事件的，catchtap是阻⽌事件冒泡的。
17. 简述五个路由的区别？
wx.navigateTo() 保留当前页⾯，跳转到应⽤内的某个页⾯。但是不能跳到 tabbar 页⾯ ；
wx.switchTab() 跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯；
wx.navigateBack() 关闭当前页⾯，返回上⼀页⾯或多级页⾯。可通过 getCurrentPages() 获取当前的页⾯栈，决定需要返回⼏层；
可以按照在 wxml、js和跳转失败进⾏区分：
1. 在wxml页⾯中：可分为 “跳转新页⾯”、“在当前页打开”、“切换到⾸页Tab”；
2. 在js页⾯中：分为 “应⽤内的页⾯” 和 “tabBar页⾯” ；
3. 如果上述跳转遇到跳转失败或者⽆效的问题，请访问：wx.directTo⽆效
18. ⼩程序与H5的区别？
1. 运⾏环境不同：⼩程序在运⾏，h5在浏览器运⾏；
2. 开发成本不同：h5需要兼容不同的浏览器；
3. 获取系统权限不同：系统级权限可以和⼩程序⽆缝衔接；
4. 应⽤在⽣产环境的运⾏流畅度：h5需不断对项⽬优化来提⾼⽤户体验；
19. ⼩程序如何更新页⾯中的值？
可以通过 this.setData 来进⾏改变。
20. 如何实现登录数据的持久化？
可以通过 wx.setStorageSync('键名', 对应的值) 来进⾏数据持久化存储。
21. ⼩程序和app有什么不同之处？
⼩程序属于轻量级的app 但是限制在中，开发周期短，功能较少，占⽤空间少；
app就相反 需要占⽤额外内存 开发周期长
22. ⼩程序如何进⾏双向绑定？
1. 通过 bind-tap 点击事件 向 app.js 定义的⽅法中获取回执；
2. 设置 data 的值 实现双向绑定。
23. 如何⾃定义tabbar？
1. 取消当前的 tabbar
2. 插⼊⾃定义 tabbar 组件
3. app.json 调⽤组件
4. 页⾯显⽰ tabbar 组件
灿烈图片24. ⼩程序怎样使⽤⾃定义组件？