快捷導(dǎo)航

uniapp高頻面試題及答案合集

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

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

談?wù)勀銓ni-app的理解

詳情請點擊此處

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

使用條件注釋

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

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

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

但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。

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

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

條件注釋定義

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

條件注釋的語法

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

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

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

如果uniapp要在web端進行適配,要注意請求跨域問題---需要配置代理

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

原因

uniapp在web端進行適配時,會產(chǎn)生跨域問題

解決

配置代理

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

針對于uni.request我們可以沿用之前我們在小程序中的封裝思路，封裝http請求

封裝的目的

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

封裝代碼

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){
                                // 需要進行前綴重寫
                                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({
                       // 設(shè)置超時時間10s
                       timeout:10000,
                       ...options,
                       header,
                       success(res) {
                                // 響應(yīng)之前進行一些操作
                                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": ""
                                }
                       }
             }
    }
}