⼩程序的常见的⾯试题(总结)
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.reLaunch()的区别
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、推⼴⾯窄,不能分享朋友圈,只能通过分享给朋友,附近⼩程序推⼴。其中附近⼩程序也受到的限制。
5、依托于,⽆法开发后台管理功能。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论