快捷導(dǎo)航

uniapp高頻面試題及答案合集

更新時(shí)間：2023年02月18日 10:00:25 作者：疾風(fēng)小蝸牛

uni-app是一個(gè)使用Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫一套代碼,可以發(fā)布到IOS、Android、Web（響應(yīng)式）、以及各種小程序、快應(yīng)用等多個(gè)平臺(tái),下面這篇文章主要給大家介紹了關(guān)于uniapp高頻面試題及答案的相關(guān)資料,需要的朋友可以參考下

談?wù)勀銓?duì)uni-app的理解

詳情請(qǐng)點(diǎn)擊此處

uni中如何為不同的平臺(tái)設(shè)置不同的代碼

使用條件注釋

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。

條件注釋的作用和使用方法

uni-app 已將常用的組件、JS API 封裝到框架中，開(kāi)發(fā)者按照 uni-app 規(guī)范開(kāi)發(fā)即可保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿足。

但每個(gè)平臺(tái)有自己的一些特性，因此會(huì)存在一些無(wú)法跨平臺(tái)的情況。

大量寫 if else，會(huì)造成代碼執(zhí)行性能低下和管理混亂。
編譯到不同的工程后二次修改，會(huì)讓后續(xù)升級(jí)變的很麻煩。

在 C 語(yǔ)言中，通過(guò) #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個(gè)思路，為 uni-app 提供了條件編譯手段，在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)。

條件注釋定義

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。

條件注釋的語(yǔ)法

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。

#ifdef：if defined 僅在某平臺(tái)存在
#ifndef：if not defined 除了某平臺(tái)均存在
%PLATFORM%：平臺(tái)名稱

uniapp中封裝接口請(qǐng)求相較于微信小程序有什么要注意的

如果uniapp要在web端進(jìn)行適配,要注意請(qǐng)求跨域問(wèn)題---需要配置代理

uniapp中為什么會(huì)出現(xiàn)跨域問(wèn)題,如何解決

原因

uniapp在web端進(jìn)行適配時(shí),會(huì)產(chǎn)生跨域問(wèn)題

解決

配置代理

封裝統(tǒng)一的http請(qǐng)求

針對(duì)于uni.request我們可以沿用之前我們?cè)谛〕绦蛑械姆庋b思路，封裝http請(qǐng)求

封裝的目的

發(fā)送請(qǐng)求的時(shí)候調(diào)用更簡(jiǎn)潔
添加一些通用的配置(超時(shí)時(shí)間，請(qǐng)求頭)。調(diào)用者沒(méi)有傳入配置的時(shí)候用默認(rèn)的，調(diào)用者傳入了相同，優(yōu)先使用調(diào)用者
改成使用promise解決異步問(wèn)題
統(tǒng)一維護(hù)域名
添加請(qǐng)求攔截器，在所有請(qǐng)求之前加一些通用的操作
代碼響應(yīng)之前，進(jìn)行一些通用的操作

封裝代碼

const proxy = {
    "/api":{
             target:"http://59.111.104.104:8086",
             pathRewrite:'^/api'
    }
}
 
//http://59.111.104.104:8086/course
/// 作用: 根據(jù)當(dāng)前的url和代理得到完整url
// 輸入： 當(dāng)前的url
// 輸出： 完整的url
function getUrl(url){
    for(let key in proxy){
             if(url.startsWith(key)){
                        // 匹配到了代理
                       if(proxy[key].pathRewrite){
                                // 需要進(jìn)行前綴重寫
                                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);
 
             // 請(qǐng)求之前進(jìn)行一些操作
 
             // 加載代理
 
             // #ifndef H5
             options.url = getUrl(options.url)
 
             // #endif
             console.log(options.url)
             uni.request({
                       // 設(shè)置超時(shí)時(shí)間10s
                       timeout:10000,
                       ...options,
                       header,
                       success(res) {
                                // 響應(yīng)之前進(jìn)行一些操作
                                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": ""
                                }
                       }
             }
    }
}