一些关于微信小程序的面试题_面试题小程序的原理

一、简单描述下微信小程序的相关文件类型

微信小程序项目结构主要有四个文件类型：

1. wxml：类似html，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部是微信自己定义的一套组件
2. wxss：类似css，是样式语言，用于描述wxml的组件样式
3. js：数据逻辑处理，进行网络请求等
4. json：小程序设置，比如页面注册，设置页面标题及 tabBar

主要文件

1. app.json：必须要有这个文件，如果没有项目无法运行；它作为配置文件入口，是整个小程序的全局配置，包括页面注册、网络设置及小程序的 window背景色、导航条样式、默认标题等
2. app.js：必须要有这个文件，如果也没有也会报错；需要创建但无需写入什么内容，可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量
3. app.wxss：可选，配置全局样式

二、简述微信小程序的原理

1. 微信小程序采用 javascript、wxml、wxss三种技术进行开发，本质上就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口
2. 微信小程序的架构，是数据驱动的架构模式，它的 UI和数据是分离的，所有的页面更新，都是要通过对数据的更改来实现
3. 小程序分为两部分 webview 和 appService；webview主要用来展现 UI，appService用来处理业务逻辑、数据及接口调用。他们在两个进程中运行，通过系统层 jsBridge实现通信，实现 UI的渲染、事件的处理

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

小程序直接修改 this.data 的属性是不可以直接同步到视图的，需要调用 this.setData({})设置

四、小程序的wxss和css有哪些地方不一样

wxss和css类似，不过在 css 的基础上做了一些补充和修改

1. 尺寸单位 rpx

   rpx是微信小程序的响应式像素，可以根据屏幕进行自适应。规定屏幕宽为 750rpx；如果是在 iphone6上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750物理像素

2. 使用 @import 标识符来导入外联样式

   @import后跟需要导入的外联样式表的相对路径，用分号表示语句结束

五、小程序页面间有哪些传递数据的方式

1. 使用全局变量实现数据传递：在 app.js文件中定义全局变量 globalData，将需要存储的信息放在里面，在页面使用的时候可通过 getApp()拿到全局变量
2. 路径跳转：使用 wx.navigateTo与 wx.redirectTo，可将参数放在 url中，并在新页面 obLoad的时候获取
3. 使用本地存储

六、小程序的生命周期函数

1. onLoad()：页面创建时执行，可获取路径参数
2. onShow()：页面显示/切入前台时触发
3. onReady()：页面首次渲染完毕时执行，代表页面已经准备妥当，可与视图层进行交互
4. onHide()：页面隐藏/切入后台时触发
5. onUpload()：页面销毁时触发，比如 redirectTo其他页面时
6. onPullDownRefresh()：触发下拉刷新时执行
7. onReachBottom()：页面触底时执行
8. onShareAppMessage()：用户点击分享按钮时执行
9. onPageScroll()：页面滚动时执行

七、哪些方法可以用来提高微信小程序的应用速度

1. 提高页面的加载速度
2. 用户行为预测
3. 较少默认 data 的大小
4. 组件化方案

八、微信小程序的优劣势

优势

1. 无需下载安装，通过微信扫一扫或搜索即可快速打开，节省时间
2. 开发成本比 app 低
3. 为用户提供良好的安全保障，小程序发布需要通过一套严格的审查流程
4. 依托微信流量，推广传播优势

劣势

1. 限制较多：页面大小不能超过1 M，不能打开超过5个层级的页面
2. 样式单一：小程序部分组件已成型，样式不可修改
3. 入口相对传统 app 要深
4. 依托于微信，无法开发后台管理功能

九、怎么解决小程序的异步请求问题

小程序支持 ES 6语法，可使用 promise进行异步处理，或者使用 async/await等

十、小程序关联微信公众号如何确定用户的唯一性

如果开发者拥有多个移动应用、网站应用、公众账号、小程序等，可通过 unionid来区分用户的唯一性，因为只要是同一个微信开放平台账号下的移动应用，网站应用、公众账号、小程序，用户的 unionid是唯一的。换句话说，同一用户对同一个微信开放平台下的不同应用，unionid是相同的

十一、如何实现下拉刷新

1. 首先在全局配置中 window 的配置添加 enablePullDownRefresh
2. 在页面中定义 onPullDownRefresh 钩子函数，到达下拉刷新条件后，执行函数
3. 请求返回后，调用 wx.stopPullDownRefresh停止下拉刷新

十二、bindtap和catchtap的区别

相同点：两者都是作为点击事件函数，就是点击时触发函数执行

不同点：bindtap不会阻止事件冒泡，catchtap会阻止事件冒泡

十三、简述一下 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()：关闭所有页面，打开到应用内的某个页面

面试相关