草庐IT

uniapp 高频面试题合集

疾风小蜗牛 2023-04-15 原文

目录

谈谈你对uni-app的理解

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

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

        条件注释定义

        条件注释的语法

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

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


谈谈你对uni-app的理解

详情请点击此处

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

使用条件注释

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

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

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

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

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

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

条件注释定义

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

条件注释的语法

写法: #ifdef  #ifndef  %PLATFORM% 开头,以 #endif 结尾。

  • #ifdefif defined 仅在某平台存在
  • #ifndefif not defined 除了某平台均存在
  • %PLATFORM%:平台名称

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

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

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

原因

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

解决

        配置代理

封装统一的http请求

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

封装的目的

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

封装代码 

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 高频面试题合集的更多相关文章

  1. 【Java 面试合集】HashMap中为什么引入红黑树,而不是AVL树呢 - 2

    HashMap中为什么引入红黑树,而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道,在JDK1.8以及之前,针对HashMap有什么不同。JDK1.7的时候,HashMap的底层实现是数组+链表JDK1.8的时候,HashMap的底层实现是数组+链表+红黑树我们要思考一个问题,为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好???2.链表上述的截图其实就是链表的结构,我们来看下链表的增删改查的时间复杂度增:因为链表不是线性结构,所以每次添加的时候,只需要移动一个节点,所以可以理解为复杂度是N(1)删:算法时间复杂度跟增保持一致查:既然是非线性结构,所以查询某一个节点的时候

  2. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析:解法:第2题分组问题分析:解法:第3题间隔连续问题分析:解法:第4题打折日期交叉问题分析:解法:第5题同时在线问题分析:解法:第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析:遇到这类

  3. ruby-on-rails - Rabl 多模合集 - 2

    我正在使用RABL输出Sunspot/SOLR结果集,搜索结果对象由多种模型类型组成。目前在rablView中我有:objectfalsechild@search.results=>:resultsdoattribute:id,:resource,:upccodeattribute:display_description=>:descriptioncode:start_datedo|r|r.utc_start_date.to_iendcode:end_datedo|r|r.utc_end_date.to_iendendchild@search=>:statsdoattribute:to

  4. 蓝桥杯C/C++VIP试题每日一练之报时助手 - 2

    ?作者主页:静Yu?简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者?社区地址:前端知识交流社区?博主的个人博客:静Yu的个人博客?博主的个人笔记本:前端面试题个人笔记本只记录前端领域的面试题目,项目总结,面试技巧等等。接下来会更新蓝桥杯官方系统基础练习的VIP试题,依然包括解题思路,源代码等等。问题描述:给定当前的时间,请用英文的读法将它读出来。时间用时h和分m表示,在英文的读法中,读一个时间的方法是:  如果m为0,则将时读出来,然后加上“o’clock”,如3:00读作“threeo’clock”。  如果m不为0,则将时读出来,然后将分读出来,如5

  5. 停车系统源码-基于springboot+uniapp开源项目 - 2

    Iparking停车收费管理系统-可商用介绍Iparking是一款基于springBoot的停车收费管理系统,支持封闭车场和路边车场,支持微信支付宝多种支付渠道,支持多种硬件,涵盖了停车场管理系统的所有基础功能。技术栈Springboot,MybatisPlus,Beetl,Mysql,Redis,RabbitMQ,UniApp功能云端功能序号模块功能描述1系统管理菜单管理配置系统菜单2系统管理组织管理管理组织机构3系统管理角色管理配置系统角色,包含数据权限和功能权限配置4系统管理用户管理管理后台用户5系统管理租户管理多租户管理6系统管理公众号配置租户公众号配置7系统管理操作日志审计日志8系统

  6. 华为OD机试 -旋转骰子(Python) | 机试题算法思路 【2023】 - 2

    最近更新的博客华为OD机试-卡片组成的最大数字(Python)|机试题算法思路华为OD机试-网上商城优惠活动(一)(Python)|机试题算法思路华为OD机试-统计匹配的二元组个数(Python)|机试题算法思路华为OD机试-找到它(Python)|机试题算法思路华为OD机试-九宫格按键输入(Python)|机试算法备考思路华为OD机试-身高排序(Python)|备考思路使用说明参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。华为OD清单查看地址:blog.csdn.net/hihell/catego

  7. 【uniapp】uni.request请求跨域问题解决方案 - 2

    例如,运行H5页面,请求一个地址资源,如果不是本站地址,浏览器就会报跨域错误,这样访问受限问题呈现例如,项目代码里是这样写的,运行H5测试uni.request({ url:'https://gitcode.net/zs1028/stat...ouces_2023/-/...', success(res){ console.log(res) }, fail(err){ console.error(err) }})因为https://gitcode.net不是本站地址,根据浏览器同源策略,是会报跨域错误,解决步骤打开项目的manifest.json文件,以源码视图查看,添加以下代码{ //.

  8. 网络安全岗位面试题 - 2

    前言介绍了网络安全岗位常见的面试题,仅供参考!一、常识部分1.Linux服务器种用户关键信息存储在那个文件中?启动、停止、重启、开机自启mysql服务命令?如何查找/etc/test.txt文件中"password"关键字信息?如何精确查找80端口?/etc/passwdsystemctlstartmysqld或systemmysqldstart 启动systemctlstopmysqld或systemmysqldstop 停止systemctlrestartmysqld或systemmysqldrestart 重启systemctlenablemysqld或systemmysqldenabl

  9. uniapp+uview开发微信小程序学习笔记(一) - 2

    文章目录前言一、注册小程序二、项目创建三、运行项目四、其他配置最后前言此次项目开发使用uniapp和uview进行开发,需要用到的开发工具为HBuilderX和微信开发者工具,具体的安装方式见官网,小程序注册见微信公众平台。一、注册小程序注册在微信公众平台注册小程序,按照提示注册完后会发配一个appid和密钥,需要复制保存好。完善信息设置=>基本设置,填写小程序基本信息,包括名称、头像、介绍及服务范围等。第三方设置根据开发需求添加插件授权。成员管理管理=>成员管理,点击编辑或下拉选择添加成员,输入微信号添加新的项目成员,只有成员可以进行真机测试。体验成员可以使用发布的体验版。开发设置开发=>开

  10. ruby 面试题 - 2

    我在之前的面试中遇到了这个问题,但做不到,知道吗?这是做什么的:`$=`;$_=\%!;($_)=/(.)/;$==++$|;($.,$/,$,,$\,$",$;,$^,$#,$~,$*,$:,@%)=($!=~/(.)(.).(.)(.)(.)(.)..(.)(.)(.)..(.)......(.)/,$"),$=++;$.++;$.++;$_++;$_++;($_,$\,$,)=($~.$"."$;$/$%[$?]$_$\$,$:$%[$?]",$"&$~,$#,);$,++;$,++;$^|=$";`$_$\$,$/$:$;$~$*$%[$?]$.$~$*${#}$%[$?]$;

随机推荐