uniapp 高频面试题合集(uniapp面试题必问的坑)

uniapp 高频面试题合集

目录

谈谈你对uni-app的理解

推荐整理分享uniapp 高频面试题合集(uniapp面试题必问的坑)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp面试题必问,uniapp高频面试题,uniapp前端面试题,uniapp常见面试题,uniapp常见面试题,uniapp面试题及答案2020,uniapp面试题必问的坑,uniapp常见面试题,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

        条件注释定义

        条件注释的语法

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

uniapp中为什么会出现跨域问题,如何解决

---

谈谈你对uni-app的理解

详情请点击此处

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

使用条件注释

        条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

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

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写 if else，会造成代码执行性能低下和管理混乱。编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

条件注释定义

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

条件注释的语法

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在#ifndef：if not defined 除了某平台均存在%PLATFORM%：平台名称uniapp中封装接口请求相较于微信小程序有什么要注意的

        如果uniapp要在web端进行适配,要注意请求跨域问题---需要配置代理

uniapp中为什么会出现跨域问题,如何解决

原因

        uniapp在web端进行适配时,会产生跨域问题

解决

        配置代理

封装统一的http请求

       针对于uni.request我们可以沿用之前我们在小程序中的封装思路，封装http请求

封装的目的

发送请求的时候调用更简洁添加一些通用的配置(超时时间，请求头)。 调用者没有传入配置的时候用默认的，调用者传入了相同，优先使用调用者改成使用promise解决异步问题统一维护域名添加请求拦截器，在所有请求之前加一些通用的操作代码响应之前，进行一些通用的操作 

封装代码 

const proxy = {    "/api":{             target:"http://59.111.104.104:8086",             pathRewrite:'^/api'    }}//http://59.111.104.104:8086/course/// 作用: 根据当前的url和代理得到完整url// 输入： 当前的url// 输出： 完整的urlfunction getUrl(url){    for(let key in proxy){             if(url.startsWith(key)){                       // 匹配到了代理                       if(proxy[key].pathRewrite){                                // 需要进行前缀重写                                url = url.replace(new RegExp(proxy[key].pathRewrite),"")                       }                       url = proxy[key].target + url                       break;             }    }    ///返回处理后的url    return url;}function getHeader(header={}){    return {                       "Content-Type":"application/x-www-form-urlencoded",                       // #ifndef H5                       "Cookie":uni.getStorageSync("cookie"),                       // #endif                       ...header             }}function request(options){    return new Promise((reslove,reject)=>{             if(!options.header) options.header = {}             const header = getHeader(options.header);                         // 请求之前进行一些操作             // 加载代理             // #ifndef H5             options.url = getUrl(options.url)             // #endif             console.log(options.url)             uni.request({                       // 设置超时时间10s                       timeout:10000,                       ...options,                       header,                       success(res) {                                // 响应之前进行一些操作                                reslove(res)                       },                       fail(err) {                                reject(err)                       }             })    })}export function get(url,options){    return request({             url,             ...options,             method:"GET"    })}export function post(url,data,options){    return request({             url,             data,             ...options,             method:"POST"    })}//配置代理//vue.config.jsmodule.exports = {    devServer: {             proxy: {                       "/api": {                                "target": "https://wk.myhope365.com",                                "pathRewrite": {                                          "^/api": ""                                }                       }             }    }}