小程序面试题

小程序面试

小程序相关文件

wxml 模版文件，是框架设计的一套标签语言，结合基础组件，事件系统可以构建出页面结构

wxss 样式文件

js 脚本逻辑文件

json 配置文件

wxss 和 css 的区别

wxss 背景图片只能外链或者base64

使用 @import 相对路径引入外联样式

尺寸为rpx，rpx是响应式像素，根据屏幕宽度自适应，默认是1px=2rpx

wxss只支持部分css选择器

小程序的双向绑定和vue有什么不一样

小程序需要借助data，取值的时候要this.data，赋值如果不用setData不会触发视图更新，vue直接this就行

小程序的生命周期

onLoad onShow onReady onHide onUnload

怎么实现下拉刷新

配置app.json或者配置组件的，enablePullDownRefresh 开启下拉刷新，页面用onPullDownRefresh函数处理

再或者使用scroll-view, 自定义刷新通过bindscrolltoupper

bindtap 和 catchtap 的区别

都是点击事件，catchtap能阻止冒泡

有哪些传递数据的方法

路由添加url参数

全局变量

组件模版传递

本地缓存

数据库传递

说下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() 关闭所有页，打开某个页

小程序wx:if 和 hidden 的区别

wx:if 是隐藏时不渲染，hidden一直都渲染

wx:if 有更高的切换消耗，不频繁切换用hidden

app.json 描述

pages 路由，页面路径

window 页面顶部配置，背景，文字啥的

tabbar 底栏配置，最多5个，最少2个

封装请求

把wx.request请求封装，然后封装post,get啥的常用的方法，最后导出

建一个api.js，导入封装的方法，调取相应的方法，传递参数

在页面中调用api.js

小程序相关文件类型

project.config.json 项目配置

App.js 全局变量，小程序生命周期

App.json 页面路径，顶部配置，底栏配置

App.wxss 全局样式

pages 放页面

index.json 页面配置

index.wxml 页面

index.js 页面js

index.wxss 页面样式

wxml 和 html 区别

都是描述页面结构的

都有标签和属性

标签名字不一样，wxml标签少，单一标签多

多了一些wx:if的属性和{{}}

wxml只能在微信开发者工具预览，html浏览器就行

组件封装不同，wxml对组件重新封装

小程序里没有DOM和window，用不了window和document

小程序原理

本质是单页面应用，通过微信调用原生接口

是数据驱动架构，视图和数据是分离的，通过数据更新视图

功能分为webview和appservice，webview是视图，appservice是业务，数据和接口调用

在两个进程中运行，通过系统的JSBridge实现通信，渲染和事件处理

小程序优化

去掉没用的代码，减少小程序体积

减少静态资源文件

复杂逻辑在后端实现

组件和逻辑复用

分包加载

部分页面H5

启用本地缓存

数据预拉取

跳转预拉取

懒加载

接口聚合

图片资源优化

添加骨架屏

减少data数据量，层级深度

去掉多余的节点属性和事件

用事件总线替代数据绑定的通信方式，用发布/订阅模式完成父向子的数据传递

onPageScroll事件回调使用节流

小程序优劣势

优势

容易上手，基础组件库全，基本上不用考虑接口兼容

开发文档完善，社区活跃，支持插件开发

用户体验好，不用下载，即用即走，运行速度快，依靠微信流量

连接线上线下

开发成本比app低

---

劣势

限制较多，页面大小不能超过1M，不能打开超过5个层级页面

样式单一，部分组件不能修改，比如幻灯片

需要审核上架，比较麻烦

留存不好，只能在微信里用

小程序调用接口有哪些问题

返回数据大了可能会导致奔溃

小程序不支持html内容直接渲染，需要借助插件

在webview里跳回小程序

wx.miniProgram.navigateTo()

wx.miniProgram.switchTab()

小程序和H5的区别

运行环境不一样

开发成本不一样

获取系统权限不一样

运行流畅度不一样

小程序发布要审核

小程序和app的区别

限制在微信里，开发周期短，功能少，占用空间少

支付流程

获取临时凭证，获取wxid

生成repayid，返回json

小程序调用支付接口，支付成功提示和回调后端

自定义tabbar

取消原有tabbar

创建tabbar组件

在app.json里配置tabBar的custom设置true

在tab页的json配置usingComponents，也可以在app.json里全局开启

小程序里用闭包

有些函数是异步的，如果函数里有循环，不使用闭包最后结果都一样

小程序和vue写法的区别

小程序里 wx:for

vue v-for=" in "

小程序通过data取数据，通过setData赋值

vue直接this就行