前端⼩程序常见⾯试题
1、⼩程序有⼏个⽂件
WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出页⾯的结构。内部主要是⾃⼰定义的⼀套组件
WXSS (WeiXin Style Sheets)是⼀套样式语⾔，⽤于描述 WXML 的组件样式
js逻辑处理，⽹络请求
json⼩程序设置，如页⾯注册，页⾯标题及tabBar
2、⼩程序怎样跟事件传值
给 HTML 元素添加 data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或 onload的 param参数获取。但 data -名称不能有⼤写字母和不可以存放对象
3、⼩程序的 wxss 和 css 有哪些不⼀样的地⽅？
wxss的图⽚引⼊需使⽤外链地址
没有 Body；样式可直接使⽤ import 导⼊
4、⼩程序关联如何确定⽤户的唯⼀性
使⽤ wx.getUserInfo⽅法 withCredentials 为 true 时 可获取 <encryptedData，⾥⾯有 union_id。后端需要进⾏对称解密
5、⼩程序与vue区别
⽣命周期不⼀样，⼩程序⽣命周期⽐较简单
数据绑定也不同，⼩程序数据绑定需要使⽤{{}}，vue 直接：就可以 显⽰与隐藏元素，vue中，使⽤ v-if和 v-show
控制元素的显⽰和隐藏，⼩程序中，使⽤wx-if和hidden 控制元素的显⽰和隐藏
事件处理不同，⼩程序中，全⽤ bindtap(bind+event)，或者 catchtap(catch+event)绑定事件,vue：使⽤v-on:event 绑定事件，或者使⽤@event绑定事件
数据双向绑定也不也不⼀样在 vue中，只需要再表单元素上加上 v-model，然后再绑定 data中对应的
⼀个值，当表单元素内容发⽣变化时，data中对应的值也会相应改变，这是 vue⾮常 nice 的⼀点。⼩程序必须获取到表单元素，改变的值，然后再把值赋给⼀个data中声明的变量。
6、⼩程序的双向绑定和vue哪⾥不⼀样
⼩程序直接 this.data属性是不可以同步到视图的，必须调⽤：
this.setData({
// 这⾥设置
})
7、简述⼩程序原理
⼩程序采⽤ JavaScript、WXML、WXSS 三种技术进⾏开发，本质就是⼀个单页⾯应⽤，所有的页⾯渲染和事件处理，都在⼀个页⾯内进⾏，但⼜可以通过客户端调⽤原⽣的各种接⼝
的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页⾯更新，都需要通过对数据的更改来实现
⼩程序分为两个部分 webview和 appService 。其中 webview 主要⽤来展现UI ，appService 有来处理业务逻辑、数据及接⼝调⽤。它们在两个进程中运⾏，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理
8、⼩程序的⽣命周期函数
onLoad 页⾯加载时触发。⼀个页⾯只会调⽤⼀次，可以在onLoad 的参数中获取打开当前页⾯路径中的参数
onShow() 页⾯显⽰/切⼊前台时触发
onReady() 页⾯初次渲染完成时触发。⼀个页⾯只会调⽤⼀次，代表页⾯已经准备妥当，可以和视图层进⾏交互
onHide() 页⾯隐藏/切⼊后台时触发。 如 navigateTo 或底部 tab 切换到其他页⾯，⼩程序切⼊后台等
onUnload() 页⾯卸载时触发。如 redirectTo 或 navigateBack 到其他页⾯时
9、哪些⽅法可以⽤来提⾼⼩程序的应⽤速度
1、提⾼页⾯加载速度
2、⽤户⾏为预测
3、减少默认 data 的⼤⼩
4、组件化⽅案
10、⼩程序的优劣势
优势
即⽤即⾛，不⽤安装，省流量，省安装时间，不占⽤桌⾯ 依托流量，天⽣推⼴传播优势 开发成本⽐ App 低
缺点
⽤户留存，即⽤即⾛是优势，也存在⼀些问题 ⼊⼝相对传统 App 要深很多 限制较多，页⾯⼤⼩不能超过2M。不能打开超过10个层级的页⾯
11、怎么解决⼩程序的异步请求问题
⼩程序⽀持⼤部分 ES6 语法
在返回成功的回调⾥⾯处理逻辑Promise异步
12、如何实现下拉刷新
⾸先在全局 config 中的 window配置 enablePullDownRefresh ，在 Page 中定义onPullDownRefresh 钩⼦函数，到达下拉刷新条件后，该钩⼦函数执⾏，发起请求⽅法 请求返回后，调⽤wx.stopPullDownRefresh停⽌下拉刷新
13、bindtap和catchtap的区别是什么
相同点：⾸先他们都是作为点击事件函数，就是点击时触发。在这个作⽤上他们是⼀样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻⽌冒泡事件的，catchtap是阻值冒泡的
14、⼩程序页⾯间有哪些传递数据的⽅法
1、使⽤全局变量实现数据传递。在 app.js ⽂件中定义全局变量 globalData， 将需要存储的信息存放在⾥⾯
2、使⽤ wx.navigateTo与 wx.redirectTo 的时候，可以将部分数据放在 url ⾥⾯，并在新页⾯onLoad的时候初始化
3、使⽤本地缓存Storage 相关
15、⼩程序wxml与标准的html的异同？
相同：
都是⽤来描述页⾯的结构；
都由标签、属性等构成；
不同：
标签名字不⼀样，且⼩程序标签更少，单⼀标签更多；
多了⼀些wx:if 这样的属性以及 {{ }}这样的表达式
WXML仅能在⼩程序开发者⼯具中预览，⽽HTML可以在浏览器内预览；
组件封装不同， WXML对组件进⾏了重新封装，
⼩程序运⾏在JS Core内，没有DOM树和window对象，⼩程序中⽆法使⽤window对象和document对象。
16、⼩程序简单介绍下三种事件对象的属性列表？
基础事件（BaseEvent）
type：事件类型
timeStamp：事件⽣成时的时间戳
target：触发事件的组件的属性值集合
currentTarget：当前组件的⼀些属性集合
⾃定义事件（CustomEvent）
detail
触摸事件（TouchEvent）
touches
changedTouches
17、⼩程序对wx:if 和 hidden使⽤的理解？
wx:if有更⾼的切换消耗。
hidden 有更⾼的初始渲染消耗。
因此，如果需要频繁切换的情景下，⽤ hidden 更好，如果在运⾏时条件不⼤可能改变则wx:if 较好。
18、⼩程序与H5的区别？
写文章的小程序运⾏环境的不同
传统的HTML5的运⾏环境是浏览器，包括webview，⽽⼩程序的运⾏环境并⾮完整的浏览器，是开发团队基于浏览器内核完全重构的⼀个内置解析器，针对⼩程序专门做了优化，配合⾃⼰定义的开发语⾔标准，提升了⼩程序的性能。
开发成本的不同
只在中运⾏，所以不⽤再去顾虑浏览器兼容性，不⽤担⼼⽣产环境中出现不可预料的奇妙BUG
获取系统级权限的不同
19、app.json 是对当前⼩程序的全局配置，讲述三个配置各个项的含义？
```pages字段`` —— ⽤于描述当前⼩程序所有页⾯路径，这是为了让客户端知道当前你的⼩程序页⾯定义在哪个⽬录。
window字段 —— ⼩程序所有页⾯的顶部背景颜⾊，⽂字颜⾊定义在这⾥的
tab字段—⼩程序全局顶部或底部tab
20、⼩程序onPageScroll⽅法的使⽤注意什么？
由于此⽅法调⽤频繁，不需要时，可以去掉，不要保留空⽅法，并且使⽤onPageScroll时，尽量避免使⽤setData()，尽量减少setData()的使⽤频次。
21、⼩程序视图渲染结束回调？
使⽤setData(data, callback)，在callback回调⽅法中添加后续操作代码
22、⼩程序同步API和异步API使⽤时注意事项？
wx.setStorageSync是以Sync结尾的API为同步API，使⽤时使⽤try-catch来查看异常，如果判定API为异步，可以在其回调⽅法success、fail、complete中进⾏下⼀步操作。
23、简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(),
wx.navigateTo()：保留当前页⾯，跳转到应⽤内的某个页⾯。但是不能跳到 tabbar 页⾯
wx.switchTab()：跳转到 abBar 页⾯，并关闭其他所有⾮ tabBar 页⾯
wx.navigateBack()：关闭当前页⾯，返回上⼀页⾯或多级页⾯。可通过getCurrentPages() 获取当前的页⾯栈，决定需要返回⼏层wx.reLaunch()：关闭所有页⾯，打开到应⽤内的某个页⾯
24、如何封装⼩程序的数据请求的？
1、将所有的接⼝放在统⼀的js⽂件中并导出。
2、在app.js中创建封装请求数据的⽅法。
3、在⼦页⾯中调⽤封装的⽅法请求数据。
25、⼩程序与原⽣App哪个好？
⼩程序除了拥有的低开发成本、低获客成本低以及⽆需下载等优势，在服务请求延时与⽤户使⽤体验是都得到了较⼤幅度 的提升，使得其能够承载跟复杂的服务功能以及使⽤户获得更好的⽤户体验。
26、webview中的页⾯怎么跳回⼩程序中？
⾸先要引⼊最新版的js，然后
wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})
27、⼩程序关联如何确定⽤户的唯⼀性？
使⽤wx.getUserInfo⽅法withCredentials为 true时 可获取encryptedData，⾥⾯有union_id。后端需要
进⾏对称解密。
28、⼩程序调⽤后台接⼝遇到哪些问题？
1.数据的⼤⼩有限制，超过范围会直接导致整个⼩程序崩溃，除⾮重启⼩程序；
2.⼩程序不可以直接渲染⽂章内容页这类型的html⽂本内容，若需显⽰要借住插件，但插件渲染会导致页⾯加载变慢，所以最好在后台对⽂章内容的html进⾏过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。
29、webview的页⾯怎么跳转到⼩程序导航的页⾯？
答：⼩程序导航的页⾯可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加⼊以下代码即可：
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
}
webview的页⾯，则通过
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
30、⼩程序的优劣势？
优势：
1、⽆需下载，通过搜索和扫⼀扫就可以打开。
2、良好的⽤户体验：打开速度快。
3、开发成本要⽐App要低。
4、安卓上可以添加到桌⾯，与原⽣App差不多。
5、为⽤户提供良好的安全保障。⼩程序的发布，拥有⼀套严格的审查流程，不能通过审查的⼩程序是⽆法发布到线上的。劣势：
1、限制较多。页⾯⼤⼩不能超过1M。不能打开超过5个层级的页⾯。
2、样式单⼀。⼩程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯⽚、导航。
3、推⼴⾯窄，不能分享朋友圈，只能通过分享给朋友，附近⼩程序推⼴。其中附近⼩程序也受到的限制。
4、依托于，⽆法开发后台管理功能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。