uni-app基础与面试题

基础

uni-app 的配置文件部分

uniCloud —— 云空间目录
components —— 组件目录
comp-a.vue —— 可复用的a组件 
hybrid —— App端存放本地html文件的目录
platforms —— 存放各平台专用页面的目录
pages —— 业务页面文件存放的目录
	static —— 存放本地静态资源
uni_modules —— 存放【uni_module】规范的插件
wxcomponents —— 存放小程序组件的目录
main.js —— Vue初始化入口文件
App.vue —— 应用配置，用来配置App全局样式以及监听
mainfest.json —— 配置应用名称，appid，logo，版本等打包信息
page.json —— 配置页面路由，导航条，选项卡等页面类信息
uni.scss —— uni-app内置的常用样式变量

Vue，小程序/uni-app生命周期

vue	小程序/uni-app
beforeCreate 创建前	onLoad 首次进入页面加载时触发
created 创建后	onShow 加载完成之后，后台切到前台或重新进入页面时触发
beforeMount 载入前，挂载	onReady 页面首次渲染完成时触发
mounted 载入后	onHide 前台切到后台或进入其他页面触发
beforeUpdate 更新前	onUnload 页面卸载时触发
updated 更新后	onPullDownRefresh 监听用户下拉动作
beforeDestory 销毁前	onReachBottom 页面上拉触底事件
destroyed 销毁后	onShareAppMessage 用户点击右上角转发

路由与跳转

uni.navigateTo 跳转页面
uni.redirect 销毁当前页跳转到指定页面
uni.switchTab 跳转至tab页面
uni,reLaunch 销毁所有页面跳转至指定页面
uni.navigateBack 返回上一页
exit 退出小程序，target = "miniProgram"时生效

面试题

1、全局变量 globalData 的理解

globalDate 和微信小程序中一样，是定义在全局上的对象看，他类似vuex，用来共享全局状态，在组件和页面中可以使用getApp().globalData 来获取和修改全局变量

2、uni-app 跨端原理

uni-app 分编译器和运行时（runtime），实现一套代码，多端运行主要是这两部分配合完成的
编译器将开发者的代码进行编译，编译的输出物由每个平台各自的runtime进行解析。

3、不同平台的 runtime 是怎么转义的？

小程序端，使用小程序版的vue runtime ，页面路由，组件，api 等方面基本都是转义。
web 端，uni-app的runtime 相比普通的vue项目，多一套ui库，页面路由框架，uni对象。
App 端，uni-app的 runtime 更复杂，DCloud 有一套小程序引擎，打包app时将开发者的代码和DCloud 的小程序打包成apk或ipa

4、简述一下你对 runtime 的理解

runtime 不是运行在电脑开发环境上，而是运行在真正的终端上。
uni-app 在每个平台都有各自的runtime。
主要包括三部分：基础框架，组件，API

5、谈谈你对runtime 的基础框架，组件，API的理解

基础框架：包含语法，数据驱动，全局文件，应用管理，页面管理，js引擎，渲染和排版引擎等。
在 web和小程序上不需要uni-app提供js引擎和排版引擎，但app上需要。
App在安卓上使用的uni-app js引擎是V8,在ios上是jscore
App有两套渲染引擎，.vue用webview，.nvue用原生渲染。

组件：runtime 只有基础组件，扩展组件是下载到用户的项目代码里。
在小程序里runtime不占面积，web和安卓，ios会占用一定的体积，相当于内置了一套ui库
关于组件在跨端上，在web平台使用的 for web库（elementtUI）这种操作了dom的，就无法跨端在app和小程序使用。

API：uni-app的API可以跨端调用，而不跨端的项目也可以调用该端专有的API。
ext API是将不常用的API剥离，缩小项目体积，需要用到的时候再单独下载即可。

6、uni-app 的编译器是如何特定编译的？

在 web、app平台，将.vue 文件 编译成 js 代码，小程序则拆分shengchengwx,l,wxss ,js等
如果涉及uts代码，安卓编译为kotlin代码，ios 编译成swift 代码。
vue2版本的编译器基于 webpack 实现，vue3通过 vite 实现，性能更快。
同时也支持条件编译，可以指定代码至编译到特定的终端平台。

7、uni-app 在非h5端上运行为什么要在架构上分为逻辑层和视图层？

主要原因是性能。web端都运行在webview里，js运算和界面渲染会抢资源导致卡顿，而小程序和app，逻辑层都独立为了单独的 js 引擎，渲染层仍然是webvbiew（app也支持原生渲染）。所以在小程序和app上不支持window，dom等API（app可以在渲染层操作window,dom）

8、谈谈你对逻辑层和视图层的理解

逻辑层：
逻辑层是运行在一个独立的 jscore 里，它不依赖于本机的 webview，所以没有浏览器的兼容问题，同时它也无法操作window,document等浏览器专用的 js API。

浏览器 js 引擎	jscore 或 v8 上新增一些浏览器专用的api
node.js 引擎	v8的基础上新增电脑专用api
uni-app 的app 和小程序的js引擎	jscore上扩充手机端常用的api

视图层：
h5，小程序，app-vue视图层都是webview。app-nvue的视图层是基于weex改造的原生渲染视图。
ios使用WKWebview，安卓上使用Android system webview，前者存在浏览器兼容问题，后者会因为手机不同产生不同差异。
因此uni-app的视图层css在 app-vue上使用系统webview时手机有浏览器的css兼容问题

9、逻辑层和视图层分离的利与弊

好处： js运算不影响渲染，窗体动画稳。
坏处：逻辑层和视图层的通信会存在损耗。

10、如何处理分离后出现的问题

wenview 渲染的视图层：
微信小程序有专门运行视图层的专属js：wxs。 他可以监听手势，根据拖动滑动操作刷新插件。
app端提供了 renderjs，并兼容到H5平台。（renderjs主要的作用：大幅降低逻辑层和视图层的通讯损耗，提高视图交互能力；在视图层操作dom，运行for web 的js库）

原生渲染的视图层：
weex 提供了一套 bindingx 机制，可以一次性传一个表达式给原生层，由原生层解析后根据指令操作原生的视图层，避免反复跨层通信。