uniapp高频面试题及答案合集

 更新时间:2023年02月18日 10:00:25   作者:疾风小蜗牛  
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台,下面这篇文章主要给大家介绍了关于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
// 输出: 完整的url
function 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.js
module.exports = {
    devServer: {
             proxy: {
                       "/api": {
                                "target": "https://wk.myhope365.com",
                                "pathRewrite": {
                                          "^/api": ""
                                }
                       }
             }
    }
}

总结

到此这篇关于uniapp高频面试题及答案的文章就介绍到这了,更多相关uniapp高频面试题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript 高级语法之继承的基本使用方法示例

    javascript 高级语法之继承的基本使用方法示例

    这篇文章主要介绍了javascript 高级语法之继承的基本使用方法,结合实例形式分析了JavaScript继承的基本使用方法与操作注意事项,需要的朋友可以参考下
    2019-11-11
  • three.js安装和使用完整步骤

    three.js安装和使用完整步骤

    Three.js是一个JavaScript库,用于在Web浏览器中创建3D Web图形,下面这篇文章主要给大家介绍了关于three.js安装和使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 一文带你看懂Vue Hook和React Hook

    一文带你看懂Vue Hook和React Hook

    React Hook 是 React 16.8 版本引入的一项新特性,它能够让函数组件拥有类组件中的状态(state)和生命周期方法(lifecycle methods)等功能。Vue 3.x 开始引入了 Hooks API,用于在函数式组件中实现状态和生命周期的管理。本文介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 网页从弹窗页面单选框传值至父页面代码分享

    网页从弹窗页面单选框传值至父页面代码分享

    最近有项目需求,需要在加入新机构的时候,需要选择它的上级机构,下面把代码整理,分享给大家,需要的朋友可以参考下
    2015-09-09
  • 将字符串转换成gb2312或者utf-8编码的参数(js版)

    将字符串转换成gb2312或者utf-8编码的参数(js版)

    直接在url中传递中文参数时,读到的中文都是乱码,那么我们应该怎么将这些参数转换呢,接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧
    2013-04-04
  • JS.elementGetStyle(element, style)应用示例

    JS.elementGetStyle(element, style)应用示例

    获取Dom元素的Style数组中的指定Style元素,下面有个不错的示例,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • 前端技巧之js-md5的简单使用方法

    前端技巧之js-md5的简单使用方法

    这篇文章主要给大家介绍了关于前端技巧之js-md5的简单使用,js-md5是一种前端加密算法,用于在前端对密码等敏感信息进行加密,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 细数localStorage的用法及使用注意事项

    细数localStorage的用法及使用注意事项

    这篇文章主要介绍了细数localStorage的用法及使用注意事项,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • xml和web特殊字符

    xml和web特殊字符

    在html和xml文件中,往往会因为以下特殊字符而导致文件解析出错,一般通过以下函数来处理。
    2009-04-04
  • 微信小程序bindinput与bindsubmit的区别实例分析

    微信小程序bindinput与bindsubmit的区别实例分析

    这篇文章主要介绍了微信小程序bindinput与bindsubmit的区别,结合实例形式分析了微信小程序bindinput与bindsubmit的具体功能、用法及相关使用区别,需要的朋友可以参考下
    2019-04-04

最新评论