目錄
談談你對uni-app的理解
uni中如何為不同的平臺設置不同的代碼
條件注釋的作用和使用方法
????????條件注釋定義
????????條件注釋的語法
uniapp中封裝接口請求相較于微信小程序有什么要注意的
uniapp中為什么會出現(xiàn)跨域問題,如何解決
談談你對uni-app的理解
詳情請點擊此處
uni中如何為不同的平臺設置不同的代碼
使用條件注釋
????????條件編譯是用特殊的注釋作為標記，在編譯時根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。
條件注釋的作用和使用方法
uni-app 已將常用的組件、JS API 封裝到框架中，開發(fā)者按照 uni-app 規(guī)范開發(fā)即可保證多平臺兼容，大部分業(yè)務均可直接滿足。
但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。
- 大量寫 if else，會造成代碼執(zhí)行性能低下和管理混亂。
- 編譯到不同的工程后二次修改，會讓后續(xù)升級變的很麻煩。
在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優(yōu)雅的完成了平臺個性化實現(xiàn)。
條件注釋定義
條件編譯是用特殊的注釋作為標記，在編譯時根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。
條件注釋的語法
寫法：以?#ifdef?或?#ifndef?加?%PLATFORM%?開頭，以?#endif?結尾。
- #ifdef：if defined 僅在某平臺存在
- #ifndef：if not defined 除了某平臺均存在
- %PLATFORM%：平臺名稱
uniapp中封裝接口請求相較于微信小程序有什么要注意的
????????如果uniapp要在web端進行適配,要注意請求跨域問題---需要配置代理
uniapp中為什么會出現(xiàn)跨域問題,如何解決
原因
????????uniapp在web端進行適配時,會產(chǎn)生跨域問題
解決
????????配置代理
封裝統(tǒng)一的http請求
?????? 針對于uni.request我們可以沿用之前我們在小程序中的封裝思路，封裝http請求
封裝的目的文章來源：http://www.zghlxwxcb.cn/news/detail-401021.html
- 發(fā)送請求的時候調(diào)用更簡潔
- 添加一些通用的配置(超時時間，請求頭)。 調(diào)用者沒有傳入配置的時候用默認的，調(diào)用者傳入了相同，優(yōu)先使用調(diào)用者
- 改成使用promise解決異步問題
- 統(tǒng)一維護域名
- 添加請求攔截器，在所有請求之前加一些通用的操作
- 代碼響應之前，進行一些通用的操作?
封裝代碼?文章來源地址http://www.zghlxwxcb.cn/news/detail-401021.html
const proxy = {
??? "/api":{
???????????? target:"http://59.111.104.104:8086",
???????????? pathRewrite:'^/api'
??? }
}
//http://59.111.104.104:8086/course
/// 作用: 根據(jù)當前的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 高頻面試題合集的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
