uniapp部分面试题汇总

1. 谈谈你对uni-app的理解

• uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

• uniapp真正做到一套代码多端发行，支持原生代码混写和原生sdk集成。

• 运行体验更好。组件、api与微信小程序一致，兼容 Weex 原生渲染。

• 通用技术栈，学习成本更低。Vue的语法，微信小程序的api，对于前端开发人员来说更容易上手。

• 开放生态，组件更丰富。支持通过npm安装第三方包；支持微信小程序自定义组件及sdk；兼容 mpvue 组件及项目；app端支持与原生混合编码；

• Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。
• mpvue 是一个使用 Vue.js 开发小程序的前端框架，由美团点评技术团队开发在2018年3月开源。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

---

2. uni中如何为不同的平台设置不同的代码

通过条件注释来为不同平台设置不同的代码：

值	平台
APP-PLUS	App
APP-PLUS-NVUE 或 APP-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-QQ	QQ小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

---

3. 条件注释的作用和使用方法

条件注释的作用：实现跨端兼容

使用方法：以 #ifdef 或 #ifndef 加平台代值开头，以 #endif 结尾

#ifdef：if defined 如果是xx平台则运行代码块
#ifndef：if not defined 如果不是xx平台才运行代码块

---

支持的文件类型：

• .vue
• .js
• .css
• pages.json
• 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

代码示例：

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->
<!-- #ifdef H5||APP-PLUS -->
<view>
  h5页面或App都会显示
</view>
<!-- #endif -->

注意事项：
条件编译是利用注释实现的，在不同语法里注释写法不一样，比如：
HTML 中使用 <!-- --> 注释、JS 中使用 // 注释、CSS 中使用 /* */ 注释
APP-PLUS 包含 APP-NVUE 和 APP-VUE，APP-PLUS-NVUE 和 APP-NVUE 没什么区别，为了简写后面出了APP-NVUE

---

4. uniapp中封装接口请求相较于微信小程序有什么要注意的

uniapp和微信小程序都提供了网络请求API（uni.request(OBJECT) 和 wx.request(object)），但 uniapp 为了实现跨端兼容，需要注意网络请求跨域问题，微信小程序不用考虑多端兼容，也不会出现跨域问题。

uniapp中的跨域问题依然可以通过在 vue.config.js 中配置Proxy代理解决；

// vue.config.js for less-loader@6.0.0
module.exports = {
    devServer: {
        proxy: {
        	//👇 代理的名称，一般以这种格式命名，当然你也可以随便起
            '/xxx-api': {
                target: 'http://1.111.xx.123:3000',  // 后台接口的协议、域名、端口号
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/xxx-api': ''//路径重写
                    //如果不重写，则请求时的路径中会带有这个/xxx-api
                }
            },
        }
    }
};